首先列一下最近使用的一些全局样式.
html, body {
margin: auto;
}
ul, li {
display: block;
margin: auto;
padding: 0;
}
div, ul, li, dt, dd, ::before, ::after {
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
/* div, ::before, ::after {
border-style: solid;
border-width: 0;
} */
/* ::before, ::after {
display: inline-block;
} */
.i {
display: inline-block;
}
.p {
position: relative;
}
.a {
position: absolute;
}
.d {
display: block;
}
.e {
margin: auto;
}
.f {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: auto;
}
.g {
display: grid;
}
.t {
text-align: center;
}
image { width: 100%; }
一般的资料都会介绍, css的盒模型由里到外包括：content, padding, border, margin4部分, 这样好像四个部分同等重要, 不利于理解, 记忆和使用. 从实际使用场景出发, 我理解盒模型的中心是content, padding和border可以看成是内容的装饰部分, 而margin是负责布局, 是在盒模型的外部. 盒模型的价值在于构建和理解页面布局. 所以在布局阶段, 只要关注width, height, margin(包括min, max系列属性)三个属性就够了. padding和border是装饰用的, 通常不要作为布局属性使用, 这样写页面布局的时候, 思路可以更加专注和清晰.(不用考虑该用padding还是margin, 也不用关心box-sizing) 当然, 总会遇到例外的情况, 可以有一些特殊处理, 到时候注意一些边界情况, 如: border-width不支持百分比值, box-sizing的默认值是content-box, js点击区域覆盖到border-box.
当然, 按照一般的思路, 还需要关注inline盒和block盒. 不过按照目前前端的实际工作场景, 需要通过inine属性构建布局的场景也越来越少, 本身inline盒模型由于历史的原因也过于复杂, 为了简化, 这里只关注block盒, 甚至多数场景下, 只关注flex盒就足够布局页面了. flex可以看作是增强了布局能力的block. 外部特性是一样的, 都是独占一行且自动填充所在区域. 只是对于内部元素的管理方式不同.
首先, 布局属性的默认值是auto. 也就是说, 在一个空页面上创建一个空的div标签, 其默认width和height都是auto, 但是表现不一样. block元素的width: auto会自动填充父容器, 也就是说, 即使空标签没有内容, 也会产生类似width: 100%的效果, 而height的auto是根据内容的高度决定, 所以内部没有内容的时候, 高度auto的计算值为0. 而margin的默认值不是auto, 我通常会把常用元素的margin值设置为auto, 和width height统一. 当然这样会产生block元素自动居中的效果, 如果有左对齐的需求就需要重新设置margin, 我个人遇到的场景是居中对齐的情况更多, 不过根据不同的设计风格, 也不是固定的, 可以根据自己的情况设置.
然后, 当设置width和height的时候, 会产生一个固定宽高的方框. 如果没有设置margin: auto, 会从父元素的左边界开始排列, 而margin: auto会使其在父元素中居中. 如果width或height超过了父元素, 会按照overflow的默认值visiable正常显示子元素, 也可以设置为hidden不显示超出部分, 或者scroll显示滚动条.
最后, margin用于设置元素之间的间距. 可以在left right top bottom四个方向设置margin. 左右方向的margin可以自动分配剩余宽度, 实现水平居中或者右对齐等效果. 垂直方向的margin默认没有这种能力, 但是会有合并的特性. 也就是相邻元素的margin会重叠, 子元素的margin有可能跑到父元素上, 如果不想要这种特性, 可以通过display: flex等属性建立BFC, 消除margin合并. 通过writing-mode属性更改页面排版方向可以让水平和垂直方向的特性表现互换, 不过这属于比较小众的应用场景.
页面布局的基本思路就是设置盒子的大小和位置, 通过block元素的width height 和 margin可以建立简单的上下排列的布局, 如果需要在一行显示多个块并且控制水平位置和间距, 就需要其他技术. 按照目前的发展方向, 使用flex和inline-flex是主流技术. 接下来我们也会重点介绍这种方式.