前端——css学习（二）

最新推荐文章于 2023-04-11 20:12:02 发布

qifengrulin

最新推荐文章于 2023-04-11 20:12:02 发布

阅读量834

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/yangyelinmei/article/details/116523063

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、浮动

用法：

box {
	float:left;/*向左浮动*/
	float:right;/*向右浮动*/
}

未使用浮动时
使用浮动时

（一）性质

1.浮动的元素脱标

所谓脱标，就是脱离标准流
例如：
在这里插入图片描述
这里红色的盒子脱离了标准流，所以绿色的盒子变成了第一个元素；
并且
一个盒子一旦浮动了，那么这个盒子就可以设置高度和宽度，并且可以与其他浮动的元素并排，不管这个盒子浮动前是块级元素还是行内元素；

2.浮动的元素相互贴靠

在这里插入图片描述

在这里插入图片描述

由上我们可以看到，当浏览器空间足够时，红绿蓝可以在同一行，当不够时，后面的元素会移到下一行；

3.浮动的元素具有“字围”效果

例如
在这里插入图片描述
浮动元素可以挡住盒子，但不能挡住文字；

4.收缩

如果没有设置width，则浮动的元素会自动收缩成内容的宽度；
未设置宽度时
在这里插入图片描述
设置宽度时

补充

当一个大盒子为标准的时，盒子里面两个小盒子的宽度之和必须小于大盒子的宽度，否则第二个小盒子就会从大盒子中掉出来
在这里插入图片描述

注意点

一个大盒子中如果有多个小盒子，当一个小盒子浮动时，其他小盒子也要跟着浮动，以免引发覆盖问题；
网页设计时，常使用标准流的父元素上下排列，然后用浮动的盒子左右排列
浮动只对后面的标准流元素有影响，对前面的标准流元素没有影响
【理解，浮动的元素可以理解为第二图层，然后前面的标准流元素有两层，所以没有影响，后面的标准流元素只有一个图层，所以浮动的元素可以对后面的标准流元素造成影响】

（二）浮动的清除

清除浮动，就是清除浮动与浮动的影响
例如
在这里插入图片描述

上面的li全部贴靠在了一行里
如此来说，我们就要清除两个ul之间的浮动所带来的的影响

1.给浮动元素的祖先元素添加高度

上述代码中，由于div的高度为零，撑不起一个容器，导致浮动元素没有办法在内部进行正确的浮动；
当给与div一个高度后，就可以撑起一个容器，但要注意的是，高度不够时依旧会出现不正常的现象；
并且在实际应用中，很少使用height，因为内容也会撑大盒子；
例如
在这里插入图片描述

2.clear:both;

使用clear:both;这个属性：
在这里插入图片描述
clear是清除，both意味着左浮动右浮动都清除
但这会使它所在的标签的margin属性失效；

3.隔墙法

上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果。
在这里插入图片描述

内墙法

在div盒子内设置一堵墙，使得div中的浮动元素可以撑开盒子；
在这里插入图片描述
与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。
优点：通俗易懂，方便
缺点：添加无意义标签，语义化

4.overflow:hidden;

overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。
overflow:hidden;本意为清除到盒子外的文字内容
一个大盒子本来不能被里面浮动的小盒子撑开，但加了overflow:hidden;属性就可以被撑开了；
例如
在这里插入图片描述
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

5.使用::after伪元素清除浮动

用法：

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box1{
            border: 10px red solid;
        }
        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
其中，使用::after时，需要对祖先元素使用。
并且

        祖先元素的类名::after{
            content: '';
            display: block;
            clear: both;

是必备的；
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

6.双伪元素清除浮动

语法

        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

在css文件中写上上述代码，之后在祖先元素中直接加入clearfix这个类就可以同时解决高度塌陷和外边距重叠的问题

二、定位

定位是一种更加高级的布局手段
通过定位可以将元素摆到页面的任何位置
使用position属性来设置定位
可选值：
static 默认值：元素是静止的，没有开启定位；
relative：开启元素的相对定位；
absolute：开启元素的绝对定位；
fixed：开启元素的固定定位；
sticky：开启元素的粘滞定位；

1.静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2.相对定位（relative）

position:relative;来开启相对定位；

特点：

1、元素开启相对以后，如果不设置偏移量，则元素不会发生任何变化；

偏移量（offset）：当元素开启相对定位后，可以通过偏移量来设置元素位置；
可选值：
top：定位元素和定位位置上边的距离；
bottom：定位元素和定位位置下边的距离；
left：定位元素和定位位置左边的距离；
right：定位元素和定位位置右边的距离；
通常情况下，只会使用top与bottom属性的一个，同样的，也只会使用left与right属性的一个；

2、相对定位是参照于元素在文档流中的位置进行定位的
即：相对于元素未设置任何偏移量的位置为原点；

3、相对定位会提升元素的层级；

4.相对定位不会使文档脱离文档流；

5、相对定位不会改变元素的性质，即行元素还是行元素，块元素还是块元素；

3.绝对定位

position:absolute;属性开启绝对定位；

特点：

1、元素开启相对以后，如果不设置偏移量，则元素的位置不会发生任何变化；

2、开启绝对定位后，元素会从文档流中脱离；

3、开启绝对定位后会改变元素的性质，行内元素变成块元素，块的宽高被内容撑开；

4、开启绝对定位后会使元素提升一个层级；

5、绝对定位元素是相对于其包含块进行定位的；

包含块（containing block）
1、正常情况：
包含块就是离当前元素最近的祖先块元素；
2、开启绝对定位元素的包含块；
包含块就是离他最近的开启定位的祖先元素；
如果所有的祖先元素都没有开启定位，则相对根元素进行定位；

4.固定定位：

position:fixed;属性开启固定定位；

特点：

固定定位也是一种绝对定位，所以固定定位大部分特点都和绝对定位一样

唯一不同的是固定定位永远参照浏览器的视口进行定位

固定定位的元素不会随着网页的滚动条滚动
即：一直存在网页的某一位置；

5.粘滞定位：

position:sticky;属性来开启粘滞定位；

特点：

粘滞定位特点和相对定位特点基本一样

不同的是粘滞定位可以在元素到达某一位置时将其固定

缺点：支持的环境不多；【Chrome56，Edge16支持】【IE不支持】；

qifengrulin

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端——css学习（二）

一、浮动用法：box { float:left;/*向左浮动*/ float:right;/*向右浮动*/}未使用浮动时使用浮动时（一）性质1.浮动的元素脱标所谓脱标，就是脱离标准流例如：这里红色的盒子脱离了标准流，所以绿色的盒子变成了第一个元素；并且一个盒子一旦浮动了，那么这个盒子就可以设置高度和宽度，并且可以与其他浮动的元素并排，不管这个盒子浮动前是块级元素还是行内元素；2.浮动的元素相互贴靠由上我们可以看到，当浏览器空间足够时，红绿蓝可以在同一行，当不
复制链接

扫一扫