选择器的级别、浮动的深入理解、定位的使用
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位排版属性</title>
<style type="text/css">
.b1,.b2,.b3{
width:200px;
height:200px;
display: inline-block;
}
.b1{
background-color: red;
}
.b2{
background-color: black;
}
.b3{
position: relative;
bottom:-100px;
background-color: blue
}
</style>
</head>
<body>
<!--
static 静态定位（默认属性值）
relative 相对定位 相对于自身的位置
相对定位的特点：
元素移动后 原始位置会被保留下来（不脱离文档流）
同时提升元素层级
相对自身偏移位置
如果祖先元素只是用于子元素定位可以设置相对定位即可
absolute 绝对定位 相对于其最近的已经定位的父元素 如果没有这样的祖先元素则找最外层的包含框进行定位
绝对定位的特点：
脱离文档流（被后边的元素占用了其原来的位置）
提升层级
相对于定位了的祖先进行偏移
不设置宽度时候 宽度由内容撑开
行内元素设置为绝对定位后可以设置宽高 所以这里的绝对定位也可以触发BFC 从而解决父元素坍塌问题
fixed 固定定位 依据浏览器窗口来进行位置偏移
定位需要使用top 等等进行偏移
特点：脱离文档流 提升层级法BFC机制
通过z-index设置层级 auto 表示跟父元素的层级一致
number 设置层级 inherit 继承自父元素的层级
也可以使用固定定位解决坍塌问题
没有设置偏移量的相对定位的元素跟静态定位的效果一样
定位元素的层级由其位置决定 在后边的元素的层级高过前面的
比如两个绝对定位的元素 后边的在前者的上面 、
在低层级的父级元素当中的子元素的层级永远低于高层次的父级元素的兄弟元素
不管子元素的层级多高（知识盲点）
设置元素的margin为负值将会将自身原来占据的位置让出来
盒子占据的宽度和高度 = 高度/宽度+padding+border+margin
-->
<div class="b1"></div>
<div class="b2 "></div>
<div class="b3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
color:#0f0;/*元素选择器绿色*/
}
#box1 p{
color:red;/*红色*/
}
#box1 .ph span{
color:#00F;/*蓝色*/
}
#box1 p span{
color:#F0F;/*粉红色*/
}
#box2 p{
color:#000;/*黑色*/
}
#box2 p{
color:yellow;/*紫色*/
}
.left,.right{
width: 600px;
height:100px;
background-color: red;
}
.left{
float:left;
}
.right{
float:right;
}
.box{
overflow:hidden/*使用inline-block具有包裹性 将里边的浮动元素包裹起来
转变为块级元素 这样可以触发BFC */
}
/*p{
clear: both;
}*/
</style>
</head>
<body>
<!--
浏览器遵循下述原则来解决css冲突
1、优先原则 行内样式>内嵌样式|链接外部样式
id选择器#a{}>class选择器.a{}|伪类选择器:hover{}|属性选择器[lang^=test]{}>元素选择器div{}|伪元素选择器>通配符选择器*{}|子选择器|相邻兄弟选择器
2、最近原则 针对继承性的样式 越靠近格式化的元素 级别越高
比如对div>p 中的p元素 给p元素设置高于给div设置
可以添加!important设置为最高的样式等级
3、统一属性的样式定义
line-height文本行高属性
语法：normal（默认为110% 120%之间）、number（效果等同于em 当前字体大小的数字倍数）、length()、百分数（相对于当前字体的百分比）、inherit（继承父级元素的line-height属性）
background-position属性：
语法 表示位置的关键字 x% y% xpos ypos
top left
偏移量百分比为相对于当前元素与图片宽度的差
background-attachment 语法scroll fixed inherit 随着滚动 固定 继承自父级元素的该属性
盒子模型：外边距 内边距 边框
相邻的几个块级元素 外边距发生重叠取最大的
css2规范对盒子给出了3种排版模型 标准流排版 浮动排版 定位排版 css3 有flex排版等
在使用标准流编写网页的时候 可能还需要将块级元素改为
行内块块级元素
所以一般来说都会使用浮动排版和定位排版一起配合使用
浮动排版的元素会脱离文档流 而且层级比标准流还要高（块级元素表现的浮动元素不存在一样）
此时浮动的元素（原本标准文档流当中的行内元素是无法设置宽高的）也具有块级属性可以设置宽高以及边距等等
这里注意一点：
浮动元素无法撑开父级元素（高度坍塌） 可以清除浮动或者使用超出隐藏或者设置高度解决高问题
在html当中 元素可以分为两层一层为元素本身“元素层” 另一层为内容层
环绕问题的出现原因
浮动元素A提高层次 高过标准流当中的B然后将B当中的内容层挤出来
浮动出现的卡住的问题
文字环绕可以使用浮动实现
清除浮动
clear属性取值
right 不允许右边有浮动元素
both 在元素左右两侧不允许有浮动元素
none 默认值 运行浮动元素在元素左右两侧
inherit继承父级元素的该属性
在使用clear的时候注意一点：
使用clear属性的元素为块级元素
必须与浮动元素为兄弟关系
clear是消除文档流元素上方的浮动元素对自身的影响
一般使用高度为1的div作为清理浮动的元素
一般使用高度为1的div作为清理浮动的元素
伪元素解决坍塌问题
使用BFC解决父元素高度坍塌的问题
触发BFC的情况：inline-block
-->
<!-- <div id="box1">
<p class="ph">
<span>学生作品</span>
<div id="box2">
<p>妙品血糖</p>
</div>
</p>
</div> -->
<!--
浏览器遵循下述原则来解决css冲突
1、优先原则 行内样式>内嵌样式|链接外部样式
id选择器#a{}>class选择器.a{}|伪类选择器:hover{}|属性选择器[lang^=test]{}>元素选择器div{}|伪元素选择器>通配符选择器*{}|子选择器|相邻兄弟选择器
2、最近原则 针对继承性的样式 越靠近格式化的元素 级别越高
比如对div>p 中的p元素 给p元素设置高于给div设置
可以添加!important设置为最高的样式等级
3、统一属性的样式定义
line-height文本行高属性
语法：normal（默认为110% 120%之间）、number（效果等同于em 当前字体大小的数字倍数）、length()、百分数（相对于当前字体的百分比）、inherit（继承父级元素的line-height属性）
background-position属性：
语法 表示位置的关键字 x% y% xpos ypos
top left
偏移量百分比为相对于当前元素与图片宽度的差
background-attachment 语法scroll fixed inherit 随着滚动 固定 继承自父级元素的该属性
盒子模型：外边距 内边距 边框
相邻的几个块级元素 外边距发生重叠取最大的
css2规范对盒子给出了3种排版模型 标准流排版 浮动排版 定位排版 css3 有flex排版等
在使用标准流编写网页的时候 可能还需要将块级元素改为
行内块块级元素
所以一般来说都会使用浮动排版和定位排版一起配合使用
浮动排版的元素会脱离文档流 而且层级比标准流还要高（块级元素表现的浮动元素不存在一样）
此时浮动的元素（原本标准文档流当中的行内元素是无法设置宽高的）也具有块级属性可以设置宽高以及边距等等
这里注意一点：
浮动元素无法撑开父级元素（高度坍塌） 可以清除浮动或者使用超出隐藏或者设置高度解决高问题
在html当中 元素可以分为两层一层为元素本身“元素层” 另一层为内容层
环绕问题的出现原因
浮动元素A提高层次 高过标准流当中的B然后将B当中的内容层挤出来
浮动出现的卡住的问题
文字环绕可以使用浮动实现
清除浮动
clear属性取值
right 不允许右边有浮动元素
both 在元素左右两侧不允许有浮动元素
none 默认值 运行浮动元素在元素左右两侧
inherit继承父级元素的该属性
在使用clear的时候注意一点：
使用clear属性的元素为块级元素
必须与浮动元素为兄弟关系
clear是消除文档流元素上方的浮动元素对自身的影响
一般使用高度为1的div作为清理浮动的元素
一般使用高度为1的div作为清理浮动的元素
伪元素解决坍塌问题
使用BFC解决父元素高度坍塌的问题
触发BFC的情况：inline-block
-->
<!-- <div id="box1">
<p class="ph">
<span>学生作品</span>
<div id="box2">
<p>妙品血糖</p>
</div>
</p>
</div> -->
<!--给高度坍塌的元素添加伪元素 实际上这里的使用时普通的div清除浮动与伪元素结合
content:" ";
display: block;
clear:both;
width:100%;-->
<!--
设置BFC 行内块级元素你inline-block可以触发BFC
将包裹的父级元素设置为浮动元素同样可以触发BFC属性
设置父元素为浮动元素同样可以触发BFC 但这两者的触发导致的结果是不一样的
使用overflow也能触发BFC 为hidden值才触发默认为visible
此时只是固定了高度但不会影响宽度 宽度还是默认的100%
BFC防止浮动元素覆盖文档流元素
-->
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<p>恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿
斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然
文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发恍然文字阿斯顿发</p>
</body>
</html>
标签：浮动,排版,阿斯顿,元素,恍然,级别,选择器 来源： https://www.cnblogs.com/webcyh/p/11556423.html