文章目录
CSS浮动：
CSS浮动：float是CSS中的定位属性，用于设置对象的浮动布局。在介绍浮动布局之前，我们先来认识一下标准流。
1.标准流：
标准流元素，就是标签按照规定好默认方式排列。其中，块级元素会独占一行，自上而下排布。行内元素则会按照顺序从左到右排列，碰到父元素边缘会自动换行。
由于标准流的种种限制，对于一些网页布局单单用标准流无法实现，因此就要借助于浮动来完成布局。
2.浮动的语法规则：
<style>
div{
float:left;
}
div{
float:right;
}
div{
float:none;
}
</style>
三个属性分别为左浮动、右浮动和不浮动
3.浮动的特性：
（1）添加浮动的元素会脱离标准普通流的控制，移动到指定位置
（2）浮动的盒子不再保留原先的位置，他原来的位置会被后面的元素占据
（3）如果多个盒子设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列，并且盒子之间不会有缝隙
（4）任何元素都可以添加浮动，并且浮动元素会具有行内块元素特性
4.浮动的注意点：
（1）浮动常常和标准流父级盒子互相配合，即先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
（2）一个盒子里有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以免引发其他问题
（3）浮动的盒子只会影响浮动盒子后面的标准流，不会影响该盒子前面的标准流
5.清除浮动：
在父级盒子很多的情况下，我们有时需要随时增删父级盒子，这样的情况下如果给定了父级盒子的高度将会使我们后续的维护困难重重，所以我们不便给确定的高度。但子盒子浮动又不占有位置，最后父级盒子的高度为0时，就会影响下面的标准流盒子，对排版产生影响。这个时候我们就需要清除浮动。
（1）额外标签法：
<div>
<div>第一个浮动</div>
<div>第二个浮动</div>
<div>第三个浮动</div>
<div style="clear:both"></div>
</div>
该方法将上述空标签添加在浮动元素末尾，而且要求这个新的空标签是块级元素。该方法通俗易懂，书写方便，但是添加了额外标签使得代码结构化较差。
（2）父级添加overflow：
<style>
.box{
overflow:hidden;
}
</style>
<div>
<div calss="box">第一个浮动</div>
<div>第二个浮动</div>
<div>第三个浮动</div>
</div>
该方法非常简便，只需要在父级元素上多写一行代码即可。
这个overflow：hidden是不是有点眼熟呢？是不是之前在哪里见过？
对了，在盒子模型那里，解决外边距合并的方法也是在父级元素上添加这一行代码。看来这行代码有着多种作用呢。
（3）after伪元素法
<style>
.clearfix:before{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
</style>
这些代码暂时还看不太懂，使用的时候只需要让父级盒子调用这些代码即可。
（4）双伪元素清除浮动：
<style>
.clearfix:before，.clearfix:after{
content:"";
display:table;
}
.clearfix:before{
clear:both;
}
.clearfix{
*zoom:1;
}
</style>
这行代码和上边相同，使用时只需要让父级盒子调用这些代码即可。
CSS定位：
在一些情况中，我们用标准流或是浮动都无法快速实现，此时就需要定位来实现。定位可以让盒子自由的在某个盒子内移动或者固定在屏幕的某个位置，并且可以在最顶层显示。定位一共分为四个：静态定位、相对定位、绝对定位、固定定位。
（1）静态定位：
静态定位是元素的默认定位方式，无定位的意思。
<style>
div{
position:static;
}
</style>
静态定位在布局时很少用到，并且他没有边偏移
（2）相对定位：
<style>
div{
position:relative;
top:0;
right:1px;
left:2px;
bottom:3px;
}
</style>
相对定位是元素在移动位置的时候，相对于它原来的位置来说的。，并且他没有脱标，仍然属于标准流
（3）绝对定位：
<style>
div{
position:absolute;
top:0;
right:1px;
left:2px;
bottom:3px;
}
</style>
绝对定位是相对于它的上级元素来说的，如果他没有上级元素或者上级元素没有定位，则以浏览器为准。绝对定位脱离标准流。
（4）固定定位：
<style>
div{
position:fixed;
top:0;
right:1px;
left:2px;
bottom:3px;
}
</style>
固定定位顾名思义，在浏览器页面滚动时元素的位置不会改变。并且它不在占据原先的位置，可以看作是一种特殊的绝对定位。
ps：使固定定位的盒子left：50%，在让固定定位的盒子外边距走版心宽度一半的位置就可以让盒子贴着版心右侧对齐。
注意：我们使用时常常让子盒子为绝对定位，父盒子用相对定位。这样父盒子可以限制子盒子的位置，同时子盒子又可以在父盒子的任何一个地方显示。
*（6）粘性定位：
<style>
div{
position:sticky;
top:0;
}
</style>
粘性定位可以被认为是相对定位和固定定位的混合。粘性定位是以浏览器的可视窗口为参照点移动元素，并且他占有原先的位置，并且必须添加top、left、right和bottom其中一个才有效。
边偏移：
边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right四个属性。
top：顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom：底部偏移量，定义元素相对于其父元素下边线的距离。
left：左侧偏移量，定义元素相对于其父元素左边线的距离。
right：右侧偏移量，定义元素相对于其父元素右边线的距离。
<style>
div{
top:0;
left:1px;
right:2px;
bottom:3px;
}
</style>
定位叠放次序：
<style>
div{
position:fixed;
z-index:1;
top:0;
right:1px;
left:2px;
bottom:3px;
}
</style>
1.该数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
2.如果属性值相同，则按照书写顺序，后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index
定位的拓展：
绝对定位的盒子可以先通过left:50%移动到父级元素的水平中心位置，再让盒子向左移动自身宽度的一半。
行内元素添加绝对或固定定位可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不设置宽度和高度，默认大小是内容的大小并且脱标的元素都不会触发外边距合并的问题
伪类：
伪类用于定义元素的特殊状态。
伪类的语法：
<style>
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
</style>
(1)：first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
<style>
p i:first-child {
color: blue;
}
</style>
<body>
<p>我是<i>第一个</i>我是<i>第二个</i>。</p>
<p>我是一个<i>第一个</i>我是<i>第二个</i>。</p>
</body>
所有伪类：
伪元素：
CSS 伪元素用于设置元素指定部分的样式。
<style>
selector::pseudo-element {
property: value;
}
</style>
所有伪元素：
扫一扫
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
