summer.px

跟随长航大佬培训的笔记哈哈哈哈

标签语义化  

aside
section
header
footer
artical
....


文本垂直居中
1）单行文本垂直居中
line-height=容器height
2)d多行文本垂直居中
display:table-cell;
vertical-align:middle;
3)left:50%;top:50%;
margin-left margin-top:自身宽度的一半
transform：translateX（自身宽度的一半） translateY（自身宽度的一半）


清楚浮动
1）让父元素与子元素都浮动起来
2）给父元素设置overflow
3)添加一个新标签，给它加clear属性
<br class="clear">
.clear{
clear:both;


4）伪元素
.clear:after{
content:" ";
display:block;
clear:both;
}
5)BFC BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
设置属性display:inline-block/table-cell；
position:absolute/fixed;
overflow:hidden;
float:不为none;


盒模型
border-sizing属性
content-box标准盒模型
border-box怪异盒子模型 盒子大小包括边 边距
inherit继承父级


display：inline内联元素不能设置宽高/inherit继承父级display
block块级原素可以设置宽高/
inline-block内联元素可以设置宽高


position
inherit继承父元素的position的值
static默认值没有定位，元素出现在正常的文档流中
relative生成相对定位的元素，相对于正常位置进行定位
fixed生成绝对定位的元素，相对于浏览器窗口进行定位
absolute生成绝对定位的元素，相对于static外的第一个父元素进行定位


圣杯布局...
双飞翼布局...