【CSS】基础（三）

最新推荐文章于 2024-10-04 13:52:58 发布

Listener-1379

最新推荐文章于 2024-10-04 13:52:58 发布

阅读量117

点赞数 2

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45965358/article/details/119545201

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS中的浮动布局，包括常见布局模式、浮动的作用与语法，以及浮动元素的特性与清除方法。接着介绍了伪元素和伪类的应用，如`before`和`after`以及链接伪类。最后详细阐述了定位的概念，包括静态、相对、绝对和固定定位，边偏移和`z-index`的使用，以及定位的扩展技巧。内容涵盖网页布局中的关键知识点，有助于提升CSS布局能力。

摘要由CSDN通过智能技术生成

1.浮动

1.1常见的网页布局

（1）普通流（标准流）
在这里插入图片描述
（2）浮动

（3）定位

1.2 浮动的作用

在这里插入图片描述

1.3 浮动的语法

选择器{
	float: 属性值;
}

属性值	描述
none	元素不浮动
left	元素左浮动
right	元素右浮动

1.4 浮动的特性

（1）浮动元素会脱离标准（脱标）
在这里插入图片描述
（2）浮动元素会一行内显示并且元素顶部对齐

（3）浮动元素会具有行内块元素的特性

在这里插入图片描述

1.5 浮动元素经常和标准父级元素搭配

在这里插入图片描述

1.6 浮动布局注意点

在这里插入图片描述

1.7 清除浮动的方法

1.7.1 额外标签法（隔墙法）

在这里插入图片描述

1.7.2 父级添加overflow属性

在这里插入图片描述

1.7.3 父级添加after属性

.clearfix: after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix: {
	/*IE 6, 7专有*/
	*zoom: 1;
}

在这里插入图片描述

1.7.4 父级添加双伪元素

.clearfix: before, .clearfix: after {
	content: "";
	display: table;
}
.clearfix: after {
	clear: both;
}
.clearfix: {
	/*IE 6, 7专有*/
	*zoom: 1;
}

在这里插入图片描述

2.伪元素和伪类

2.1伪元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
        .style1:before{
            content: "my before";
            background-color: powderblue;
        }
        .style2:after{
            content: "my after";
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <h1 class="style1">Hello World</h1><br/>
    <h2 class="style2">Welcome to CSS</h2>
</body>
</html>

在这里插入图片描述

2.2伪类

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
        .style1:focus{
            background-color:red;
        }
    </style>
</head>
<body>
    <label>
        <input class="style1" type="text" value="Hello World"/>
    </label>
</body>
</html>

鼠标放到文本框中时背景变红色。
在这里插入图片描述

2.3伪元素和伪类的区别

在这里插入图片描述

2.4 a标签的伪类

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        a:link{
            color: red;
        }
        a:visited{
            color: yellow;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#/demo1">demo1</a>
    <a href="#/demo2">demo2</a>
    <a href="#/demo3">demo3</a>
    <a href="#/demo4">demo4</a>
</body>
</html>

在这里插入图片描述

2.5浮动与行内元素

在这里插入图片描述

3.定位

3.1 定位的作用

定位可以使得某个盒子在某个盒子内自由的移动或者固定在某个盒子的某个地方，并且可以压住某个盒子。

3.2 定位组成

定位 = 定位模式 + 定位偏移

定位模式：用于指定一个元素在文档中的定位方式。
定位偏移：用于指定该元素的最终位置。

3.3 定位模式

通过元素的position属性来设置。

值	模式
static	静态定位
relative	相对定位
absolution	绝对定位
fixed	固定定位

在这里插入图片描述

3.3.1 静态定位

定义：静态定位就是元素的默认定位方式，无定位的意思。

语法：css选择器 {position : static;}

特点：（1）静态定位按照标准流的特性摆放，没有边偏移。

3.3.2 相对定位

定义：相对定位就是元素在移动位置的时候，是相对于它原来的位置来说的。

语法：css选择器 {position : relative;}

特点：（1）它是相对于自己原来的位置来移动的。

（2）原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

3.3.3 绝对定位

定义：绝对定位是元素在移动位置的时候，是相对于祖先元素来说的。

语法：css选择器 {position : absolution;}

特点：（1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。

（2）如果祖先元素有定位（绝对，相对，固定定位），则以最近的有定位的祖先元素为基准。

（3）绝对定位不再占有原来的位置

3.3.4 固定定位

定义：固定定位是元素固定于浏览器可视区的位置。主要使用在浏览器页面滚动时元素位置不会改变。

语法：css选择器 {position : fixed;}

特点：

（1）以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。

（2）固定位置不再占有原来的位置。

3.4 边偏移

边偏移就是定位的盒子移动到最终位置。

边偏移属性	描述
top	顶部偏移量 ,定义元素相对于其父元素上边线的距离
bottom	底部偏移量 ,定义元素相对于其父元素下边线的距离
left	左部偏移量 ,定义元素相对于其父元素左边线的距离
right	右部偏移量 ,定义元素相对于其父元素右边线的距离