浮动和定位
一、浮动
传统网页布局的三种方式：普通流、浮动、定位
1.标准流
1.1.标签按照规定好默认方式排列
标准流是最基本的布局方式
2.选择器{ float:属性值;}
2.1.
- 浮动可以让多个块级元素一行内排列显示
- 块级元素纵向排列：标准流
- 块级元素横向排列：浮动
2.2.用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及另一个浮动框的边缘
2.3.
- none：不浮动（默认值）
- left：左浮动
- right：右浮动
3.浮动的特性
3.1.浮动元素会脱离标准流
- 脱离标准普通流的控制以便移动到指定位置
- 浮动的盒子 不再保留原先的位置
- 也就是说原位置会被浮动覆盖
3.2.浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置了浮动，这多个盒子会一行内显示并且元素顶部对齐
- 父级宽度装不下的话，多出的盒子会另起一行
3.3.浮动的元素会具有行内块元素的特性
- 行内元素设置了浮动，则直接变成了行内块元素
- 浮动的盒子中间没有缝隙，紧挨一起
4.浮动元素和标准流父级搭配使用
4.1.
- 用标准流的父元素排列上下位置
- 内部子元素采取浮动排列左右位置
- 盒子和盒子嵌套
- 利用外边距margin:0 auto; / margin-right:10px;来设置每个小盒子之间的距离
- 总之，盒子与盒子之间的距离都是用margin来设置
二、常见网页布局
这张图的大概代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
* {
padding: 0;
margin: 0;
}
.top {
height: 50px;
background-color: gray;
}
li {
list-style: none;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 0 auto;
margin-top: 10px;
}
.body4 {
width: 980px;
height: 300px;
background-color: pink;
margin: 0 auto;
margin-top: 10px;
}
.body4 li {
width: 237px;
height: 300px;
float: left;
margin-right: 10px;
background-color: gray;
}
.body4 .teshu {
margin-right: 0;
}
.footer {
height: 185px;
background-color: gray;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">1</div>
<div class="banner">2</div>
<div class="body4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="teshu">4</li>
</ul>
</div>
<div class="footer">3</div>
</body>
</html>
1.浮动布局特点
1.1.浮动和标准流的父盒子搭配
先用标准流的父盒子上下位置，之后内部子元素采取浮动排列左右位置
1.2.一个元素浮动了，其余兄弟元素也要浮动
- 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题
- 浮动的盒子只会影响后面盒子的标准流，不会影响前面的盒子，就像排队一样
三、清除浮动
父盒子有的时候不方便定义高度。不定义高度，因为浮动，下面的盒子又会被浮动的盒子给盖住，出问题。
1.清除浮动的本质
1.1.清除浮动元素造成的影响
只让浮动在父盒子内部影响，不会影响父盒子外面的其他盒子
1.2.选择器：{clear:属性值;}
选择器：{clear:both;}
2.清除浮动的方法
2.1.额外标签法
- 也就是隔墙法，在浮动元素最末尾添加一个空的标签
- 例：
<div style="clear:both"></div> - 这个新添空标签一定要是块级元素
- 通俗易懂，书写方便
- 但是会添加许多无意义标签，结构化较差
2.2.父级添加 overflow元素
- 直接在父元素中添加overflow:hidden属性
2.3.父级添加 after元素
- 额外标签法的升级版
2.4.父级添加双伪元素
- 给父元素添加一段代码
- 然后在子元素里添加类名
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}
CSS属性编写顺序
一、定位
- 浮动让多个块级盒子一行没有缝隙排列显示，用来横向排列盒子
- 定位让盒子*在某个盒子内移动，或固定在某个位置
- 所以浮动定位互补完成需求
1.定位=定位模式+边偏移
将盒子定在某一个位置
1.1.定位模式
position属性来设置
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
1.2.边偏移
top、bottom、left、right属性分别对应上下左右的距离
top:100px;
标准流和浮动不能使用这四个属性
2.静态定位 static
2.1.元素的默认定位方式，无定位的意思
选择器 { position: static; }
3.相对定位 relative（重要）
3.1.选择器 { position:relative; }
- 元素移动的时候，以原位置为基础移动的距离，就是相对距离
- 相对定位不脱标，原来位置不会被标准流占据
- 也就是不会浮动起来
4.绝对定位 absolute （重要）
4.1.选择器 { position: absolute; left :50%;}
- 以祖先元素为基准来移动
- 若没有祖先元素或者祖先元素没有定位，则以浏览器为基准移动
- 若祖先元素有定位，则以最近一级的祖先元素的定位为基准移动
- 绝对定位是脱标的，原来位置会被标准流占据
4.2.让绝对定位的盒子居中显示
-
先用left 50%（父容器宽度的一半）走到父盒子中线的右边
-
再用margin赋值往左边走该盒子宽度的一半
5.子绝父相
-
子是绝对定位，则父一定要相对定位
-
父级需要占有位置，所以要相对定位不脱标
-
子级要放在父级的任何一个位置，也就是不需要占位置，那就绝对定位随便浮动、随便脱标吧
6.固定定位 fixed （重要）
6.1.选择器 { position: fixed ; }
- 固定在可视区的位置，页面滚动时元素位置不改变
- 总是以浏览器的可视窗口为基准移动
- 和父元素没有任何关系。也不随滚动条滚动
7.粘性定位 sticky
7.1.选择器 { position: sticky ; top:10px }
- 相对定位和固定定位的混合
- 以可视窗口为基准移动元素 （固定定位）
- 粘性定位占有原先的位置 （相对定位）
- 必须添加top、left、right、bottom其中一个才有效
- 滚动到了那个位置，就开始是固定定位
8.定位总结
9.定位叠放顺序 z-index
9.1选择器 {z-index:1;}
- 数值可以是正整数、负数、0。默认是auto，不能加单位
- 数值越大，盒子越靠上方，数值相同的话，书写顺序后来居上
- 只有定位才有这个属性
10.定位的特殊性
10.1
- 和添加了浮动一样，行内元素若绝对或固定定位了，则可以直接设置高度和宽度
- 块级元素添加了绝对或固定定位，若没有设定高度宽度，则默认是内容的大小
10.2 设定浮动、定位的脱标的盒子不会外边距塌陷
10.3
- 绝对定位会完全压住盒子里所有内容，浮动定位不会压住盒子里的文字和图片**（会直接露出来）**
- 浮动的效果其实就是文字环绕图片的效果。因为图片不会盖住文字
二、网页布局总结
- 页面布局第一准则：分析行模块，再分析每个列中的列模块
- 第二准则：列模块基本上是浮动布局，先确定列的大小，再确定列的位置
- 制作HTML结构。现有结构、后有样式，结构永远最重要。
- 垂直的块级盒子用标准流
- 多个块级盒子水平显示用浮动
- 元素*在盒子里移动用定位
- 先理清楚布局结构，再写代码，熟能生巧
- 必须先确定页面的版心（可视区）
三、元素的显示与隐藏
让一个元素在页面中隐藏或者显示出来
1.display属性
1.1.display:none； 隐藏对象
display:block； 转换为块级元素，显示元素
- display属性用于设置一个元素如何显示
- display隐藏元素后，不再占有原来的位置，会缩进去
2.visibility 可见性
2.1.visibility: visible; 元素可视 visibility: hidden; 元素隐藏
- visibility 隐藏元素后，继续占有原来的位置
3.overflow 溢出
3.1.overflow: visible;
- overflow属性指定了 如果内容溢出了元素的框解决方法
- visible 不剪切内容也不添加滚动条
- hidden 不显示超过对象尺寸的部分，超出部分隐藏
- scroll 不管超出与否，总是显示滚动条
- auto 超出自动有滚动条，不超过没有滚动条
- 如果是有定位的盒子，慎用hidden，因为会隐藏多余部分