CSS(PC端)传统页面布局三种方式
一、标准流(文档流)
标签按照规定好的默认方式排列,是最基本的网页布局方式。
- 块级元素会独占一行,从上向下顺序排列。
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
二、浮动
1.语法
选择器 {
float:属性值;
}
2.属性
none(默认)
left
right
3.浮动特性
(1)脱离标准普通流的控制移动到指定位置(脱标)
(2)浮动盒子不再保留原先的位置
(3)浮动的元素会一行内显示并且元素顶部对齐(若父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐)
(4)浮动元素会具有行内块元素特性(若块级盒子没有设置宽度,默认宽度和父级一样,添加浮动后,它的大小根据内容来决定)。
注:
1.浮动元素之间没有空隙
2.浮动元素经常和标准流父级**搭配使用(**先用标准流的父元素排列上下位置,内部子元素采取浮动排列左右位置)
3.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
4.清除浮动
原因:由于父盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后导致父盒子高度为0,就会影响下面的标准流盒子。
1.选择器 {clear:left | right | both}
实际开发中,几乎只用clear:both;
2.父级添加overflow属性
在父级添加overflow属性,属性设为hidden,auto,scrol 缺点:无法显示溢出部分
3.:after伪元素法
<style>
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hedden;
}
.clearfix {
*zoom:1;
}
</style>
4.双伪元素法
<style>
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
</style>
三、定位
定位 = 定位模式 + 边偏移
1.静态定位(了解)
选择器 {
position: static;
}
(就是标准流,无定位)
2.相对定位
选择器 {
position: relation;
}
特点:
1.它是相对自己原来的位置来移动;
2.原来在标准流的位置继续占有(占位),后面的盒子仍以标准流对待它;
3.绝对定位
选择器 {
position: absolute;
}
特点:
1.如果没有祖先元素或祖先元素没有定位,则以浏览器为准;
2.如果祖先元素有定位(相对、决定、固定),则以最近一级的有定位祖先元素为参考点移动位置;
3.绝对定位不占原先位置。(脱标)
4.固定定位
选择器 {
position: fixed;
}
特点:
1.以浏览器的可视窗口为参照点移动元素;
2.跟父元素无关;
3.不随滚动条滚动
4.不再占有原先位置。
5.粘性定位
选择器 {
position: sticky;
}
特点:
1.以浏览器可视窗口为参照点移动元素(固定定位特点);
2.粘性定位占有原先的位置(相对定位特点);
3.必须添加top、left、right、bottom其中一个才有效,跟页面滚动搭配使用;
应用场景:顶部的导航栏(IE不支持)
6.定位拓展
(1)子绝父相
(2)定位叠放次序
选择器 {
z-index:1;
}
注:
- 数值可以是正,负,0,默认为auto,数值越大越靠上
- 如果值相同,按书写顺序,后来居上
- 数字后面不加单位
- 只有固定的盒子才有z-index属性
(3)固定在版心右侧位置技巧
1.让固定定位的盒子left:50%(走到浏览器可视区的一半位置
2.让固定定位的盒子margin-left:版心宽度的一半距离
(4)绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin: 0 auto 水平居中。
1.left:50%,让盒子左侧移动到父级元素水平中心
2.margin-left: -100px;让盒子向左移自身宽度的一半
(5)脱标的盒子不会触发外边距塌陷
即:浮动元素、绝对定位、固定定位的元素都不会触发外边距合并问题
(6)行内元素添加绝对定位或固定定位,可以直接设高和宽
(7)块级元素添加绝对定位或相对定位,如果未设宽高,默认内容大小
(8)注意
- 绝对定位(固定定位)会完全压住盒子
- 浮动不会压住下面标准流盒子的文字
- 绝对定位(固定定位)会压住文字
- 浮动产生的目的最初是为了做文字环绕效果