盒模型

盒模型

盒模型

盒模型基础属性

浏览器默认样式

浏览器对某些元素设置有默认样式,如 h1, ul, li 等。

/* user agent stylesheet 即浏览器默认样式 */
h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

常见处理方式

* {
  margin: 0;
  padding: 0;
}

margin

水平居中

对于固定宽度的块级元素,设置 margin-left: auto, margin-right: auto即可实现水平居中

<div class="container">
  ...
</div>

.container {
  width: 960px; /* max-width: 960px; */
  margin: auto;
}

外边距合并

正常流(Normal Flow)下,外边距会进行合并。

  1. 相邻元素边距合并
<h1>好好学习</h1>
<h2>天天向上</h2>

h1 { margin: 20px 0; }
h2 { margin: 30px 0; }

  1. 父子元素合并范例
  <header></header>
  <main>
    <h1>饥人谷</h1>
  </main>
  <footer></footer>

  <style>
    header, footer {
      height: 30px;
      background: blue;
    }
    main {
      background: red;
    }

  </style>

  1. 自我合并

浮动元素和绝对定位元素的外边距不会合并。

外边距为负

设置 margin-left margin-right 为负数可以增加块状元素宽度。

<div class="T"></div>

.T {
  width: 30px;
  height: 210px;
  margin: 50px auto;
  background: orange;
}

.T::after {
  content: '';
  height: 30px;
  margin: 0 -70px;
  display: block;
  background: limegreen;
}

运行结果 https://codepen.io/twhy/pen/zzrQMR

display

display 用于设置元素渲染框的类型。

  • none 不显示元素。
  • block 显示为块状元素。
  • inline 显示为行内元素。
  • inline-block 显示为行内块,创建一个 BFC。
  • table-cell 显示行为与 <td> 一样。🌰 垂直居中 https://codepen.io/twhy/pen/rwejpZ
  • flex flex 布局
  • grid grid 布局
  • ...

问题 blockinlineinline-block 元素的区别是什么?

<details style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; display: block; font-size: 16px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: 0.2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><summary style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; display: block; font-size: inherit;">参考答案</summary></details>

box-sizing

box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。

box-sizing: content-box 默认值

.box {
  width: 300px;
  border: 10px;
}

渲染出来的盒子宽度为 320px

box-sizing: border-box

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

其他相关属性

outline

如果你看到被选中的 <a> <input> <button> 周围有一圈黄或蓝色的外框,就是 outline 了,可以通过设置 outline: 0outline: none 去除。

overflow

overflow 用于控制内容溢出包含它的块状元素时的显示方式。
overflow-xoverflow-y 分别用于控制水平溢出和垂直溢出。

  • visible 默认值 显示溢出的内容
  • hidden 内容被裁剪且不会出现滚动条
  • scroll 内容被裁剪但出现滚动条
  • auto 由浏览器决定

inline-block 常见问题 🕳️

inline-block 之间空隙

🤔 inline-block 之间有空格、Tab、换行符。
💡 给父元素设置 font-size: 0,在 inline-block 元素上重新设置 font-size

inline-block 导致父元素增高若干像素

💡 给 inline-block 元素设置 vertical-align: top

.item {
  vertical-align: top;
  display: inline-block;
  ...
}

通用解决办法 不要设置 inline-block,使用 floatflex

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 大家好,我是IT修真院的学员,一位正直纯洁善良的web前端程序员 今天给大家分享一下如何理解盒模型? 1.背景介绍...
    宁静森林阅读 2,210评论 0 0
  • CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框(规范的将来版本可能允许非矩形框,不过对现在来说,框都是...
    四光年阅读 851评论 0 10
  • 偶有闲暇整理一下书柜,发现了几篇随笔,读来觉得很温馨,现录下为念。 一、砍倒大树 深冬某日,狂风夹着的沙尘铺天盖地...
    绿水人家a阅读 195评论 2 1
  • 时过境迁沧海桑田,当你已经被岁月磨去了棱角,当你变得世故圆滑不再纯真,当你成熟稳重能够撑起半边天,你是否还记得年少...
    作者童林阅读 2,668评论 18 68