【前端】-015-页面制作-CSS-盒模型

什么是盒模型

【前端】-015-页面制作-CSS-盒模型_第1张图片
**Box Model**

CSS Box Model is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

  • 盒模型描述了一个元素所占用的空间,CSS中所有的元素通过矩形框来描述;
  • 通过对盒子的属性进行判断,从而渲染效果。

盒模型的属性

  1. 元素的宽度
  • width: | | auto | inherit
  • 默认情况下,元素的宽度是父元素的宽度
  1. 元素的高度
  • height: | | auto | inherit
  • 默认情况下,元素的高度是内容高度
  1. 填充
  • padding: [ | ] {1, 4} | inherit
  • padding是,元素的内容和边框之间的空间。
  • 省略的规则是,对面相同省略,四个相通,只写一个参数;

The padding area is the space between the content of the element and its border.

  1. 元素的边框
  • border: border-width | border-style | border-color
  • border-width: [ | ... ] {1, 4}
  • border-style: [solid | dashed | dotted ...] {1, 4}
  • border-color: [ | transparent ] {1, 4},默认字体颜色
  1. 元素之间的间距
  • margin: [ | | auto ] {1, 4} | inherit
  • 默认情况下为auto,浏览器自动分配,
  • 相邻元素的margin会合并src,取最大值

补充知识

  1. 块状元素(block)
  • 单独一行开始,并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置;默认情况下和父元素的宽度一致
  • 常用的块级标签:

    ...

      • 通过display: block将某一个元素标签设置为块级元素
        1. 内联元素,行内元素(inline)
        1. 内联块状元素(inline-block)
        • 在内联元素的基础上增加块状元素的特点,即和其他元素都在一行上,元素的宽度和高度以及边距可设置
        • 通过display: inline-block设置

        你可能感兴趣的:(【前端】-015-页面制作-CSS-盒模型)