css属性

边框属性

边框左侧格式：
border-left-color:green;
border-left-width:5px;
border-left-style:solid;
上述所有的属性名前缀都一样 所以可以简写为：
border-left:5px solid yellow

边框上方格式：
border-top-color:red;
border-top-width:10px;
border-top-style:dashed;
上述所有的属性名前缀都一样 所以可以简写为：
border-top:10px dashed red

边框右侧格式：
border-right-color:yellow;
border-right-width:3px;
border-right-style:dotted;
上述所有的属性名前缀都一样 所以可以简写为：
border-top:3px dotted yellow

边框下方格式：
border-bottom-color:pink;
border-bottom-width:8px;
border-bottom-style:solid;
上述所有的属性名前缀都一样 所以可以简写为：
border-bottom:8px solid pink

终极缩写形式：上下左右全部采取一样的样式：
border:5px solid black

如何画圆：
border-radius:50%

display属性(了解)

display:none
钓鱼网站
	看上去是一个与正规网站一模一样的页面(银行网站)，
	实际上却是利用display隐藏提前写好的骗子数据，
	从而实现狸猫换太子的效果。

盒子模型

margin用来调节标签与标签之间的距离
标签与标签可以彼此独立也可以嵌套
padding用来调节标签与标签内部(文本或者标签)的距离

margin-left:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
上述前缀一致 那么可以缩写成下列形式

一个参数表示上下左右：margin:10px
第一个控制上下 第二个控制左右：margin:20px 40px
第一个控制上 第二个控制左右 第三个控制下：margin:20px 30px 40px
上右下左(顺时针)：margin:10px 20px 30px 40px

浮动属性(重要)

float 
在页面布局中肯定需要用到浮动。
浮动的元素脱离文档流，相当于漂浮在空中。
浏览器针对文本是优先展示的(想法设法的展示出文本)。

浮动带来的影响

浮动的缺点：浮动会导致父标签元素"塌陷"
1.推导步骤一(不可取)
	自己再写一个div撑着
2.推导步骤二(不好理解)
	clear属性
	clear:left、right、both
3.终极结论(记住就可以)
.clearfix:after {
    content:'';
    display:block;
    clear:both
}
PS:在写css代码之前先写好上述解决浮动带来塌陷的css代码，
哪个父标签塌陷了就给哪个父标签加一个clearfix类属性即可。

溢出属性

overflow
圆形头像制作：注意图片比例
div{
	width:100px;
	height:100px;
	border:3px solid black;
    border-radius:100%;
    overflow:hidden
}
img{width:100%}

定位属性

非定位态(静态)
static
所有的标签默认都是非定位状态，无法使用定位改变位置  
相对定位：相对于标签原来的位置做定位
position:relative  
绝对定位：相对于已经定位过的父标签做定位
position:absolute  	
固定定位：相对于浏览器窗口做定位
position:fixed

是否脱离文档流

脱离文档流：可以简单的理解为原来的位置是否可以被其他标签占用
脱离文档流：
    浮动
    绝对定位
    固定定位
不脱离文档流：
    相对定位