页面布局，浮动以及定位

最新推荐文章于 2023-06-22 21:20:39 发布

小梦新靓

最新推荐文章于 2023-06-22 21:20:39 发布

阅读量613

点赞数

分类专栏： css web全栈学习

本文链接：https://blog.csdn.net/qq_43712187/article/details/110427538

版权

web全栈学习同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

一、盒模型

什么是盒模型？
（1）css盒子模型仅仅是一个比喻，HTML中所有的标签都是盒子
（2）就是在HTML中所有标签都可以设置
（3）宽度/高度：指可以存放内容的区域
（4）内边距：内容与边框的距离-填充物
（5）边框：
（6）外边距：盒子与盒子之间的距离

在这里插入图片描述

盒子的宽度有不同的宽度
（1）盒子宽度和高度
–1、内容的宽度和高度
就是通过标签的width/height属性设置的宽度和高度
–2、元素的宽度和高度
宽度=左边框+width+右内边距+右边框
高度一样
–3、元素空间的宽度和高度
宽度=左外边距+左边框+做内边距+width+右内边距+右边框+右外边距
高度一样

总结，可以根据盒子模型的特性+浮动/定位+设置宽高来进行页面布局设计

二、页面布局

什么是网页的布局方式：排版

二.一、标准流（文档流/普通流）排版方式：从左到右，从上到下

1、浏览器默认的排版就是标准流排版方式
2、css把元素分为块元素(默认每行只能显示一个)，行内元素，行内块元素
3、在标准流有两种排版方式，一种是垂直排版，一种是水平排版
垂直排版：块元素
水平排版：行内元素/行内块元素
设置

{
display:block/inline-block/inline;
}

二.二、浮动流排版：半脱离标准流

2.1、浮动流只是一种排版方式，水平排版，它只能设置某个元素在父元素左对齐或者右对齐，没有居中对齐，
2.2、不可以使用magrin ：0 auto;
2.3、浮动流不区分块级元素/行内元素/行内块元素，都是水平排版
2.4、都可以设置宽高

什么是浮动元素脱标：脱离标准流

效果，之前的标准流的元素会重新排版，因为脱离这个标准流后，腾出了位置

浮动元素排序原则

1、相同方向上的浮动元素，先浮动的在前，后浮动的在后
2、不同方向，左浮动找左浮动，右浮动找右浮动互不影响，

问题;当两个碰到会怎么样？
3、浮动元素浮动之后的位置，是由浮动之前在标准流中的位置来确定
所以称为半脱离状态：看浮动之前的位置在哪一行，就在哪一行浮动，若前面有浮动，则前面浮动完成后，标准流重新排版，看到就是重新排版的位置
浮动元素的贴靠现象

（1）、如果父元素的宽度能显示所有浮动元素，那么浮动的元素会并排显示
（2）如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前面贴靠
（3）如果贴靠了前面所有的浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边

用处

浮动元素字围绕现象？
浮动元素不会挡住没有浮动元素中的文字,没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
利用浮动来布局
首先要清除默认布局
1、先从上到下，大体盒子布局
2、再从左到右布局

浮动元素高度问题

1、若子元素浮动了，则他不会撑起父元素的高度

清除浮动方式

为什么要清除浮动？

因为当父盒子高度为0时，子盒子不占位置，子盒子不会撑开父盒子，所以下面的标准流盒子，会跑到父盒子中的子盒子下面。
关于浮动的小知识：
（1）浮动的盒子千万不要让他超出父盒子。
（2）超出父盒子的部分会影响下面盒子中的浮动的子盒子。
（3）浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。
清除浮动的几种方式？
(1)给前面的一个父元素设置高度（但是企业中，能不写高度就不写高度）
（2）想让谁不跟前，就给谁添加clear属性(给后面得属性添加clear属性)

 {clear:both/left/left/none（按照浮动规则来）;
//none:默认取值，按照浮动元素得排序来排序（左找左，右找右）
//left不要找前面得左浮动元素:告诉浏览器，我的左边不允许有浮动的元素存在
，请清除掉我左边的浮动元素。
//right：不要找卡年右浮动得元素
//both：两个都不要找
}

当我们给某个元素添加clear属性之后，那么这个元素没有margin属性
(3)隔墙法（不常用）
----------外墙法
------在两个盒子中间添加一个额外的块级元素，并且给这个额外添加的块级元素设置clear:both属性
—注意点：可以让第二个盒子使用margin-top属性，第一个盒子的margin-bottom不可以sguxi
—可以直接设置额外的标签的margin
----------内墙法
—写在第一个浮动盒子的所有子元素的最后添加一个额外的块级元素，并且给这个额外添加的块级元素设置clear:both属性
-----内墙法可以让第二个盒子使用margin-top属性，第一个盒子的margin-bottom不可以sguxi

区别
外墙法不能撑起第一个盒子的高度，内墙法可以
（4）伪元素选择器：创建一个选择器
伪元素选择器作用是给指定的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

标签名称：：before{
属性名称：值；
}
标签名称：：after{
属性名称：值；
visibility:hidden;//超出就隐藏
}

（5）伪元素

.box1::after{
    /*设置添加的子元素的内容为空*/
    content: "";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear*/
    clear: both;
}

/* 伪元素产生出的是  行内元素
        在整个父元素后面内容   转成块元素  
        高度为0   隐藏掉点  清除浮动*/

.clearfix:after {
    content: ".";  /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
    display: block;  /* 转换为块级元素 */
    height: 0; /* 高度为0 */
    visibility: hidden;  /* 隐藏盒子 */
    clear: both; /* 清除浮动 */
}
.clearfix {  /* ie6.7浏览器的处理方式 */
    *zoom: 1;
    /*  * 代表ie6.7能识别的特殊符号  带有这个*的属性 只有ie6.7才执行  
     zoom 就是ie6.7 清除浮动的方法 */
}

----有兼容问题
（6）
overflow:hidden
1、可以将超出标签范围的内容裁剪掉
2、清除浮动（给第一个元素加入overflow:hidden）
再加上*zoom:1;
(8)伪元素清除浮动

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
 .clearfix:after{
     clear: both;
 }
 .clearfix{
     *zoom:1;
 }

2、

二.三、定位流排版

2.3.1、相对定位

1、不脱离标准流，仍然占据空间

.box2{
    background: greenyellow;
    /*告诉浏览器这个元素是相对定位*/
    position: relative;
    /*left: 300px;*/
    /*top:30px;*/
    /*bottom: 90px;*/
    right: 10px;
}

这个相对位置的移动是参考该元素未相对之前的位置进行移动的
同一个方向只能用一个
由于相对定位是不脱离标准流的，所以在相对定位是区分块级元素/行内元素/行内块级元素
相对定位元素没有脱离文档流，原来的位置依然会被保留

在这里插入图片描述

----应用
（1）进行微调
（2）和绝对定位一起用

2.3.2、绝对定位

position:absolute（设置元素为绝对定位)
绝对定位元素以父辈元素中最近的定位元素为参考坐标
-----最近定位可以是相对定位，可以是固定定位，但是静态定位不可以（静态定位是默认定位）
如果绝对定位元素的父辈元素中没有采用定位的，那么此绝对定位元素的参考对象是html,元素会脱离文档流。
-----当行内元素被设置为绝对定位后，不区分行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            /*position: absolute;*/
            width: 100px;
            height: 100px;
            background: #00a4ff;
        }
    </style>
</head>
<body>
<div></div>
<span>你好</span>
</body>
</html>

在这里插入图片描述

当设置了绝对定位后，可以设置宽高
在这里插入图片描述

例子：行内元素在设置了标准流之后，可以设置宽高

就好像文档流中被删除了一样

在这里插入图片描述

在此辟谣一下哈！如果绝对定位元素的父辈元素中没有采用定位的，那么此绝对定位元素的参考对象是谁呢，有的人说是body，有的人会说是document，其实都不是，看了MDN上的介绍，以initial containing block为参考，它的尺寸是和视口是一致的，但不是由Viewport所产生的，而是由根元素html所产生的。
注意点：如果一个绝对定位的元素是以html作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，不会固定的

总结：1、明确参考点 2、使用绝对定位

绝对定位和相对定位

相对定位：相对定位的弊端是，未脱离标准流，仍占有之前的空间，不利于布局
绝对定位：弊端是他是以页面来定位的，若页面改变，则定好的位置又改变了。
两个搭配完美避开缺点，子绝夫相：不会占空间，不会随页面大小改变而改变

绝对定位后margin:0 auto；失效

绝对定位后，不是块级元素，所以auto失效，但是margin没有失效
如何让绝对定位后居中：

只需要设置绝对定位的元素left:50%;
后面设置margin-left:-他的宽度的一半

2.3.3、固定定位

脱离文档流
固定不动
固定定位与绝对定位类似，但它是相对于浏览器窗口定位。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
应用：1、导航条固定，2、广告固定

2.3.4、静态定位

static （静态定位）默认值，元素框正常生成的，top left bottom right这几个偏移属性不会影响其静态定位的正常显示

什么是z-index属性？

默认情况下所有的元素都有一个默认的z-index属性，取值是0，z-index属性的作用是专门用来控制定位流元素的覆盖关系

1、默认情况下定位流的元素会盖住标准流的元素
2、默认情况下定位流的元素后面编写的会盖住前面编写的

在这里插入图片描述

z-index就是可以设置这个顺序，如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就是显示在上面

注意点：

1、如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面（父无子大子先）
2、如果两个子的父元素设置了z-index属性，那么子元素的就会失效，（父大父先）

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局，浮动以及定位

一、盒模型什么是盒模型？（1）css盒子模型仅仅是一个比喻，HTML中所有的标签都是盒子（2）就是在HTML中所有标签都可以设置（3）宽度/高度：指可以存放内容的区域（4）内边距：内容与边框的距离-填充物（5）边框：（6）外边距：盒子与盒子之间的距离盒子的宽度有不同的宽度（1）盒子宽度和高度–1、内容的宽度和高度就是通过标签的width/height属性设置的宽度和高度–2、元素的宽度和高度宽度=左边框+width+右内边距+右边框高度一样–3、元素空间的宽度和高度宽
复制链接

扫一扫

专栏目录