浮动定位
分类
- 普通流定位
- 浮动定位
- 相对定位
- 绝对定位
- 固定定位
普通流定位
- 每个元素在页面上都有自己的空间
- 每个元素都是从父元素的左上角开始绘制
- 块级元素按照从上往下的顺序，逐行排列，每个元素独占一行
- 行内/行内块，多个元素在一行中，从左往右显示
浮动定位
让块级元素横向显示
float: none/ left/ right
元素浮动：
- 脱离文档流(页面不占空间，后续元素上前补位)
2. 在当前行，向左/右对齐，如果之前有其他浮动元素，停靠其他浮动元素的后面
浮动元素的特点 - 元素一旦浮动，不占页面空间，后续元素上前补位
- 浮动元素停靠在父元素的左/右边缘,或者其他已浮动元素的后面
- 父元素横向显示不下所有浮动元素，会把显示不下的部分挤下去
- 块级元素横向显示，靠浮动解决
浮动元素引发的特殊效果
浮动元素占位问题
当父元素横向显示不下所有元素时，显示不下的元素会换行。
但是,已浮动会根据自己的浮动方向占据位置。导致被挤下去的元素会绕开被占据的位置显示。
.浮动元素，如果没有定义宽度，最后的宽度是靠内容撑开
元素一旦浮动之后，都会变成块级(设置宽高，垂直外边距有效)
文本，行内元素，行内块，不会被浮动元素压在下面，而是巧妙的绕开，环绕着浮动元素显示
清除浮动
清除之前浮动元素带来的影响
就是本元素不上前补位
clear:left
right
both
高度坍塌
发生高度坍塌的原因
父元素不设置高度，高度靠内容撑起
所有子元素都浮动，父元素认为页面上没内容
高度就为0；
解决高度坍塌
- 给父元素设置高度，很多时候，事先不知道明确的高度
- 父元素也浮动，不过会给父元素的兄弟元素带来影响
- overflow:hidden;
- 父元素内，追加一个空的div，只设置clear:both
显示方式
显示方式
块级，行内，行内块，table
绝对元素在网页中的表现形式
display: inline; 行内
block 块级
inline-block 行内块
table 让元素的显示方式变为table方式
none 脱离文档流的隐藏
显示效果
visibility:visible 显示，默认值
hidden 不脱离文档流隐藏
透明度
opacity: 0~1;
rgba只会改变当前颜色的透明度
opacity,元素内部所有与元素相关的，透明度都会跟着改变
垂直对齐
使用场景
tr/td/th vertical-align:top/middle/bottom
img vertical-align:top/middle/bottom/baseline（默认）
给img设置垂直对齐，改变的是img前后文本的位置
一般，我们会把img的vertical-align，设置成非baseline
光标的设置
这个光标特效有很多，以下展示的用的最多
cursor：default 默认箭头
pointer 小手
text 文本
wait 等待
crosshair 十字
help 帮助
列表的样式
- 设置列表标识项
list-style-type:none;
disc
circle
square
- 把列表项，设置成图片
list-style-image:url(true.png);
- 列表项的位置
list-style-position：inside/outside（默认）
- 简写方式
list-style:type img position;
项目中最常出现的方式list-style:none;取点
定位
position：
取值 static 默认缺省值，静态(默认文档流)
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意：
1.当一个元素被position修饰，并且取值为relative/absolute/fixed其中一种时，这个元素被称为已定位元素
2.已定位元素，解锁4个偏移属性
top 距离上方有多远 + ↓，- ↑
left 距离左边有多远 + →，- ←
right
bottom
附加属性发生冲突，应用top和left
相对定位
position：relative； 4个偏移属性
- 元素只添加position:relative，不写偏移量，对周围其他元素没有任何影响。(跟没写relative一样)
- 相对定位，没有脱离文档流
- 相对自己原来位置做偏移
使用场合： - 做元素的微调(类似于margin的效果)
- 通常作为绝对定位元素的已定位祖先元素使用
绝对定位
position:absolute；配合偏移量使用
- 绝对定位的元素，脱离文档流
- 当祖先级元素，没有已定位元素，相对于body左上角偏移
绝对定位的元素会相对，离自己“最近的”“已定位的”“祖先”元素的左上角偏移
注意：relative通常作为绝对定位元素的已定位祖先元素使用
堆叠顺序
如果不设置堆叠顺序，最后一个元素堆叠顺序最高(html的最后)
z-index: 无单位的整数
数字越大，堆叠顺序越高，理论上最大是21亿多
默认的堆叠顺序，不大于1
定位的脱离文档流，和浮动的脱离文档流不是一个体系
只有对已定位的元素，才能使用z-index
堆叠顺序对于父子无效，儿子永远站在爹肩膀上
固定定位
position：fixed;配合偏移量使用
永远相对body定位
练习的代码，希望可以帮到您，一起学习。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1,#d2{
width:200px;height:200px;
border:2px solid #f00;
margin-top:20px;
display:block;}
#d1{visibility:hidden;}
a{
width:200px;height:200px;
border:2px solid #f00;
}
#a1{display:block;}
#a2{display:inline-block;margin-top:20px;}
#d3{display:table;}
#a4{display:none;}
#d3{
width:200px;height:200px;
background:#00f;
opacity:.1;}
#d33{
width:100px;height:100px;
background:#f00;
}
ul{
list-style-type:none;
list-style-image:url(true.png);
list-style-position:inside;
}
</style>
</head>
<body>
<h3>列表的样式</h3>
<ul>
<li>梅菜扣肉</li>
<li>西湖醋鱼</li>
<li>龙井虾仁</li>
<li>羊肉泡馍</li>
<li>葱烧臭鳜鱼</li>
</ul>
<br>
<hr>
<h3>透明度</h3>
<div id="d3">
<div id="d33"></div>
</div>
<br>
<hr>
<h3>元素的显示方式</h3>
<a href="" id="a1">变成块级</a>
<a href="" id="a2">变成行内块</a>
<a href="" id="a3">变成table</a>
<a href="" id="a4">none</a>
<div id="d1">dddddd111</div>
<div id="d2">dddddd222</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width:1004px;
background-color:#f3f3f3;
margin:0 auto;
padding:0;
}
#d2{
clear:both;
}
li{
float:left;list-style:none;margin: 0 93px;
}
</style>
</head>
<body>
<div>
<ul id="d1">
<li>
<img src="icon1.png" alt="">
<p>品质保障</p>
</li>
<li>
<img src="icon2.png" alt="">
<p>私人订制</p>
</li>
<li>
<img src="icon3.png" alt="">
<p>学院特供</p>
</li>
<li>
<img src="icon4.png" alt="">
<p>专属特权</p>
</li>
</ul>
<div id="d2"></div>
</div>
</body>
</html>
学到这里的同学别着急，既然你可以看到这里，后续会有更好玩的知识在等着您。
