一 . 标准流
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
1 . 设置元素为块级元素
display:block, 可以设置元素为块级元素, 独占一行
可以设置宽高, 不设置的话, 宽度相当于父级 100%, 高度默认由内容撑开
典型的块级元素标签:
div p h ul li dl dd form header section table nav footer
css选择器 {
display: block;
}
2 . 设置元素为行内元素
display:inline, 可以设置元素为行内元素, 可以在一行中显示, 如果超过宽度, 会自动换行
不可以设置宽高, 宽度高度由内容撑开
典型的行内元素:
a span b u i s strong ins em del img input
3 . 设置行内块元素
display:inline-block, 可以设置元素为内联块级元素
一行可以显示多个, 可以设置宽高
拥有
inline-block特征的标签,input textarea button select img
选择器 {
display: inline-block;
}
4 . 行内元素和块级元素的相互转换
使用 display:block;即可将元素转为块级元素
使用 display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
使用 display:inline-block;即可将元素转为行内块
5 . 设置元素的显示和隐藏
css选择器 {
display: block/inline-block/inline; /* 显示 */
display: none; /* 隐藏 */
}
(1). display:none 和 visibility:hidden 的区别
**
display:none**会让元素消失, 元素原来的位置会空出来
visibility:hidden, 会让元素消失, 但是位置保留, 相当于隐身了
outline: none;取消input框的边框
list-style: none;去除无序列表前的小圆点
visibility : 能见度
hidden, hide: 隐藏
二 . 浮动
1 . folat浮动
css选择器 {
float: 属性值;
}
2 . 浮动元素会脱离标准流(脱标)
元素从上往下, 从左往右排列
行内元素, 行内块元素, 一行多个, 不够一行挤到下面去
块级元素独占一行
3 . 浮动的元素会具有行内块元素的特性
浮动的元素, 相当于给它们设置了
display:inline-block
...
<style>
span {
width: 200px;
height: 200px;
background-color: #123ddd;
float: left;
}
</style>
...
<span>1</span>
<span>2</span>
<span>3</span>
4 . 浮动的元素会一行内显示并且元素顶部对齐
<style>
div {
width: 200px;
height: 200px;
float: left;
}
div:nth-child(1) {
background-color: #abc;
}
div:nth-child(2) {
background-color: #123;
height: 300px;
}
div:nth-child(3) {
background-color: #222;
}
div:nth-child(4) {
background-color: #555;
}
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
(1) . 浮动元素经常和标准流父级搭配使用
浮动元素的活动范围只能在父级范围内
为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
三 . 定位
定位：将盒子定在某一个位置
定位 = 定位模式(如何定位) + 边偏移 (定位在哪里)
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。
1 . 定位模式与边偏移
position: 定位, 位置
定位模式决定元素的定位方式 ，它通过 CSS 的
position属性来设置，其值可以分为 5 个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
边偏移就是定位的盒子移动到最终位置。有
top、bottom、left和right4 个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2 . 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
css选择器 {
position: relative;
}
相对定位的特点：
它是相对于自己原来的位置来移动的（ 移动位置的时候参照点是自己原来的位置） 。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。 它最典型的应用是给绝对定位当爹...
...
<style>
div {
width: 200px;
height: 200px;
background-color: #123;
}
div:nth-child(1) {
background-color: #123;
}
div:nth-child(2) {
background-color: #323;
position: relative;
top: 20px;
left: 20px;
}
div:nth-child(3) {
background-color: #f23;
}
</style>
...
<div></div>
<div></div>
<div></div>
...
3 . 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
位置取决于父级, 有定位的父级
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（ Document 文档）
如果祖先元素有定位（相对、绝对、固定定位） ， 则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标
css选择器 {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: rosybrown;
}
.son {
position: absolute;
top: 400px;
left: 400px;
width: 100px;
height: 100px;
background-color: goldenrod;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
(1) . 子绝父相
子级是绝对定位的话，父级要用相对定位
因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
4 . 固定定位
固定定位是元素固定于浏览器可视区的位置。
主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
选择器 {
position: fixed;
}
固定定位的特点：（务必记住）
以浏览器的可视窗口为参照点移动元素, 跟父元素没有任何关系
不随滚动条滚动
固定定位不再占有原先的位置。固定定位也是脱标的
固定定位也可以看做是一种特殊的绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">中心</div>
</body>
</html>
(1) . 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。
可以使用 z-index 来控制盒子的前后次序 (z 轴)
选择器 {
z-index: 1;
}
数值可以是正整数、负整数或 0, 默认是 auto， 数值越大， 盒子越靠上
如果属性值相同，则按照书写顺序， 后来居上
数字后面不能加单位
只有定位的盒子才有
z-index属性
一般给值, 都是 10 或者 100 的倍数
5 . 绝对定位的盒子居中
加了绝对定位的盒子不能通过
margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;：让盒子向左移动自身宽度的一半
绝对定位的水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.parent {
width: 300px;
height: 300px;
background-color: #666;
margin: 0 auto;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: rgba(111, 222, 200, 0.3);
left: 50%;
margin-left: -50px;
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
绝对定位的垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #666;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background-color: rgba(111, 222, 200, 0.3);
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
四 . 背景线性渐变
盒子的 background-image 属性可以用 linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right, blue, red); /* 渐变方向,开始颜色, 结束颜色 */
渐变方向也可以写成度数
background-image: linear-gradient(45deg, blue, red);
可以有多个颜色值，并且可以用百分数定义它们出现的位置
background-image: linear-gradient(to bottom, blue, yellow 20%, red);
