百度前端学习日记04——盒模型

前言

本博客大部分摘自MDN网站

更具体内容请参考MDN

正文

1.什么是盒模型

如图所示就是一个盒模型

margin

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

border

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。

padding

padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

content

width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

2.盒模型的特性

举例代码

<div id="wrapper">
    <header>Header</header>
    <main>Main content</main>
    <footer>Footer</footer>
</div>

a.外边距崩塌

给<main>元素的margin-bottom赋值，比如说20px。然后给<footer> 元素的 margin-top 赋值，比如说15px。
注意，第二个操作对布局没有任何影响——这就是外边距塌陷；较小的margin有效宽度为0，只留下值较大的margin。

b.content的默认宽度

默认情况下，content的width 被设置为可用空间的100%（在margin, border, padding占据了它们的空间后剩下的空间的宽度）——如果您更改了浏览器窗口的宽度，
那么这些框将会变大或变小，以保持包含在示例输出窗口中。height默认设置为content的高度。

c.盒的总宽度

你应该注意的是框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整框模型。

box-sizing

content-box

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

border-box

width 和 height 属性包括内容，内边距和边框，但不包括外边距。

padding-box（不推荐使用）

 width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。

d.内容超出

通过设置overflow

auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
hidden: 当内容过多，溢流的内容被隐藏。
visible: 当内容过多，溢流的内容被显示在盒子的外部（这个是默认的行为）

e.背景样式

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。

如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果（查看 border-style 或 border-image），不然的话，这个属性造成的样式变化会被边框覆盖住。

border-box
背景延伸到边框外沿（但是在边框之下）。
padding-box
边框下面没有背景，即背景延伸到内边距外沿。
content-box
背景裁剪到内容区 (content-box) 外沿。

f.盒的类型

display

块级元素（ block box）是定义为堆放在其他元素上的元素（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于盒模型的应用适用于块级元素 （ block box）
行内元素（ inline box）与块元素是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
行内块级元素（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内元素（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。

 

转载于:https://www.cnblogs.com/no-wing/p/9284549.html