1小时学会CSS-下-阿里云开发者社区

今天给大家分享的内容包含CSS 盒子模型，CSS 标准布局， CSS 浮动布局，并以案列进行详细说明。

一、CSS 盒子模型

CSS 将所有元素都当成盒子，CSS布局其实就是如何堆放盒子。

组成: content(内容)—>padding(内边距)—>border(边框)—>margin(外边距)

1、content 内容区域

设置content区域,文字添加到此区域
盒子嵌套时,若内盒子不设置大小,则自动根据外盒子调节

#box{    
        width: 200px;height: 200px;background:red;
 }

2、padding 内边距，即内容与边框距离

padding: 20px 输入一个值则为上下左右间距
padding: 20px 30px; 输入两个值则为上下,左右间距
padding: 10px 20px 30px 40px; 输入四个值则为上,右,下,左间距
此外,还能通过 padding-方向设置单边

#box{
        padding: 50px;
}

3、border 边框

边框,默认和背景色相同

#box{
       border: 20px blue solid;      
}

4、margin 外边框，即该盒子和其他区域的间距

可以为负数
可以通过margin-方向设置单边
可以设置为0 auto自适应居中
注:两个盒子的margin属性在上下方向不会累加,而是以两者间大的值为两盒子间间距
注:当盒子嵌套时,在内盒子添加margin-top属性会使外盒子也具有此margin-top属性

#box{   
     margin: 0 auto;
}

完整示例：

<style>
    #box{
        width: 100px;height: 100px;background:yellow;
        padding: 20px;
        border: 20px blue solid;
        margin: 0 auto;
        box-sizing: content-box;
    }
</style>
 <div id="box"> 盒子模型 </div>

二、CSS 标准布局

所谓的标准布局，就是按照元素在标准流中的特点进行布局，即： block( 块级元素)、inline (行内元素)、inline-block (融合行内于块级)。

块级元素独占一行
行内元素、行内块元素共享一行

1、block( 块级元素)

常见的block( 块级元素)有： div 、p、ul 、li 、h1 …h6

block特点：

独占一行，在不设置自己宽度时，块级元素默认宽度与父容器相同
支持所有样式
所占区域是矩形区域，可以改变元素的 width 、height

2、inline (行内元素)

常见的inline (行内元素) 有：span, mg, a, em, strong

inline 特点：

可以与其他行内元素共享一行，不会独占一行
不能改变元素的 width 、height ，大小由内容决定
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行
内联标签之间有间隙，由换行产生

3、inline-block (融合行内于块级)

inline-block特点：

不独占一行的块级元素
存在间隙问题，产生原因是换行引起（空白符）

如图：

去除空隙的方法：

　　对父元素添加{font-size:0}，即将字体大小设为0，那么空白符也变成0px，从而消除空隙。

　　这种方法已经可以兼容各种浏览器。

4、标签嵌套规范

块可以嵌套内联
块不一定可以嵌套块
内联不能嵌套块(< a >除外)

5、溢出操作

当一个块中内容过多,溢出块的时候,可以使用overflow 操作溢出内容

<style>
    div{
    width: 200px;
    height: 200px;
    border: 2px black solid;
    overflow: auto;              /* hidden:隐藏 scroll:出现滚动条 auto:根据情况出现滚动条*/
    }
</style>
<div>
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
    溢出操作溢出操作溢出操作溢出操作
</div>

5、在标准布局方式的优缺点：

在标准布局方式中，块级元素很难被有效利用起来，因为其独占一行的特性，所以其只能进行垂直方向的布局。
行内元素、行内块元素可以进行水平方向布局，但是它们的内容大部分只能是文本，少量的如td中支持放入其他行内块元素，但是并不适合进行通用布局。
行内元素、行内块元素之间水平方向会因为代码空格，换行产生间隙，行内块元素垂直方向存在默认的baseline对齐底部间隙，这给水平布局带来额外的麻烦，而td不存在这些问题。

其实，从本质上来看，标准布局的短板在于其水平方向上的布局只能使用行内、行内块元素，而行内、行内块元素由于各种问题，并不适用于布局，只适用于作为内容。

而块级元素并不存在行内和行内块元素的这些问题，所以如果块级元素也能用于水平方向布局，那么就完美了。

三、CSS 浮动布局

1、浮动布局定义

为了解决标准布局中，块级元素不能在水平方向布局的问题，即多个块级元素不能共享一行的问题，CSS提出了浮动的概念。

所谓浮动，即为元素设置float样式，float样式有如下值：

left 左浮动
right 右浮动
none 无浮动（元素默认浮动，无浮动）

一旦元素设置了float:left或者float:right，则元素就会脱离标准流，然后进入浮动流。所谓浮动流，我们可以理解

其为处于标准流图层之上的另一个图层。

而一旦元素脱标后，元素就会释放其在标准流中的占据的位置，这将导致标准流中脱标元素之后的元素前据。

在浮动流中，多个块级元素是可以共享一行的。

如图：

上例中，box1_{box3设置了float:left，所以它们脱标进入浮动流，并共享一行，而box1}box3脱标后，它们在标准流中的位置就会被释放，此时box4这个依旧在标准流中的元素就会进据被释放的位置。

所以上例中，box4实际上有一部分被box1~bxo3遮盖住了，因为浮动流在标准流之上。

2、浮动元素特点

浮动元素之间共享一行
浮动元素的width、height默认由元素内容决定，而不是由父级决定
浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的
标准流中的行内元素、行内块元素、块级元素加了浮动后，都会变成浮动元素，具备以上浮动元素的特性。
浮动元素的浮动范围只能在其父级元素内部（无论父级在标准流还是在浮动流），并且浮动元素不会压住父级元素的border、padding，父级元素content中的行内元素、行内块元素的内容会自动围绕浮动元素排列。
浮动元素本身就处于父级元素的content中，如果浮动元素存在兄弟元素：如果兄弟元素也是浮动元素，则前面的兄弟先浮动，后面的兄弟后浮动。
如果兄弟元素是非浮动元素，则浮动元素不会上浮压住前面的非浮动兄弟元素，而浮动元素脱标，会释放占据的标准流位置，所以浮动元素后面的非浮动兄弟会进据释放的位置，从而被浮动元素压住。

总结：浮动元素只会影响浮动元素后面的标准流，不会影响前面的标准流。

3、浮动带来的问题以及解决方案

（1）、浮动带来的问题：标准流父级容器高度会变成0

一般我们不给标准流中父级容器设定height，而是让容器height自动适配为容器内容的高度，如果此时有一个子级元素发生了浮动，则标准流中的父级容器的高度会变味0。