盒子模型总结

CSS盒子模型见解

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

盒子模型的组成可以分为：border content padding margin
1.border
属性有

• border-width 调整像素
• border-style 包括 常用的dashed虚线 dotted点线 solid实线
• border-color

合并写法 为border：1px solid pink 没有顺序要求

2.表格的细线边框

border-collapse 表示相邻的边框合并在一起 可以美化表格

3.内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
分为

• padding-left
• padding-right
• padding-top
• padding-bottom

_在合并写的时候 _

• padding：上 右 下 左
• padding：上下 左右
• padding：上下左右

padding会改变盒子的实际大小
处理方法与border一样 用需求像素-内边距 = 需设置的像素
如果盒子设定了指定的width 和 height 那么padding 则会撑开盒子的大小
反之 不指定 这不会影响

4.外边距(margin)
外边距可以让盒子居中 但是需要满足两个条件

1. 盒子必须指定了宽度
2. 盒子左右的外边距都设置为auto

margin 0 auto；

以上方法是让块级元素水平居中，行内元素或者块元素水平居中给其父元素添加 text-align：center即可

外边距合并
导致嵌套块元素垂直外边距的塌陷

1. 可以为父元素定义上边距
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden

5.清除内外边距

* {
    padding: 0;
    margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转化为块级和行内块元素就行了

6.圆角边框

语法

border-radius: length;

width: 200px;

height: 200px;（正方形）

时 只要 border-radius: 50%
就可以塑造一个圆
如果是一个矩形 设置为高度的一半就可以做成一个椭圆；

7.盒子阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44OuSbSS-1650344086725)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1.png?raw=true “盒子阴影”)]

8.文字阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIooTffd-1650344086727)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1.png?raw=true “文字阴影”)]