CSS学习笔记——盒子模型

1.盒子边框（border）

border:border-width||border-style||border-color
border-style:默认采用none， solid：实线（使用最多）；dashed：虚线； dotted：点线 double：双实线
盒子上下左右边框 border-top/bottom/left/right
表格细线边框 border-collapse:collapse; collapse：合并的意思

 div {
            font-size: 50px;
            color: skyblue;
            width: 500px;
            height: 200px;
            border: 1px solid red;
            padding:20px;
            margin: 20px auto;盒子模型居中
            text-align: center;文字居中
            background: url(images/1.jpg) no-repeat;
            background-position: 50px;
            background-size: 500px;
        }

圆角边框（CSS3）：border-radius:左上角 右上角 右下角 左下角 顺时针方向。
border-radius:10px：四个角都是10px的弧度
border-radius:10px 40px：左上角和右下角10px 右上角和左下角40px 对角线弧度相同
border-radius:10px 40px 50px：左上角10px弧度 右上角和左下角40px 右下角50px
border-radius:50%/盒子宽度的一半：圆
border-radius:50%;height:高度的一半： 椭圆

 .radius {
            width: 200px;
            height: 30px;
            border: 1px solid greenyellow;
            border-radius: 10px;
        }

2.内边距（padding）盒子边框与内容的间距

padding:20px; 上 右 下 左都是20px 顺时针
padding:20px 30px;上下20px 左右30px
padding:10px 20px 30px;上 10px 左右 20px 下 20px
padding:10px(上) 20px(左) 30px(下) 40px(右);

3.外边距（margin） 盒子与盒子之间的距离

margin取值顺序与外边框padding一致 常用的margin-top上边框距离和margin-left左边距离。
外边框margin实现盒子居中
条件：
1.盒子必须指定宽度；
2.必须是块级元素；
3.左右为auto 如margin:20px auto。

4.盒子的宽度和高度计算

外盒的高度=height+padding+border+margin
外盒的宽度=width+padding+border+margin
内盒的高度=height+padding+border
内盒的宽度=width+padding+border

5.盒子模型的稳定性

从盒子模型的稳定性考虑，我们优先使用width，然后padding， 最后margin width>padding>margin。
一般情况下，为了防止影响盒子的大小问题，我们会使用高度剩余法，宽度剩余法来做，也就是将空白的地方填充给高度或者宽度。

6.CSS3盒子模型

1.box-sizing:content-box 盒子大小等于width+padding+border W3C的标准盒子模型
2.box-sizing:border-box 盒子大小为为width 也就是说padding和border是包含在width里面的

7.盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色（rgba()） 内/外阴影（默认是外阴影outset 不用写 否则阴影效果会取消）。

div:first-child {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            font-size: 35px;
            text-align: center;
            line-height: 200px;
            color: turquoise;
            box-shadow: 3px 5px 4px 6px rgba(0, 0, 0, 0.5);
        }

8.浮动

浮动最早是用来控制图片，实现文字的环绕效果,浮动其实就是漂浮的意思，会影响到标准流。
语法： float:left/right/none。
浮动首先要创建块，然后在浮动的元素总是找最近的父元素，浮动元素不会占位置，贴着边框 就是贴着父元素的border或者padding。
两个并列的盒子排列位置：浮动的排列位置和上一级元素有关， 如果上一个盒子有浮动，那么下一个元素会和上一个元素顶部对齐 否则下一个元素的顶部会和上一个元素的底部对齐。
块级元素（盒子）/行内元素 使用浮动会具有为行内块元素的特征。
行内块元素的特征：盒子的大小由内容决定，一行可以放多个。
浮动的目的就是让块级元素在同一行显示。

.father {
        width: 300px;
        height: 300px;
        background-color: #ccc;
        border: 3px;
        padding: 2px;
    }
    .son {
        width: 120px;
        height: 120px;
        background-color: purple;
        float: right; 向右边浮动 紧靠着父级元素的边框
    }

9.清除浮动

9.1 清除浮动的原因

解决父级元素因为子级浮动引起内部高度为0的问题.

9.2 清除浮动的方法

1.添加额外标签 在浮动盒子的下方添加一个空盒子,并且添加属性 clear:both/left/right
缺点在于会给页面代码增加一些无意义的标签，页面结构化比较差。
2.在父标签添加overflow属性 overflow: hidden|auto|scroll
缺点：内容增多时，容易造成不会换行，无法显示需要溢出的元素
3.使用after伪元素清除浮动

 .clearfix::after {/*:: 与 : 都行*/
       content: "."; /*内容为点. */  content:"."  里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
       display: block; /*转换为块级元素*/
       height: 0; /*盒子高度为0*/
       visibility: hidden; /*隐藏盒子*/
       clear: both; /*清除浮动*/
   }
 .clearfix {
     *zoom: 1; /*兼容IE6 7浏览器   * 代表IE浏览器 zoom IE浏览器清除浮动的方法*/
 }

4.使用before after双伪元素清除浮动

clearfix::before, .clearfix::after {
        content: ".";
        display: table;
    }
    .clearfix::after {
        clear: both;
    }
    .clearfix {
        *zoom: 1; /*兼容IE6 7浏览器   * 代表IE浏览器 zoom IE浏览器清除浮动的方法*/
    }

10.盒子模型页面布局方式

版心（可视区）：网页主体内容所在的区域 一般在浏览器中水平居中显示 常见的宽度值960px 980px 1000px 1200px等等。
布局流程：先确定页面的版心，分析页面中的行模块 列模块 然后制作HTML结构，最后CSS初始化，利用盒子模型 DIV+CSS进行页面布局。
采用盒子模型页面布局的方式：
1. 固定宽度且居中布局型： 每个盒子的宽度相同 盒子与盒子之间的间距也可以相同 这个时候可以使用并集选择器。
2 中间列左窄右宽型：中间左窄右宽，留空隙的方法：就是右边的宽度减去空隙的宽度 然后在右边float:right。
3 通栏平均分布型：头部通栏 中间碎片分区 脚部通栏 通栏就是不设置盒子宽度。
中间分区通常采用无序列表，要注意计算li与li之间的距离，其他li与li之间的距离使用margin即可，第一个li可以设置一个id选择器 设置属性margin-left:0;防止第一个盒子左边出现空隙，同时要注意权重的计算。