目录
一、CSS3新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.1 属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type = text 文本框的input 选取出来 双引号可以有可以无 */
input[type="text"] {
color: skyblue;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
/* ^表示以什么开头，和正则表达式类似 */
div[class^=icon] {
color: red;
}
/* $表示以什么结尾，和正则表达式类似 */
/* section标签与div标签类似，是html5新特性 */
section[class$=data] {
color: blue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是一样的*/
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<!-- <input type="text" name="" id="">
<input type="password" name="" id=""> -->
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html>显示结果：
1.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素
nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）：
1. n 可以是数字，关键字和公式 n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
2. n 可以是关键字：even 偶数，odd 奇数
3. n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
将child换成of-type也能达到相应的目的，但是两者有区别！
nth-child和nth-of-type两者区别：
1. nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* 上面代码含义和child类似 */
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>显示结果：
1.3. 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意：
1. before 和 after 创建一个元素，但是属于行内元素
2. 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3. 语法： element::before {}，before 和 after 必须有 content 属性
4. before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
5. 伪元素选择器和标签选择器优先级一样
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="../../font_4zomjauzwpv/iconfont.css">
<style>
/* @font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
} */
div {
width: 300px;
height: 300px;
background-color: pink;
}
div::before {
/* 伪元素显示模式是行内，不能设置宽高，其优先级和标签选择器一样 */
content: '我';
}
div::after {
content: 'sy';
}
</style>
</head>
<body>
<div>是</div>
</body>
</html>显示结果：
二、CSS浮动（float）
2.1 标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行（垂直方向）
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table等
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行（水平方向）
常用元素：span、a、i、em 等
2.2 浮动
作用：控制盒子左右浮动，知道碰到父级对象或者另外一个浮动对象
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
属性名：float
属性值：
浮动的特点：
1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果（具有行内元素相似的特点）
• 一行可以显示多个
• 可以设置宽高
➢ 注意点： • 浮动的元素不能通过text-align:center或者margin:0 auto
常见的网页布局：利用浮动来布局
2.3 清除浮动
含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因： 子元素浮动后脱标 → 不再占有原来的位置
➢ 目的： 需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：
1. 直接设置父元素高度
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块（因为后面可能会增加内容，高度写死了不利于维护，应该让元素自动撑开父级盒子大小）
2. 额外标签法
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂（不提倡）
3. 单伪元素清除法
本质：其实就是使用伪元素替代了额外标签
① ：基本写法
② ：补充写法：让伪元素不在网页中显示
优点：项目中使用，直接给标签加类即可清除浮动
4. 双伪元素清除法
优点：项目中使用，直接给标签加类即可清除浮动
5. 给父元素设置overflow : hidden
三、CSS定位（position）
1. 定位的基本介绍
1.1 网页常见布局方式
1. 标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
1. 可以让原本垂直布局的 块级元素变成水平布局
3. 定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况
2. 定位的基本使用
属性值：
偏移位置：
3. 静态定位
介绍：静态定位是默认值，就是之前认识的标准流。
➢ 代码：
➢ 注意点：
1. 静态定位就是之前标准流，不能通过方位属性进行移动（也就是top等属性无效，z-index也无效）
2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
4. 相对定位
介绍：相对于自己之前的位置（标准流时候的位置）进行移动
代码：
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
➢ 应用场景：
1. 配合绝对定位组CP（子绝父相）
2. 用于小范围的移动
5. 绝对定位
相对具有position的父级对象定位，如果父级没有position则会以body为准进行定位
代码：
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
6. 子绝父相
子绝父相的应用场景是什么？
• 让子元素相对于父元素进行自由移动
➢ 子绝父相的好处是什么？
• 父元素是相对定位，则对网页布局影响最小
特殊场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
➢ 原因：
• 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
（案例）子绝父相水平垂直都居中案例-解决方法
1. 子绝父相
2. 让子盒子往右走大盒子一半
• left：50%
3. 让子盒子往下走大盒子一半
• top：50%
4. 让子盒子往左+往上走自己的一半
• transform：translate(-50%，-50%)；
7. 固定定位
相对于浏览器进行定位移动
代码：
➢ 特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
➢ 应用场景： 让盒子固定在屏幕中的某个位置
浮动小结：
8. 元素的层级关系
不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
改变层级：z-index属性，数值越大层级越高
扫一扫
2748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
