css 标准流、盒模型、浮动

一、盒模型

1.1 盒子的区域

一个盒子的主要属性5个：width、height、padding、border、margin

padding：内边距

border：边框

margin：外边框

1.2 认识width、height

一个盒子的真实占有的宽度：左border+左padding+width+右padding+右border

一个盒子的真实占有的高度：上border+上padding+height+下padding+下border 

如果想保持一个盒子的真实占有宽度不变：那么加width要减padding，加padding要减width

高度同理。

6.3 padding

padding 就是内边距。padding的区域有背景颜色，background-color填充的是border以内的所有区域

padding是四个方：两种描述padding的方法。

1）小属性：

padding-top：30px;

padding-right：20px；

padding-bottom：40px;

padding-left:100px;

2)综合属性：

padding：30px 20px 40px 100px;

                 上      右     下      左

要懂得小属性层叠大属性：

padding：20px;

padding-left:30px;

很多元素都带有默认的padding，比如ul，所以在做网站的时候便于控制，需要清除默认的padding，*效率不高，采用并集选择器罗列所有的标签清除padding（专业的样式表）

1.4border

就是边框。有三要素：粗细，线型，颜色

颜色默认黑色，其他两个如果不写，就显示不出边框。

border：1px dashed red;

dashed:虚线 solid：实线 dotted:圆点

border 属性可以被拆分为两种方式：

1）三要素拆分：

border-width、border-style、border-color

border-width：1px;

border-style:solid;

border-color:red;

等价于：border：1px solid red;

2）方向拆分：

border-top、border-right、border-bottom

 二、标准文档流

标准文档流的微观现象：

1）空白折叠现象

2）高矮不齐，底边对齐

3）自动换行

2.1块级元素和行内元素

标签分两种等级：

1）块级元素

     霸占一行，不与其他任何元素并列

     能接受宽高

     如果不设置宽度，宽度将默认为父亲的100%

2) 行内元素

    与其他行内元素并排

    不能设置宽高，默认就是文字的宽高

1、HTML将标签分为容器级和文本级：

容器级：div h dt dd li 等

文本级：p span b a em u i 等

2、CSS将标签分为块级元素和行内元素：

块级元素：div h dt dd li p等

行内元素：a span em b u i  等

注意：不要将两者混淆！

2.2块级元素和行内元素的相互转换

div {
display：inline；
width：50px;
height:500px;
}
           

此时，div将变成行内元素，这是将不能设置宽高。

span {
display：block；
width：200px;
height：200px;
}
           

此时，这个标签可以设置宽高，独占一行。

脱离标准流：css中的三种手段

1）浮动

2）绝对定位

3）固定定位

三、浮动

浮动是css里面布局最多的属性

3.1 浮动的元素脱标

一个span标签不需要转变成块级元素就能设置宽高。一旦一个元素浮动了，就能并排了，并且能设置宽高，不论原来是什么。

span{

float：left；//左浮

width：200px;

height: 200px;

}

3.2浮动的元素相互贴靠

3.3浮动元素有“字围”效果

<div>

        <img src="images/1.jpg"/>

</div>

<p>文字文字...文字 </p>

让div浮动，p不浮动，会出现文字围着图片的效果。

3.4 浮动元素的收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度

比如：

div{
float：left；
background-color：gold；
}
<div>
  文字
</div>
           

这个div浮动了，并且没有设置宽度，那么将自动缩紧为内容的宽度。