css（三大特性，圆角，阴影，浮动，清除浮动，ps基操）

css三大特性

层叠性：

1. 同一个选择器
2. 就近原则

继承性

1. 子标签会继承父标签的样式
2. （text- ，font- ，line- 这些元素开头的可以继承，以及color属性）

优先级

如果是复合选择器，需要计算权重，根据选择器进行计算

盒子模型

border： 边框 （宽度  样式  颜色）
border-collapse：合并相邻边框
padding：设置内边距 (会改变盒子的实际大小)  ：
     1个值：（上下左右）
     2个值：（上下  左右）
     3个值：（上  左右  下）
     4个值：（上 右 下 左）
margin：设置外边距
	* 外边距可以让块级盒子水平居中
    	* 必须满足指定宽度
    	* 左右外边距都设置了auto
	* 让行内元素和行内块元素水平居中，给其父元素添加text-align: center
* 嵌套块元素垂直外边距塌陷的问题：
   1. 为父元素定义上边距
   2. 为父元素定义上内边距
   3. 为父元素添加overflow：hidden
清除内外边距：
 *  {
 	margin: 0;
 	padding: 0;
 }
 行内元素尽量只设置左右内外边距，不设置上下内外边距

ps基础

圆角，阴影

圆角

border-radius: 外边框圆角
	1. 可以是数值，百分比
	2. 圆角矩形：高度的一半
	3. （左上，右上，右下，左下）

盒子阴影

box-shadow: 盒子阴影
值（水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外部阴影）

文字阴影

text-shadow: 文字阴影
值（水平阴影 垂直阴影 模糊距离 颜色）		

浮动

网页布局准则：
	多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
布局策略：
	浮动元素在父元素中使用，父元素管上下，浮动元素管左右
注意点：
	浮动元素只会影响后面的盒子	

float：浮动
    float会创建浮动框，将其移动到一边，知道碰到父标签的左边缘，右边缘或者另一个浮动框的边框	
 特性：
 	1. 脱离标准流的控制，不再保留原来的位置，其他标准流元素会挤占浮动元素的位置
 	2. 浮动元素会在一行内显示并且顶端对齐，中间无空隙，自动换行
 	3. 浮动元素具有行内块元素的特性

清除浮动

 /*清除浮动练习*/
        /*清除浮动：
            1. 为什么要清除浮动？
            答：在某些情况下父盒子的高度没有设置，而子元素设置了浮动时，父盒子由于高度为0，
                则无法装下子元素，而子元素则会跑到父元素的下方
            2. 清除浮动的本质？
            答：清除浮动之后，父盒子会根据子盒子的高度来撑开自己的高度
            策略：闭合浮动，将子元素关在父元素中
            语法：clear: both (同时清除左右两侧浮动的影响)
        */

        /*方法四：通过以下这三段伪元素清除浮动*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

        /*方法三：通过以下这两段伪元素清除浮动*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /*IE6,7专用*/
            *zoom: 1;
        }

        .box {
            /*方法2：通过在父级盒子上添加overflow来清除浮动*/
            overflow: hidden;
            border: 1px solid blue;
        }
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #00c244;
        }
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #c2a800;
        }
        .clear {
            /*清除两侧浮动*/
            clear: both;
        }
<div class="box clearfix" >
    <div class="box1">box1</div>
    <div class="box2">box1</div>
    <!--方法1：使用隔离法清除浮动
            1. 在最后一个浮动盒子后面加一个空标签
            2. 这个空标签必须是一个块级元素
    -->
    <!--<div class="clear"></div>-->
</div>