前言
本周学习了浮动、定位、伪类、伪元素相关内容,也练习了很多案例,这篇文章记录了我学习的内容。
一、浮动
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>
总结
第四周学习的内容就到这里,学习了浮动和定位之后,对页面的布局更加明了,会有序的安排盒子的位置,学了伪类伪元素之后,学会了很多新奇的样式,日后还是要多加练习,多应用才能更好的记忆。