html+css(一天一个问题19)

1.盒模型

content+padding+border+margin
IE盒模型
width = content + padding + border
W3C
width = content（常设置：box-size:border-box）

2.盒子垂直居中的办法

display:flex
justify-content:center
align-items:center

position:absolute
top:50%
left:50%
transform:translate(-50%,-50%)

position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin:auto

display:table-cell;
vertical-align:middle;
//垂直方向
margin:auto；
//水平方向

3.弹性布局

display:flex
flex-direction:row/column---------主轴/侧轴排布
justify-content:center------------弹性子元素主轴方向对齐方式
align-items:center------------弹性子元素侧轴方向对齐方式

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self

4.transform和animate（h5,c3新属性）

h5

语义化标签（兼容方式）
video/audio
canvas
localStorage,sessionStorage
表单控件 date,time,email,url,search,calendar

c3

box-show/text-show
border-radius/border-image
box-sizing
background-size
transition
新增选择器：属性选择器，伪类选择器，伪元素选择器

transform和animate区别
animate可以一帧一帧变化
transform和js配合更好
transform所有属性一起变化

5.清除浮动

overflow:hidden //父盒子高度塌陷

给父元素后面增加一个伪元素::after{content:’’,clear:both}

clear:both//在浮动元素后面添加一个新元素，添加属性clear:both

#####其他概念

rem和em
栅格布局(自己怎么实现栅格布局)，响应式布局，媒体查询
预编译语言less和sass
块元素，行内元素，行内块元素

博客地址