前言
本周学习了浮动、定位、伪类、伪元素相关内容，也练习了很多案例，这篇文章记录了我学习的内容。
一、浮动
1.浮动
1.1 传统网页布局的三种方式
网页布局的本质—用CSS来摆放盒子
三种布局方式
- 普通流（标准流）
- 浮动
- 定位
1.2 标准流
标准流是最基本的网页布局方式，就是将各元素按规定好的默认方式排序
- 块级元素独占一行，从上到下按顺序排序
- 行内元素从左到右按顺序排序，若碰到父级元素边缘则自动换行
1.3 为什么要浮动
- 为什么： 因为很多网页布局的效果用标准流很难实现，用浮动可以改变元素标签的排列方式
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
1.4 什么是浮动
- 浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距
- 浮动由float属性定义，其属性值有none , left , right . 如下给一个div盒子设置浮动属性
div {
float: left; //属性值还可以为none/right
}
1.5 浮动的特性
- 浮动元素会脱离标准流（脱标），脱标后的盒子不再保留原来的位置
- 浮动的元素会在一行内显示，并且元素顶部对齐，若元素接触边缘则换行继续显示
- 浮动的元素会具有行内块元素的一些特性，任何的元素都可以加浮动属性
1.6 浮动元素经常和标准流的父级搭配使用
为了约束元素的位置，网页一般会先用标准流的父级元素排列上下位置，之后内部的子元素采取浮动来排列左右的位置。
1.7 浮动练习
1.做一个大盒子里面四个小盒子排成一行，每个小盒子中间有空隙
如图：
代码如下：
<head>
<title>浮动布局练习</title>
<style>
* {
padding: 0;
margin: 0;
}
.box{
width: 980px;
height: 300px;
margin: 100px auto;
list-style: none;
background-color: pink;
text-align: center;
}
.box li {
width: 233px;
height: 300px;
float: left;
margin-right: 16px;
background-color: skyblue;
}
.box .four {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="four">4</li>
</ul>
</body>
</html>
2. 常见的网页布局
2.1 常见的网页布局形式
盒子并盒子，盒子套盒子
- 国字型
- 匡字型
- 三字型
- 川字型
- 海报型
- 等等…
2.2 浮动布局的注意点
- 浮动和标准流的父元素盒子搭配
- 一个元素浮动了，理论上其他兄弟元素也应该浮动
- 浮动的盒子只会影响浮动盒子后面的标准流盒子，它前面的标准流不会影响
- 理想中，父盒子应该不给高度，让里面添加的子元素去撑开父元素
3.清除浮动
3.1 为什么要清除浮动
由于父元素在很多情况下不方便给出固定高度，想用子元素来撑开父元素盒子，但是子元素设置浮动后不会占有位置，父元素盒子高度为零，会对后面的标准流盒子产生影响，影响整个网页的排版。
3.2 清除浮动的本质
本质： 清除浮动元素造成的影响
- 若父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度之后，就不会对后面的标准流造成影响
3.3 清除浮动的方法
语法：
选择器 { clear: 属性值；}
//属性值： left right both（实际使用时both最常用）
清除浮动的策略：闭合浮动
清除浮动的方法：
1. 额外标签法（不常用）
在浮动元素的末尾添加一个空的标签，给这个空的标签添加清除浮动样式
优点：方便
缺点：添加了很多没有用的标签，代码结构化比较差
<html>
<head>
<style>
.box div {
float: left;
}
.text {
clear: both; //给这个标签添加清除浮动样式
}
</style>
</head>
<body>
<div class="box">
<div>这是一个浮动的盒子</div>
<div>这也是一个浮动的盒子</div>
<div class="text"></div> /*添加了一个空的<div>标签
这个空的标签必须是块级元素，不可以是行内元素*/
</div>
</body>
</html>
2. 父级添加overflow属性
给浮动盒子的父级元素添加
overflow: hidden(最常用)/ auto / scroll ;
优点：代码简洁
缺点：无法显示溢出部分
3. after伪元素法
给浮动元素的父盒子添加如下类：
.clearfix:after {
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
4. 双伪元素清除浮动
给浮动元素的父盒子添加如下类：
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
二、定位
1. 为什么要定位
定位：将盒子固定在某一位置
作用：可以让盒子自由的在某个盒子内移动或者固定在屏幕中的某个位置，并且可以压住其他盒子。
2. 定位的组成
定位=定位模式 + 边偏移
定位模式 由position属性定义属性值有 static（静态定位） relative（相对定位 absolute（绝对定位） fixed （固定定位）
边偏移 由top bottom left right 属性定义
3. 静态定位 static（只了解 不常用）
静态定位是定位的默认方式，即无定位，静态定位的盒子按照标准流特性摆放，没有边偏移
语法：
选择器 { position: static;}
4. 相对定位 relative
元素在移动位置时，是相对于他原来的位置来说的
特点：
- 盒子移动位置时是参照自己原来的位置而言的
- 原来在标准流的位置仍然保留（不脱标），后面的盒子仍然以标准流来对待它
语法：
选择器 { position: relative;}
5. 绝对定位 absolute
在元素定位时，是相对于他的祖先元素来说的
特点：
- 若没有祖先元素，或者祖先元素没有定位时，则以浏览器为标准进行定位
- 如果祖先元素有定位（相对定位，绝对定位，固定定位），则以最近一级的有定位的祖先元素为参考点来移动位置
- 绝对定位不再占有原来的位置
语法：
选择器 { position: absolute;}
6. 子绝父相
子级是绝对定位的话，父级要用相对定位
原因：
- 当子元素为绝对定位时，不会占有位置，可以放到父盒子的任何地方，并且不会影响其他的兄弟盒子（脱标了）
- 父盒子需要加一个定位来限制子盒子在父盒子内显示，不要跑到父盒子外面去
- 父盒子在布局时，要占有位置，不能影响后面盒子的布局，所以选择相对定位
- 子绝父相也不是绝对的
7. 固定定位 fixed
元素固定在浏览器的可是区域，页面在滚动时元素的位置不变
特点：
- 以浏览器的可视窗口为参照点来移动元素，和父元素没有任何关系，不随滚动条的滚动而移动
- 固定定位不再占有原先的位置（脱标了）
语法：
选择器 { position: fixed; }
8. 粘性定位
当盒子在浏览器中时，滚动页面，盒子会随之而滚动，当盒子移动到浏览器边缘（top left right bottom 自己定义) 一定距离（自己定义）的时候，盒子不再移动（这种效果也可以通过其他属性来实现，一般不常用）
特点：
- 一浏览器窗口为参照点移动元素
- 盒子占有原先位置
- 必须加 top left right bottom 其中一个元素才有效
选择器 {
position: sticky;
top: 10px;
}
9. 定位的叠放顺序
用定位来布局的时候，可能会出现盒子重叠的情况，可以使用 z-index 来控制盒子的前后次序
选择器 { z-index: 1;}
注意：
- 数值可以为正整数、负数或0，默认数值为auto，数值越大，盒子越靠前（也就是重叠在数值小的盒子之上）
- 若属性值相同，则按书写顺序，后来者居上
- 数字不加单位
- 只有定位的盒子才有 z-index 属性
10.定位拓展
10.1绝对定位的盒子居中
加了定位的盒子就不能用 margin: 0 auto; 来使盒子水平居中
要使加了定位的盒子水品居中，方法如下
选择器 { left: 50%；
margin-left: -(盒子宽的一半）；
}
垂直居中
选择器 { top: 50%；
margin-top: -(盒子高的一半）；
}
10.2定位的特殊性
- 行内元素加了绝对定位或固定定位，可以直接设置高度和宽度
- 块级元素加了绝对定位或固定定位，如果不给宽度或高度，则默认大小为内容的大小
10.3绝对定位（固定定位）会完全压住盒子
- 给盒子设定了浮动属性，浮动的盒子会压住下面标准流的盒子，但是不会压住标准流盒子里面的文字或图片，可以用来实现文字环绕效果
- 绝对（固定）定位会完全压住下面标准流的所有内容
三、伪类
1.什么是伪类
伪类存在的意义是为了通过选择器找到那些不存在与 DOM 树中的信息以及不能被常规 CSS 选择器获取到的信息。
例如，它可以用于：设置鼠标悬停在元素上时的样式，为已访问和未访问链接设置不同的样式，设置元素获得焦点时的样式，或修饰一句话中的第一个字母 等等
2.伪类的分类
2.1 状态伪类
在与用户交互的过程中元素的状态是动态变化的，元素会根据所处的状态，呈现不同的样式
常见的状态伪类主要包括：
- :link 应用于未被访问过的链接
- :hover 应用于鼠标悬停到的元素
- :active 应用于被激活的元素
- :visited 应用于被访问过的链接，与:link互斥
- :focus 应用于拥有键盘输入焦点的元素
以下为一个链接，当鼠标未点击、经过、点击时、点击后 都会出现不同的样式
<html>
<head>
<style>
.box {
background-color: pink;
height: 150px;
width: 200px;
margin: 100px auto;
font: 500 20px "Microsoft Yahei";
text-align: center;
line-height:150px;
}
a:link {
color: black;
}
a:visited {
color: grey;
}
.box:hover {
background-color: green;}
a:hover {
color: blue;
font-size:23px;
font-weight: 600;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div class="box">
<a href="#" target="">这是一个链接</a>
</div>
</body>
</html>
2.2 结构伪类
是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
一些结构伪类：
- :first-child 选择某个元素的第一个子元素
- :last-child 选择某个元素的最后一个子元素
- :lang 伪类允许为不同的语言定义特殊的规则
- :nth-child() 选择某个元素的一个或多个特定的子元素；
- :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type() 选择指定的元素；
- :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
- :first-of-type 选择一个上级元素下的第一个同类子元素；
- :last-of-type 选择一个上级元素的最后一个同类子元素；
四、伪元素
1.什么是伪元素
用于设置元素指定部分的样式，比如，它可用于设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容等等
2.伪元素
- ::after 在元素内容的最后面添加新内容。
- ::before 在元素内容的最前面添加新内容。
- ::first-line 选择元素文本的第一行。
- ::first-letter 选择元素文本的第一个字（母）。
- ::selection匹配用户被用户选中或者处于高亮状态的部分
下面选中<p>中的第一个字，并改变其样式：
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font: 700 50px "Microsoft Yahei";
}
</style>
</head>
<body>
<p>今天是个好日子，心想的事儿都能成</p>
</body>
</html>
总结
第四周学习的内容就到这里，学习了浮动和定位之后，对页面的布局更加明了，会有序的安排盒子的位置，学了伪类伪元素之后，学会了很多新奇的样式，日后还是要多加练习，多应用才能更好的记忆。
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
