4.5 显示模式
标签（元素）的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
-
块级元素
- 独占一行
- 宽度默认是父级的
100% - 添加宽高属性生效
-
行内元素
- 一行可以显示多个
- 设置宽度属性不生效
- 宽高尺寸由内容撑开
-
行内块元素
- 一行可以显示多个
- 设置宽度属性生效
- 宽高尺寸也可以由内容撑开（默认）
转换显示模式
属性名：display
属性值：
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
<style>
div
{
display:inline;
}
span
{
display:inline-block;
}
img
{
display:block;
}
</style>
4.6 结构伪类选择器
作用：根据元素的结构元素查找元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素（第一个元素N值为1） |
<style>
li:first-child
{
background-color:green;
}
li:last-child
{
background-color:red;
}
li:nth-child(2)
{
background-color:orange;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
：nth-child(公式)
作用：根据元素的结构关系查找多个元素
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1;2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第5个以后的标签 | n+5 |
| 找到第5个以前的标签 | -n+5 |
n即从0开始
4.7 伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
E::before | 在E元素里面最前面添加一个伪元素 |
E::after | 在E元素里面最后面添加一个伪元素 |
- 必须设置
content:""属性，用来设置伪元素的内容，如果没有内容，则引号留空即可 - 伪元素默认是行内显示模式
- 权重和标签选择器相同
<style>
div
{
width:300px;
height:300px;
background-color:pink;
}
/* 默认是行内模式 */
div::before
{
content:"老鼠";
width:100px;
height:100px;
background-color:brown;
display:block;
}
div::after
{
content:"大米";
width:100px;
height:100px;
background-color:orange;
display:inline-block;
}
</style>
<body>
<div>
爱
</div>
</body>
4.8 盒子模型
作用：布局网页，摆放盒子和内容
盒子模型重要组成部分：
- 内容区域—
weight&height - 内边距—
padding（出现在内容与盒子边缘之间） - 边框线—
border - 外边距—
margin（出现在盒子外面）
<style>
div
{
width:200px;
height:200px;
background-color:pink;
padding:20px;
border:1px solid #000;
margin:50px;
}
</style>
<body>
<div>
div标签
</div>
</body>
边框线
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
常用线条样式
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
设置单方向边框线
属性名：border-方位名词（bd+方位名词首字母，如bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
<style>
div
{
border-top:1px solid red;
border-right:2px dashed green;
border-bottom:3px dotted blue;
border-left:4px solid orange;
width:200px;
height:200px;
background-color:pink'
}
</style>
<body>
<div>
div标签
</div>
</body>
内边距
作用：设置内容和盒子边缘之间的距离
属性名：padding /padding-方位名词
多值写法
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding:10px; | 四个方向内边距均为10px |
| 两个值 | padding:10px 80px; | 上下：10px 左右：80px |
| 三个值 | padding:10px 40px 80px; | 上：10px 左右：40px 下：80px |
| 四个值 | padding:10px 20px 40px 80px; | 上：10px 右：20px 下：40px 左：80px |
外边距
作用：拉开两个盒子之间的距离
属性名：margin
与padding属性值写法、含义相同，且外边距不会撑大盒子
版心居中
margin: 0 auto
盒子必须具有宽度属性才能实现版心居中效果
合并现象
垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
<style>
.one
{
margin-bottom:50px;
}
.two
{
margin-top:20px;
}
</style>
<body>
<div class="one">
one
</div>
<div class="two">
two
</div>
</body>
塌陷问题
父子级的标签，子级的添加上外边距会产生塌陷问题—导致父级一起向下移动
<style>
.father
{
width:300px;
height:300px;
background-color:pink;
/* 父级设置padding */
/* padding-top:50px; */
/* box-sizing:border-box; */
/* 溢出隐藏 */
/* overflow:hidden; */
/* 父级设置border-top */
/* border-top:1px solid #000; */
}
.son
{
margin-top:50px;
width:100px;
height:100px;
background-color:orange;
}
</style>
<body>
<div class="father">
父级标签
</div>
<div class="son">
子级标签
</div>
</body>
解决办法
- 取消子级
margin，父级设置padding - 父级设置
overflow:hidden - 父级设置
border-top
尺寸计算
默认情况
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
给盒子加border/padding会撑大盒子
解决
- 手动做减法：减掉
border/padding的尺寸 - 内减模式：
box-sizing:border-box
<style>
div
{
width:200px;
height:200px;
/* 手动做减法 */
/* width:160px; */
/* height:160px; */
background-color:pink;
padding:20px;
/* 内减模式 */
box-sizing:border-box;
}
</style>
<body>
<div>
div标签
</div>
</body>
清除默认样式
清除标签默认的样式，比如：默认的内外边距
<style>
/* 京东写法 */
*
{
margin:0;
padding:0;
box-sizing:border-box;
}
/* 清除列表的项目符号 */
li
{
list-style:none;
}
</style>
元素溢出
作用：控制溢出元素的内容的显示方式
属性名：overflow
属性值
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
<style>
div
{
width:200px;
height:200px;
background-color:pink;
overflow:hidden;
overflow:scroll;
overflow:auto;
}
</style>
<body>
<div>
文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试
</div>
</body>
行内元素-内外边距问题
行内元素添加margin和padding，无法改变元素垂直位置
给行内元素添加line-height即可改变垂直问题
<style>
span
{
/* 这两种属性无法改变垂直位置 */
margin:50px;
padding:20px;
/* 行高属性可以改变垂直位置 */
line-height:100px;
}
</style>
圆角效果
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字+px/百分比
属性值即是圆角半径
<style>
div
{
margin:50px auto;
width:200px;
height:200px;
background-color:orange;
border-radius:20px;
}
</style>
<body>
<div>
测试
</div>
</body>
圆角效果同样具有多值写法，其多值写法与padding相同，只不过是从左上角开始赋值
常见应用
-
正圆形状
给正方形盒子设置圆角属性值为宽高的一半/50%
<style> img { width:200px; height:200px; border-radius:100px; border-radius:50%; /* 大于50%时效果不会产生其他变化 */ } </style> -
胶囊形状
给长方形盒子设置圆角属性值为盒子高度的一半
<style> div { width:200px; height:80px; bakcground-color:orange; background-radius:40px; } </style>
阴影（拓展）
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
- X轴偏移量和Y轴偏移量必须书写
- 默认是外阴影，内阴影需要添加
inset
<style>
div
{
margin:50px auto;
width:200px;
height:80px;
backgroud-color:orange;
box-shadow:2px 5px 10px 1px rgba(0,0,0,0.5);
}
</style>
