css实践

一.纯css创建一个三角形的原理
采用的是均分原理,把矩形分为4等份,这4等份其实都是边框

div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}

二.css3实现0.5px的细线
使用transform，可以对元素进行旋转、缩放、移动或倾斜

div {
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.1);
transform: scaleY(.1);
}

三.css实现三栏布局
左右固定，中间自适应
1.flex 中间flex:1
2.绝对定位
3.浮动

四.块级元素垂直居中

1.flex布局align--父元素定义display:flex，flex-direction:row，align-items:center;
2.flex布局margin--父元素定义display:flex，子元素margin:auto 0;
3.绝对定位top--父元素position不为static，子元素position: absolute;top:50%;transform: translateY(-子元素的高度)或translateY(-50%);
4.绝对定位margin auto--父元素position不为static，子元素position: absolute;top:0;bottom:0;margin:auto 0；
5.table-cell布局--父元素定义display: table-cell;vertical-align: middle;

注：display：table-cell的元素，可以代替浮动布局：
--对宽度高度敏感，响应padding属性，内容溢出时会自动撑开父元素
--对margin值无反应