CSS文档流
- position定位属性，检索或设置对象的定位方式
position定位
1、position属性值
| static | 默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明） |
|---|---|
| absolute | 相对于父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以可视窗口。(层叠的顺序z-index:value) |
| relative | 是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】） |
| fixed | 相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。 |
| sticky | 可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。 |
2、position 属性值的区别
1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2.position: relative; 相对于自己在文档流中的初始位置偏移定位。
3.position: fixed; 相对于浏览器窗口定位。
4.position: absolute; 是相对于父级非position:static 浏览器定位。
绝对定位和相对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
3、固定定位将对象从文档流中拖离出来因此不占据空间，始终相对浏览器可视窗口定位；
包含块
包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，可视窗口是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
定位元素层次关系
z-index : auto /number
有定位的元素才可以修改层级关系
检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
元素在浏览器窗口居中的方法
让一个元素始终在窗口水平、垂直位置居中：
1、div{
width:200px;
height:200px;
background:#f00;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
}
2、div{
width:200px;
height:200px;
background:#f00;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
扩展：四则运算 calc()方法
注：运算符前后要留有空格
乘和除的时候 不能是固定的值 ，要是一个倍数；
文本换行
-
Word-wrap
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性值：
normal
说明：只在允许的断字点换行（浏览器保持默认处理）
break-word
说明：属性允许长单词或 URL 地址换行到下一行 -
Word-break
属性值：
break-all
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
Keep-all
说明：文本不会换行，只能在半角空格或连字符处换行
锚点
命名锚点链接的应用：
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：<a href="#命名锚记名称"></a>
透明度属性：
1、rgba()方法
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。取值0~1之间
2、opacity方法
opacity: 0.5; 取值0~1
filter:alpha(opacity=50); /* 兼容IE低版本浏览器 */ 取值0~100
rgba()方法与opacity方法两者区别
rgba()方法与opacity方法都可以实现透明度效果，
1、rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；
2、opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。
小结
文档流:
普通流: 从上至下,从左至右
浮动流: 元素添加了float:;
定位流: 添加了定位属性
坐标位置
水平 left right
垂直top bottom
定位:position
static 默认值,设置坐标无效
absolute 绝对定位
特征:
1:脱离文档流,不占位置
2: 默认参考html的00点(浏览器零点)
3: 如果有父级,且父级有定位,那就参考父级元素(默认定位除外) 相当于给子元素指定了参考物
relative: 相对定位
特征:
1: 占据文档流,占位置
2: 参考自身加载在页面中的位置
fixed: 固定定位
特征:
1: 脱离文档流,不占位
2: 元素固定在页面中不随着页面滚动而滚动
3: 参考浏览器的00点
sticky: 粘性定位
特征:
1: 页面达到一定高度时,脱离文档流
2: 效果是吸附浏览器顶部
包含块:
父级有定位且是position:relative;,子集有定位为position:absolute; 就是包含块
层级关系:
前提条件: 想要改变层级关系,那元素必须有定位
z-index:层级关系;
auto 默认值
number 具体数字(值越大,层级越高,值越小,层级越低,可以为负数)
并列关系: 两个元素都可以改变层级关系
嵌套关系: 只能改变子元素的层级关系
锚点链接
1: 点击位置 a标签 href="#mz"
2: 确定跳转位置 id="mz"
3: 页面高度足够
利用定位让元素居中案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*方式一*/
.box{
width: 500px;
height: 400px;
background:red;
margin: 200px;
position: relative;/*作为参考物 给父级*/
}
.con{
width: 100px;
height: 100px;
background: pink;
position: absolute;/*子元素改变自己的位置*/
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;/*自适应*/
}
/*方式二*/
.box1{
width: 500px;
height: 400px;
background:red;
margin: 200px;
position:relative;/*父级作为参考物*/
}
.con1{
width: 100px;
height: 100px;
background:pink;
position:absolute;/*子集作为被参考物*/
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
</style>
</head>
<body>
<!--方式一-->
<!--<div class="box">
<div class="con"></div>
</div>-->
<!--方式二-->
<!--<div class="box1">
<div class="con1"></div>
</div>-->
<div class="con"></div>
</body>
</html>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
