盒子模型(Box Model)组成
概念: CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括:边框、外边距、内边距、和实际内容
外边距
边距声明顺序:上、右、下、左
居中
margin:0 auto;
外边距可以让块级盒子水平居中，但是必须满足两个条件:
- 盒子必须指定了宽度
width - 盒子左右的外边距都设置为
auto
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
边距负值
h2 {
border: solid 2px green;
margin-left: -50px;
margin-right: -50px;
text-align: center;
}
设置负边距后会溢出容器
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。 主要有两种情况:
-
相邻块元素垂直外边距的合并，合并后外边距和较大的相同
解决方案:
尽量只给一个盒子添加 margin 值 -
嵌套块元素垂直外边距的塌陷
另一种情况是单独为子元素设置上边距，父盒子被带下来
解决方案:
1 可以为父元素定义上边框。
2 可以为父元素定义上内边距。
3 可以为父元素添加 overflow:hidden(常用)
4 子元素margin-top改为padding-top(常用)
内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离
padding:top right bottem left;
给盒子指定padding值之后，发生了 2 件事情:
- 内容和边框有了距离，添加了内边距。
- padding影响了盒子实际大小。 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决:如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可
注意：如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小
box-sizing
| 值 | 描述 |
|---|---|
| content-box | 元素width和height是内容大小，不包括内边距和边框 |
| border-box | 元素width和height包括内边距和边框 |
| inherit | 从父元素继承 box-sizing 属性的值 |
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
边框(border)
border可以设置元素的边框，边框对块元素和行内元素都起作用。
border: 边框颜色 边框样式 边框宽度
div{
border : border-width border-style border-color;
}
示例:
h2 {
border-top-style: double;
border-width: 8px;
border-top-color: red;
}
圆角边框
div{
border-radius: length;
border-top-left-radius: length;
}
length可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
行内元素绘制圆角
em {
border-radius: 50%;
border-bottom: solid 2px red;
}
边框样式
border-style:none;
| 类型 | 描述 |
|---|---|
| none | 定义无边框 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线。双线的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值 |
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法:
border-collapse: collapse;
表示相邻边框合并在一起。边框会影响盒子实际大小
轮廓线
outline: 颜色 样式 大小
div {
outline: red solid 2px;
}
元素在获取焦点时产生，并且轮廓线不占用空间。可以使用伪类:focus定义样式
- 轮廓线显示在边框外面
- 轮廓线不影响页面布局
线条样式
outline-style: double;
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓 |
| dotted | 定义点状的轮廓 |
| dashed | 定义虚线轮廓 |
| solid | 定义实线轮廓 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值 |
线条宽度
outline-width: 10px;
去除input获取焦点后的轮廓线
input:focus {
outline: none;
}
display
display 控制元素的显示机制。display可以将行内元素转化为块级元素或行内块元素，或相反
| 选项 | 说明 |
|---|---|
| none | 隐藏元素 |
| block | 显示为块元素 |
| inline | 显示为行元素，不能设置宽/高 |
| inline-block | 行级块元素，允许设置宽/高 |
visibility
控制元素的显示隐藏，在隐藏后空间位也保留。
div {
visibility: hidden;
}
| 选项 | 说明 |
|---|---|
| hidden | 隐藏 |
| visible | 可见，默认 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，用在普通元素和hidden一致 |
| inherit | 和父元素一致 |
溢出控制
overflow:hidden;
| 选项 | 说明 |
|---|---|
| hidden | 溢出内容隐藏 |
| scroll | 显示滚动条（有些浏览器会一直显示，有些在滚动时显示） |
| auto | 根据内容自动处理滚动条 |
尺寸定义
可以使用多种方式为元素设置宽、高尺寸
height和width可以设置以下值：
| 选项 | 说明 |
|---|---|
| width | 宽度 |
| height | 高度 |
| min-width | 最小宽度 |
| min-height | 最小高度 |
| max-width | 最大宽度 |
| max-height | 最大高度 |
| fill-available | 撑满可用的空间 |
| fit-content | 根据内容适应尺寸 |
响应式图片
img {
max-width: 90%;
min-width: 50%;
}
图片最大宽度不超过容器宽度90%，最小不低于容器的50%
fill-available
在chrome 浏览器中使用前缀-webkit-书写样式
span {
background: #e67e22;
display: inline-block;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
上面是行块元素可以撑满可用空间
fit-content
根据内容自动适应宽度，让元素居中显示的效果
baidu
div {
background: #e67e22;
width: fit-content;
margin: auto;
}
div元素不再独占一行，而是根据内容设置宽度，从而可以使用margin: auto;实现居中
max-content
容器尺寸按子元素最大宽度设置，子元素最大宽度是多少，容器宽度就是多少
www.baidu.com
baidu
main {
width: max-content;
margin: auto;
}
div {
margin-bottom: 20px;
background: #f1c40f;
word-break: break-all;
padding: 10px;
}
min-content
容器尺寸按子元素最小宽度设置，子元素最小宽度是多少，容器宽度就是多少
main {
/* 宽度为子元素最小宽度 */
width: min-content;
/* 居中 */
margin: auto;
}
div {
margin-bottom: 20px;
background: #f1c40f;
word-break: break-all;
padding: 10px;
}
div:nth-child(1) {
width: 100px;
}
baidu
ali
子元素宽度最大为width: 100px;，父元素同样为100px
盒子阴影
用 box-shadow 属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow必须，水平阴影的位置，允许负值
- v-shadow必须，垂直阴影的位置，允许负值
- blur 可选，模糊距离
- spread 可选，阴影尺寸
- color 可选，阴影颜色
- inset可选，将外部阴影改为内部
注意:盒子阴影不占用空间，不会影响其他盒子排列
box-shadow可以同时设置多个值:
可以设置任意多个阴影，每个阴影互不干扰。