CSS布局-浮动-Day06 学习笔记打卡
学习视频B站：黑马程序员-前端学习（第一阶段）
CSS布局
◆ 能够使用 结构伪类选择器 在HTML中选择元素
◆ 能够说出 标准流 元素的布局特点
◆ 能够说出 浮动元素 的特点
◆ 能够使用浮动完成 小米模块布局案例
◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法
结构伪类选择器
结构伪类选择器
| 选择器 | 说明 |
|---|---|
E:first-child{} | 匹配父元素第一个子元素，并且是E元素 |
E:last-child{} | 匹配父元素最后一个一个子元素，并且是E元素 |
E:nth-child(n){} | 匹配父元素第n个元素，并且是E元素 |
E:nth-last-child(n){} | 匹配父元素倒数第n个元素，并且是E元素 |
n的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前五个 | -n*5 |
| 找到从第五个往后 | n+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>
<style>
/* ** 偶数 */
/* li:nth-child(2n) { */
/* *** 奇数 */
/* li:nth-child(2n+1) { */
/* 找到前3个 */
/* li:nth-child(-n+3) { */
/* *** 4的倍数 */
li:nth-child(4n) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
</body>
</html>
（了解）nth-of-type结构伪类选择器
| 选择器 | 说明 |
|---|---|
E:nth-of-type(n){} | 只在父元素的同类型(E)子元素范围中，匹配第n个 |
区别：
: nth-child → 直接在所有孩子中数个数
: nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
伪元素
伪元素： 一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
种类：
| 伪元素 | 作用 |
|---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
<!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>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素, 宽高不生效 */
display: block;
}
.father::after {
content: '大米';
}
</style>
</head>
<body>
<!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
<!-- 找父级, 在这个父级里面创建子级标签 -->
<div class="father">爱</div>
<!-- 老鼠爱大米 -->
</body>
</html>
标准流
标准流： 又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
CSS书写顺序
特点： 浏览器执行效率更高
1.浮动 / display
2.盒子模型：margin border padding 宽度高度背景色
3.文字样式
浮动的作用
早期的作用： 图文环绕
现在的作用： 网页布局
场景： 让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动的代码
属性名： float
属性值：
| 属性名 | 效果 |
|---|---|
float :left | 左浮动 |
float :right | 右浮动 |
浮动的特点
- 浮动元素会脱离标准流（简称：脱标 ），在标准流中不占位置
相当于从地面飘到了空中 - 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
<!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>
/* 浮动的标签 顶对齐 */
/* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin-top: 50px;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
/* 因为有浮动, 不能生效 - 盒子无法水平居中 */
margin: 0 auto;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
浮动的案例
需求： 使用浮动，完成设计图中布局效果
<!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>
* {
margin: 0;
padding: 0;
}
.top {
/* 宽度高度背景色 */
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
/* CSS书写顺序: 浏览器执行效率更高
1. 浮动 / display
2. 盒子模型: margin border padding 宽度高度背景色
3. 文字样式
*/
</style>
</head>
<body>
<!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
<div class="top"></div>
<div class="header">头部</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
/* 如果父级的宽度不够, 子级会自动换行 */
/* 第四个li和第八个li右侧间距清除 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
.nav {
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
ul {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
/* 1. 浮动 / display */
/* display: inline-block; */
display: block;
/* 2. 盒子模型 */
width: 80px;
height: 50px;
/* background-color: green; */
/* 3. 文字样式 */
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.nav li a:hover {
background-color: green;
}
</style>
</head>
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
书写网页导航步骤：
- 清除默认的margin和padding
- 找到ul，去除小圆点
- 找到li标签，设置浮动让li一行中显示
- 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
方法一：给a标签设置 display : inline-block
方法二：给a标签设置 display : block
方法三：给a设置 float : left
清除浮动
清除浮动的介绍
含义： 清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
子元素浮动后脱标 → 不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法
① 直接设置父元素高度
特点：
优点： 简单粗暴，方便
缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法
**操作：**用伪元素替代了额外标签
① ：基本写法
.clearfix::after{
content:'':
display: block;
clear:both;
}
② ：补充写法
.clearfix::after{
content:'':
display: block;
clear:both;
/* 补充代码，在网页中看不到伪元素*/
height: 0;
Visibility: hidden;
}
特点：
优点： 项目中使用，直接给标签加类即可清除浮
④ 双伪元素清除法
操作：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
特点：
优点： 项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
操作：
- 直接给父元素设置 overflow : hidden
特点：
优点： 方便
（拓展补充）BFC的介绍
块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建BFC方法：
- html标签是BFC盒子
- 浮动元素是BFC盒子
- 行内块元素是BFC盒子
- overflow属性取值不为visible。如：auto、hidden…
- ……
BFC盒子常见特点：
- BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
- ……
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
