Css问题 margin float 文档流 背景图底部充满

今天来整理一下做网页遇到的问题吧

1.插入背景图片并使图片居于div底部充满整个行。

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom;
    background-size:100%;
</style>

  属性:

   background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select。

     语法取值有两种:长度和关键字。

        长度:设置水平方向数值(x轴)和垂直方向数值(y轴)如:background-position:10px 20px;

        关键字:top left (左上)top center(上居中)等,第二个值不设默认为居中。

    background-size:定义背景图片大小。

     属性值1.length :第一个值是宽度,第二个值是高度,如果只设置第一个值,那么第二个值会自动转换为 “auto”

        2.percentage:以父元素的百分比来设置图片的宽度和高度,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”。

       3.cover :背景图扩展完全覆盖区域(不等比)

       4.contain:背景图扩展完全覆盖区域(等比)

2.margin的问题

  (1)margin:auto auto; 为什么不能垂直居中

    不支持上下 auto 因为页面中 难以确定的是高度

  (2)margin和padding的区别

    margin:需要在border外侧添加空白时。需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

    padding:需要在border内侧添加空白。需要等于两者之和。如15px + 20px的padding,将得到35px的空白。

  (3)对内联元素上下边距没效果。

3.float的问题

  (1)对后面div左漂流到上方div上面时,上方div内文字会环绕漂流的div

    与文档流有关,详见4

4.文档流

  是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

  脱离文档流,是将元素从普通的布局排版中拿走,块元素定位的时候当做漂流元素不存在。定位中的absolute和浮动float会脱离文档流。

    部分无视:float脱离文档流,其他盒子会无视这个元素,但盒子内的内联元素会让出漂流的位置,而环绕它存在。

    完全无视:absolute脱离文档流,其他盒子包括盒子内内联元素会完全无视定位的元素。

Margin和 float不能同时用  百度了一下说可以......还没发现为什么,再试试下次解释。

原文地址:https://www.cnblogs.com/SSs1995/p/8577050.html

时间: 2024-10-22 20:29:14

Css问题 margin float 文档流 背景图底部充满的相关文章

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l

float/文档流

float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素.clear:both;在左右两侧均不允许浮动元素. 清除浮动方法 加高度    问题:扩展性不好 <!DOCTYPE html> <html>

float/文档流/清除浮动

1.float:left|right|none|inherit 2.文档流是万张中显示排列时候所占的位置 3.浮动的定义:使元素脱离文档流.按照指定方向移动,遇到父级边界或者相邻的浮动元素停下来 4.clear:left|right|none|inherit;元素的某个方向上不能有浮动元素 cear:both:在左右两侧均不允许浮动元素 清楚浮动的方法: <head> <meta charset="UTF-8"> <title>Document<

css排版之-标准文档流

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

css之float之非完全脱离文档流

非完全脱离文档流  左右结构div盒子重叠现象,一般是由于相邻两个DIV一个使用浮动一个没有使用浮动.一个使用浮动一个没有导致DIV不是在同个"平面"上,但内容不会造成覆盖现象,只有DIV形成覆盖现象. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s

文档流 css中间float clear和布局

文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:ye

文档流 css中的float clear与布局

文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:yel

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视