网页布局三种方式

hawthornlll

已于 2022-02-07 15:14:15 修改

阅读量1.7k

点赞数 1

分类专栏：笔记

于 2022-02-06 13:51:40 首次发布

本文链接：https://blog.csdn.net/hawthornlll/article/details/122797724

版权

标准流浮动定位清除浮动 CSS布局

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

网页布局的本质一用CSS 来摆放盒子。把盒子摆放到相应位置。

1.标准流（普通流/文档流）

所调的标准流：就是标签按照规定好默认方式排列
1.1.块级元素会独占一行，从上向下顺宇排列。
• 常用元素：div. hr. p. hl~h6. ul. ol dl. form. table
1.2.行内元素会按服顺序，从左到右顺宇排列，碰到父元秦边缘则自动换行。
•常用元索：span. a i. em等

2.浮动

浮动特性
加了浮动之后的元素,会具有很多特性
（1）浮动元素会脱离标准流(脱标）
（2）浮动的元素会一行内显示并日元素顶部对齐
（3）浮动的元素会具有行内块元素的特性

浮动元素经常和标准流父级搭配使用
为了约束浮动元素位百,我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准侧

浮动布局注意点

1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中
个盒子浮动了，那么其他兄弟也应该浮动，以以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

清除浮动本质

·清除浮动的本质是清除浮动元素造成的影响
·如果父盒子本身有高度，则不需要清除浮动
·清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方式
1. 额外标签法也称为隔墙法，是W3C推荐的做法。（新增的盒子必须是块级元素）

额外标签法会在浮动元素未尾添加一个空的标签。例如sdiv style=”clear.both” ></div>
，或者其他标签（如<br/>等）。
•优点：通俗易懂，书写方便
•缺点：添加许多无意义的标签，结构化较差
2. 父级添加overflow 属性hidden、auto、scroll

缺点：无法显示溢出部分
3. 父级添加：after伪元素
4.父级添加双伪元素

浮动不会压住下面标准流盒子里面的文字，而绝对定位会。

3.定位

3.1 为什么需要定位？
1）浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2）定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

3.2定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式＋边偏移

a.定位模式用于指定一个元素在文档中的定位方式。

b.边偏移则決定了该元素的最终位置。
3.2.1.定位模式
定位模式决定元素的定位方式，它通过CSS 的 position 属性来设置，其值可以分为四个：
值
static 静态定位 相当于标准流
relative 相对定位 移动位置相对于自己原来的位置，不脱标继续保持原来的位置
absolute 绝对定位 相对于它的祖先元素来说（没有或者没有定位就以浏览器为准）父相子绝
fixed 固定定位固定定位是元素固定于浏览器可视区的位置。
a.以浏览器可视窗口为参照点移动元素。（跟父元素没有任何关系，不随滚动条滚动。
b.固定定位不在占有原先的位置

小算法：
1．让固定定位的盒子left:50%．走到浏览器可视区（也可以看做版心）的一半位置。
2．让固定定位的盒子 margin-left:版心完度的一半距离。多走版心完度的一半位置

3.2.2.边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left 和right 4 个属性。
top top: 80px 顶端偏移量，定义元索相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkBoYXd0aG9ybmxsbA,size_20,color_FFFFFF,t_70,g_se,x_16