CSS学习笔记3-基本视觉格式化和盒式模型

  |  

前言

不知道为什么学CSS真的提不起兴趣,但是还是得学啊


46



基本视觉格式化

基本框

CSS假定每个元素都会生成一个或多个举行框,这称为元素框。各元素框中心有一个内容区。这个内容区有可选的内边距、边框和外边距。

对不同类型的元素格式化时会存在差别。块级元素的处理不同于行内元素,而浮动元素和定位元素也分别有各自不同的表现。

包含块

每个元素都相对于其包含块摆放,包含块就是一个元素的‘布局上下文’。包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成。

块级元素

框模型

一个完整的框模型如上图所示。

其中水平格式化的七大属性分别是:

  • margin-left:左外边距
  • boder-left:左边框
  • padding-left: 左内边距
  • width:宽
  • padding-right: 右内边距
  • boder-right: 右边框
  • margin-right: 右外边距

在这个7个属性中,只有width和左右外边距可以设置为auto。其余属性必须为特定的值,或默认0。这七个属性的值的和必须等于包含块的width

如果设置width、margin-left或margin-right中的某个值为auto,剩下两个为特定的值,那么设置为auto的属性会确定所需长度,从而是元素框的宽度等于父元素的width

垂直格式化的七大属性分别是:

  • margin-top
  • border-top
  • padding-top
  • height
  • padding-bottom
  • border-bottom
  • margin-bottom

这七个属性的值必须等于元素包含块的height

文章目录
  1. 1. 基本视觉格式化
    1. 1.1. 基本框
    2. 1.2. 包含块
  2. 2. 块级元素
|