CSS盒子模型、边框、边距基础笔记

盒子模型

把HTML页面的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

组成：

content、padding、border、margin

内盒子组成：

content、padding、border

盒子边框-border

1、border-width

边框粗细

2、border-style

边框样式

属性值：

solid单实线
dashed虚线
dotted点线
double双实线

3、border-color

边框颜色

拓展

边框三角形：

宽高设为零，出现四个三角形
（不能不写，不写宽度默认100%，是浏览器的宽度）
只要一个三角形，把其他三边的颜色设为transparent

4、border-radius

圆角边框

格式：

border-radius：左上角 右上角 右下角 左下角

属性值：

像素值
百分比

内边距

padding
边框与内容之间的距离

属性值：

一个值：所有
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左

注意：

padding：20px
可以使单行文字水平垂直居中，把文字挤到中间

外边距

margin
盒子与盒子之间的距离

属性值：

一个值：所有
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左

拓展：

盒子居中（必须有宽度）
margin：0 auto；

总结：

行内元素：
对于padding来说，上下左右都可以设置，但是对于margin来说，上下的外边距不生效，水平方向可以设置

文字或文本居中和盒子居中的区别

text-align：center；

可以使文字（行内）和图片（行内块）居中

margin：0 auto；

可以使盒子（块元素）居中

清除内外边距

body：默认外边距8px
p、h1-h6、ul、li等都有默认的内外边距

外边距合并

相邻块元素垂直外边距的合并
两者中的较大者为准

外边距的塌陷

嵌套块元素垂直外边距的合并

解决方法：

给父元素设置上边框
给父元素设置溢出隐藏overflow：hidden
给父元素设置上内边距

插入图片和背景图片

1.插入图片

最常用于产品展示
用margin、padding来更改插入图片的位置

2.背景图片

一般用于小图标背景、超大背景图片
用background-position来更改背景图片的位置

CSS盒子模型大小的计算

标准（W3C）盒子模型

box-sizing：content-box（默认值）
内盒子的大小：width（content）+border+padding

IE（怪异）盒子模型

box-sizing：border-box
内盒子的大小：
width（content）

盒子阴影

box-shadow：水平距离 垂直距离 模糊距离 阴影尺寸 阴影颜色 内/外阴影

内外阴影：

默认外阴影
inset外阴影