处理内容溢出
属性名：overflow
属性值：
- visible：显示（默认）
- hidden：隐藏
- scroll：显示滚动条（不论是否溢出）
- auto：自动（溢出为滚动条，不移除则正常）
其他：
overflow-x 水平方向
overflow-y 垂直方向
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
.test01{
overflow: hidden;
}
.test02{
overflow: scroll;
}
</style>
隐藏元素
1.属性名：visibility
属性值：
- show：显示（默认）
- hidden：隐藏（占有原来位置）
2.display：none
不占有原来位置
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
.test01{
visibility: hidden;
}
.test03{
display: none;
}
</style>样式的继承
会继承的属性：
字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的属性：
边框、背景、内边距、外边距、宽高、溢出方式 等
默认样式
元素一般都有默认样式
例：body 元素：4个方向的8px 外边距
默认样式可以在浏览器开发者模式下查看
优先级：元素的默认样式 > 继承的样式
空白问题
元素之间
产生原因：行内元素，行内块元素之间换行在浏览器中显示为一个空格
解决方法：父元素设置font-size：0；再单独设置字体大小。
<style>
div{
font-size: 0;
}
span{
background-color: aqua;
font-size: 20px;
}
</style>行内块的幽灵空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的
解决方法：
- 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、 top 均可。
- 若父元素中只有一张图片，设置图片为 display:block 。
- 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size
浮动
相关属性
属性名：float
属性值：
- left : 设置左浮动
- right : 设置右浮动
- none ：不浮动（默认值）
.test01::first-letter {
font-size: 80px;
float:left;
}属性名： clear
作用：清除浮动，清除兄弟元素浮动带来的影响
属性值：
- left ：清除前面左浮动的影响
- right ：清除前面右浮动的影响
- both ：清除前面左右浮动的影响
元素浮动的特点
- 脱离文档流
- 浮动后，宽和高都由内容撑开
- 不会独占一行
- 不存在margin合并和margin塌陷问题
- 不会像行内块一样被当做文本处理（无空白问题）
元素浮动的影响
对兄弟元素：
对于前面的兄弟元素无影响
对于后面的兄弟元素，后面的兄弟元素会占据浮动元素的位置，被浮动元素覆盖
（因为浮动后文字环绕浮动元素，所有被浮动元素覆盖的兄弟元素的文字会被挤出）
对父元素：
无法撑起父元素高度，使父元素高度塌陷，但宽度不会
解决浮动带来的影响
父元素影响解决方法：
- 给父元素定义高度
- 父元素也设置浮动
- 父元素设置内容溢出处理（overflow:hidden）
兄弟元素影响解决方法：
- 给浮动元素后面的兄弟元素设置clear属性 ，以清除兄弟元素浮动带来的影响
- 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（如下）
.parent::after {
content: "";
display: block;
clear: both;
}定位
相对定位
参考点：相对于自己原来的位置
设置方法：
- 给元素添加position:relative设置相对定位
- 然后使用left 、 right 、 top 、 bottom 四个属性调整位置。
.box2{
background-color:aqua ;
position: relative;
left: 100px;
}特点：
- 不脱离文档流，不对其他元素产生任何影响
- 相对定位的元素显示层级高于普通元素，如果两个元素都进行定位，后写的元素会盖在先写的元素之上
- left 不能和 right 一起设置（left优先级高）， top 和 bottom 不能一起设置（top优先级高）。
- 相对定位的元素，也能设置浮动，也能通过 margin 调整位置。（不推荐）
绝对定位
参考点：包含块
包含块：
- 对于没有脱离文档流的元素：包含块就是父元素；
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（一般为相对定位，子绝父相）
- 如果所有祖先都 没定位，那包含块就是整个页面
设置方法：
- 给元素添加position:absolute设置绝对定位
- 然后使用left 、 right 、 top 、 bottom 四个属性调整位置
.box2{
background-color:aqua ;
position:absolute;
left: 0;
}特点：
- 脱离文档流，对兄弟元素、父元素有影响。
- left 不能和 right 一起设置（left优先级高）， top 和 bottom 不能一起设置（top优先级高）。
- 绝对定位的元素能通过 margin 调整位置。（不推荐）
- 不能设置浮动，如果设置，浮动失效
- 设置为绝对定位之后，会变成一种特殊元素——定位元素（默认宽、高都被内容所撑开，且能自由设置宽高。）
固定定位
参考点：视口
设置方法：
- 给元素添加position:fixed设置固定定位
- 然后使用left 、 right 、 top 、 bottom 四个属性调整位置
.box2 {
background-color: aqua;
position: fixed;
right: 0;
bottom: 0;
/*这不就是一刀9999999999999的牛皮癣广告吗*/
}特点：
- 脱离文档流，对兄弟元素、父元素有影响。
- left 不能和 right 一起设置（left优先级高）， top 和 bottom 不能一起设置（top优先级高）。
- 绝对定位的元素能通过 margin 调整位置。（不推荐）
- 不能设置浮动，如果设置，浮动失效
- 设置为绝对定位之后，会变成一种特殊元素——定位元素（默认宽、高都被内容所撑开，且能自由设置宽高。）
粘性定位
参考点：离它最近的一个有滚动条的祖先元素
设置方法：
- 给元素添加position:sticky设置粘性定位
- 然后使用left 、 right 、 top 、 bottom 四个属性调整位置
粘性定位语言不好描述，挂个代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
body{
height: 5000px;
}
.head{
font-size: 50px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: orange;
}
*{
font-size: 50px;
background-color: gold;;
}
.test{
background-color: aqua;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="head">
test
</div>
<div>
<div>
<div class="test">test01</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
<div>00001</div>
</div>
<div>
<div class="test">test02</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
<div>00002</div>
</div>
<div>
<div class="test">test03</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
<div>00003</div>
</div>
<div>
<div class="test">test04</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
<div>00004</div>
</div>
</div>
</body>
</html>定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果显示层级一样，后面的元素，会盖在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位元素才能设置 z-index 。
- 如果 z-index 值大的元素，没有覆盖掉 z-index 值小的元素，注意其包含块的层级。
定位的特殊应用
对于绝对定位 和 固定定位 的元素，有着特殊情况应用
1.让定位元素的宽充满包含块
- 宽度与包含块一致，给定位元素同时设置 left 和 right 为 0
- 高度与包含块一致，给定位元素同时设置top 和 bottom为 0
2. 让定位元素在包含块中居中
left:0;
right:0;
top:0;
bottom:0;
margin:auto;布局
版心
概念：在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容
宽度：960~1200px之间
可以有多个。
常有布局名词
- 顶部导航条 topbar
- 页头 header 、 page-header
- 导航 nav 、 navigator 、 navbar
- 搜索框 search 、 search-box
- 横幅、广告、宣传图 banner
- 主要内容 content 、 main
- 侧边栏 aside 、 sidebar
- 页脚 footer 、 page-footer
默认样式
常见默认样式：
- p 元素有默认的上下 margin 。
- h1~h6 标题也有上下 margin ，且字体加粗。
- body 元素有默认的 8px 外边距。
- 超链接有默认的文字颜色和下划线。
- ul 元素有默认的左 pading 。
重置默认样式：
方法一：使用全局选择器（不推荐）
方法二：自行写个reset.css文件用于选择到具有默认样式的元素，清空其默认的样式。
方法三：使用Normalize.css文件
Normalize.css：一种规范性重置默认样式文件，在清除默认样式的基础上，保留了一些有价值的默认样式。
- 官网地址：http://necolas.github.io/normalize.css/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
