盒模型布局：怎么合理使用属性空出边距
image.png
谷歌的内核开始用webkit（苹果公司），后来重新弄了个blink
欧朋现在用谷歌的blink内核（ 其原内核渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性）
有一种颜色是透明色： background:transparent;
在开始做项目的时候，要把清空所有的默认样式的代码写在一个css文件上，然后引入各个HTML文件
1、text-align:center;和margin:0 auto;区别
text-align: center
是设置盒子中存储的文字/图片水平居中
margin:0 auto
是让盒子本身水平居中,只在水平方向有效;
所以margin:auto auto,这个是无效的
浮动流、绝对定位、固定定位流中设置该属性也无效，他们都脱离了标准流
2、清除默认边距
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
3、行高line-height
一行的高度
image.png
line-height的值为数字和值为带单位的不一样，值为数字的可以让子元素根据自己的字体大小来计算自己的倍数，带单位的则不能。
给元素设置line-height:1.5；代表该元素的行高为字体大小的1.5倍，如果·该元素的子元素没有设置行高的话，则自动继承该元素的行高计算方式（按照自身的字体来计算）给元素设置line-height:30px或者150%；代表该元素的行高为字体大小的1.5倍，如果该元素的子元素没有设置行高的话，则自动继承该元素的行高，即固定行高。
一个盒子中可以有多行内容，用line-height可以设置每一行的高度，因为每一行中的内容都是居中显示的，所以当盒子里只有一行内容是，给该盒子设置行高为盒子的高度，可以让内容垂直居中
4、在企业开发中，垂直方向的布局使用标准流，水平方向的布局使用浮动流
5、overflow:hidden的多重作用
最后的那个作用说明下：如果一个大盒子里面装有一个小盒子，如果我们必须设置大盒子的边框还想让小盒子使用margin-top属性的话（不设边框的话大盒子的也会跟着顶下来），可以使用overfolw:hidden，这样大盒子也不会被顶下来
6、绝对定位和固定定位的水平居中问题
绝对定位的元素无法使用margin：0 auto来水平居中
技巧：
left: 50%;
margin-left: 宽度的负一半;
image.png
7、a标签的伪类选择器
在企业开发中a标签的文字，背景相关的属性都写在伪类选择器中
link:未访问
visited:已访问
hover：悬停
active:长按
注意:其中hover伪类选择器在所有的标签中都可以用
8、设置透明度：
opacity：0~1
0代表完全透明
1代表完全不透明
如果需要淡化的效果，可以设置添加过渡属性（例如transition：opacity 2s）
9、实现 在一定的区域里图片无限滚动的效果
10、给盒子添加蒙版
给目的盒子（添加蒙版的盒子）的父盒子添加相应的颜色，更改目的盒子的透明度
11、图片大于父元素时的水平居中问题
当图片大于父元素（div）的宽度时，在父元素中使用text-align=center无法居中，还需要在图片中添加margin:0 -100%;（奇淫技巧）
div{
width: 400px;
height: 400px;
border:1px solid red;
text-align: center;
}
img{
margin:0 -100%;
}
12、查找选择器时，浏览器是从右至左查找的，这样效率高
div ul li p{color : red} 浏览器是先找p再找li、ul、div的
13、行高的单位也可以是em,例如line-height:2em;
14、p不能套块级元素，a标签不能套a标签
（1 ）因为a标签本身就是链接到一个地方去，如果嵌套点击链接就不知道去哪里了
