css布局的几种方式

1.属性: display
block;inline;none;inline-block;flex
特殊:
visibility: hidden; 还会占据空间
2.水平居中:
配合使用: 宽度确定,margin自动
max-width: 600px;/width: 600px;
margin: auto;
3.盒模型
传统的宽度: width + margin + padding + border
'box-sizing: border-box;'的宽度: width
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
4.position
默认: static
relative,fixed,absolute,sticky
5.float
float: left;
清除浮动
.clearfix::before,
.clearfix::after{
content: ‘’;
display: table;
clear: both;
}
6.百分比宽度布局
width: 50%;
7.媒体查询
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
8.display:inline-block 行块
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
9.column :兼容性差
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
10.flexbox弹性盒子
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
11.grid网格布局