CSS 3——CSS盒子模型、width和height、overflow属性、display属性

钟意冉冉

已于 2022-03-16 11:05:33 修改

阅读量255

点赞数 2

文章标签： css 前端 p2p

于 2022-03-05 10:45:51 首次发布

本文链接：https://blog.csdn.net/ranran0306/article/details/123263609

版权

1、CSS盒子模型

也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性。

盒模型= content(element) + border+ padding+ margin

　　border:元素的边框(可能不可见)，用于将框的边缘与其他框分开;

　　margin：外边距，表示框的边缘与相邻框之间的距离，及相邻盒子的距离(可理解为，盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出);

　　padding:内边距，表示框内容和边框之间的空间(可理解为，怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料)。

2、 width和height

只定义内容的大小，不包含边框和边距

如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置

3、overflow属性

内容溢出处理 overflow

(overflow-x overflow-y)

hidden（超出部分隐藏）

scroll（出现滚动条，不论内容是否超出）

auto（浏览器自动处理，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条

visible（默认值，忽略width或height）

4、边框（border）

border-width,边框的宽度

border-color,边框的颜色

border-style,边框的样式（border-style:dotted（点状线）、solid（实线）、double（双实线）、dashed（虚线）; ）

可以分开单独设置，例：border-width:1px; border-color:#00f; border-style:solid;）

也可以使用综合属性，例：border:1px #00f solid（三个值没有先后顺序，中间用空格隔开）

5、内边距（padding）

内边距只能是空白，不能设置外观样式，颜色等，只能设置空白的宽度

例：padding：2px(四个内边距都为2px)

padding：2px 3px(上下内边距都是2px，左右内边距都是3px)

padding：2px 3px 4px(上边内边距是2px，左右内边距都是3px，下边内边距是4px)

padding：2px 3px 4px 5px(上边内边距是2px，左内边距都是3px，下边内边距是4px，左内边距是5px)

6、外边距（margin）

标签和它相邻的标签之间的空白宽度，外边距的设置是相叠加的

例：margin：2px(四个外边距都为2px)
margin：2px 3px(上下外边距都是2px，左右外边距都是3px)
margin：2px 3px 4px(上边外边距是2px，左右外边距都是3px，下边外边距是4px)
margin：2px 3px 4px 5px(上边外边距是2px，左外边距都是3px，下边外边距是4px，左外边距是5px)

注意：<body>标签的margin代表内容与浏览器边框的距离

两个行内元素的margin-right和margin-left，采用“和”

两个块元素的marign-top和margin-bottom，采用“最大值”

7、display（有需要时，可以把块元素、内联元素和行内块元素相互转化）

block “块”元素

inline “行内”元素

inline-block 行内块元素

none 隐藏