CSS盒子模型

最新推荐文章于 2024-08-24 13:47:49 发布

Too crazy

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量872

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_76838876/article/details/139595907

版权

一、网页布局过程

1.准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子的样式，然后摆放到相应的位置
3.往盒子里面装内容
核心本质：就是利用CSS摆盒子

二、盒子模型（Box Model）组成

border边框
content 内容
padding 内边框
margin 外边距

1.边框有三部分组成：

边框宽度（粗细）：border-width 单位是px
边框的样式：border-style
实线边框：solid
虚线边框：dashed
点线边框：dotted
边框颜色：border-color

CSS边框属性允许你指定一个元素边框的样式和颜色

2.边框简写语法：

border：1px solid red; 没有顺序
边框分开写法：

border-top：
border-bottom：

3.表格的细线边框

border-collapse控制相邻单元格的边框
基本语法：
border-collapse：collapse；
collapse 合并的意思

边框会影响盒子的实际大小
解决方案：

1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框的宽度

4.内边距（padding）

即边框与内容之间的距离

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距

padding简写（重要）：

padding：5px；一个值代表上下左右都是5像素内边距
padding：5px 10px 两个值代表上下内边距是5像素左右内边距是10像素
padding：5px 10px 20px 三个值代表上内边距5像素左右内边距10像素下内边距20像素
padding：5px 10px 20px 30px 四个值上是5像素右10像素下20像素左是30像素

5.外边距（margin）

控制盒子和盒子之间的距离

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距

margin简写方式代表的意思和padding完全一致

外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定了宽度（width）；
2.盒子左右的外边距都设置为auto；

常见的写法：
1.margin-left:auto;

2.margin-right:auto;
3.margin:auto;
4.margin: 0 auto;

注意：行内元素或行内块元素水平居中给其父元素添加text-align：center即可

6.嵌套块元素垂直外边距的塌陷

解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow：hidden；

7.清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距
基本语法：
* {
padding：0；清除内边距
margin：0；清除外边距
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距但是转换为块级和行内块元素就可以了

去掉li前面的小圆点
基本语法：
list-style：none；

8.圆角边框

基本语法：
border-radius：length；
参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形，设置为高度的一半就可以
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border=bottom-right-radius、border-bottom-left-radius;