极致CSS(6)-盒模型

首先列一下最近使用的一些全局样式.

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是主流技术. 接下来我们也会重点介绍这种方式.

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容