12 CSS 盒子模型

5/23/2021 html

CSS 基础框盒模型 - CSS(层叠样式表) | MDN (opens new window)

CSS 基础框盒模型介绍 - CSS(层叠样式表) | MDN (opens new window)

盒模型 - 学习 Web 开发 | MDN (opens new window)


CSS盒子模型:规定了元素框处理元素内容( content )、内边距( padding )、边框( border ) 和外边距( margin ) 的方式。

# 外边距(margin)

外边距(margin):就是围绕在元素边框的空白区域,设置外边距会在元素外创建额外的“空白” 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

系统默认外边距为8px。

  • 属性

    margin-top : 设置上方外边距。

    margin-left : 设置左方外边距。

    margin-right : 设置右方外边距。

    margin-bottom : 设置下方外边距。

  • margin 外边距简写

    {a} : 只有一个值的时候,为 上下左右外边距都为a值。

    {a b} : 只有两个值的时候 为上下外边距为a值 左右外边距为b值。

    {a b c} : 只有三个值的时候 为上外边距为a值 左右外边距为b值 下外边距为c值。

    {a b c d} :只有四个值时候 为上外边距为a值 右外边距为b值 下外边距为c值 左外边距为d值 (口诀:顺时针,上右下左)。

.wrapper { margin-top:10px; margin-right:40px; margin-bottom:20px; margin-left:30px;  }

/* 等同于 */
.wrapper { margin: 10px 40px 20px 30px; }

# 内边距(padding)

内边距(padding):就是在边框和内容区之间设置内边距的最简单的方法就是使用 padding 属性,这个属性接受任何长度单位、百分数值。

内边距的大小,属于元素大小的一部分。(会撑大元素的大小)

  • 属性

    padding-top : 设置上方内边距。

    padding-left : 设置左方内边距。

    padding-right : 设置右方内边距。

    padding-bottom : 设置下方内边距。

  • padding 内边距简写:

    {a} : 只有一个值的时候,为 上下左右内边距都为a值。

    {a b} : 只有两个值的时候 为上下内边距为a值 左右内边距为b值。

    {a b c} : 只有三个值的时候 为上内边距为a值 左右内边距为b值 下内边距为c值。

    {a b c d} :只有四个值时候 为上内边距为a值 右内边距为b值 下内边距为c值 左内边距为d值 (口诀:顺时针,上右下左)。

.wrapper { padding-top:10px; padding-right:40px; padding-bottom:20px; padding-left:30px; }
/* 等同于 */
.wrapper { padding: 10px 40px 20px 30px; }

# 边框(border)

边框(border):就是围绕元素内容和内边距的一条或多条线,设置边框的最简单的方法就是使用border 属性,允许规定元素边框的样式、宽度和颜色。

  • 属性

    border-width : 设置边框的宽度。

    border-style : 设置边框的样式。

    border-color : 设置边框的颜色。

  • border 边框的简写:

    {width style color} 定义宽度为width,样式为style,颜色为color的边框。

.wrapper { border-width: 1px; border-style: solid; border-color: red; }
/* 等同于 */
.wrapper { border: 1px solid red; }

# 盒子的真实尺寸

盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

# display 属性

display属性: 设置元素如何显示。

  • 属性值

inline :(不独占一行,宽高由内容决定) 默认值。此元素会被显示为内联元素,元素前后没有换行符,内联元素所占具的空间就是他的标签所定义的大小(不能设置width和height)。

inline-block :(不独占一行,但能识别宽高) 设置元素为行内块状元素,所有的块级元素开始于新的一行,延展到其容器的宽度(能设置width和height)。

none : 设置元素不显示不占空间,元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样,也就是说它所占据的空间被折叠了。

block : (独占一行,能识别宽高)设置元素为块状元素(能设置width和height)。

示例:

.hide { display: none; }
.show { display: block; }
更新时间: Friday, May 28, 2021 21:04