前端开发——选择器和CSS浮动

最新推荐文章于 2024-10-19 18:17:00 发布

临渊羡鱼、

最新推荐文章于 2024-10-19 18:17:00 发布

阅读量103

点赞数

分类专栏： css 文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/m0_74304535/article/details/130784903

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一，结构伪类选择器

1，实现

目标：能使用该选择器在HTML中定位元素。
作用：根据元素在HTML中的结构关系查找元素。
优势：减少对HTML的依赖。
场景：常用于查找某父级选择器的子元素。

2，选择器

E:first-child{}	匹配父元素中的第一个子元素，并且为E元素
E:last-child{}	匹配父元素中的最后一个子元素，并且为E元素
E:nth-child{}	匹配父元素中的第几个子元素，并且为E元素
E:nth-last-child（n）{}	匹配父元素中倒数第几个子元素，并且为E元素

E元素即是元素或标签。
n的注意点：1、n为1，2，3，4···。2、n可以组成常见公式

功能	公式
偶数	2n，even
奇数	2n+1,2n-1，odd
找到前五个	-n+5
找到第五个以后	n+5

二，伪元素选择器

1，用处

一般页面中的非主体内容可以使用伪元素。
区别：1，元素是由html设置的标签。2，伪元素是由css模拟出的标签结果。

2，种类

::before 在父元素的最前面添加一个伪元素。
::after 在父元素的最后面添加一个伪元素。
注意：必须有content属性才能生效且伪元素默认为行内属性。
下面看一个例子：

    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            content: '老鼠';
        }
        .father::after{
            content: '大米';
        }
    </style>
</head>
<body>
    <div class="father">爱</div>
</body>
</html>

效果图：

三，标准流

1，标准流的定义

标准流又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了以何种方式排列元素。

2，常见排版规则

①块级元素：从上往下，垂直布局，独占一行。

②行内元素或行内块元素：从左往右，水平布局，空间不够自动换行。

四，体验浮动

1，浮动的作用

使块级标签在一行排列。

2，浮动的代码

float:left;

3，浮动的特点

①会脱离标准流（简称：脱标），在标准流中不占位置。相当于从地面飘到空中。(但属于半脱离，因为盒子脱离文字没有脱离规则)

②浮动元素比标准流高半个级别，可以覆盖标准流中的元素。

③浮动找浮动，下一个浮动的元素会在上一个浮动的元素左右排列。

④浮动的标签默认顶对齐，浮动后可在一行排并设置宽高。

下面是例子：

    <style>
        /* 浮动的标签默认是顶对齐的 */
        /* 浮动后的标签可以在一行排，并设置宽高，即
浮动之后相当于行内块元素但比行内块高级些 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            /* one相当于飘起来了，但半脱离，盒子脱离
标准流，文字没有脱离 */
            margin-top: 10px;
            /* 外边距改变盒子位置 */
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;

        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

效果：

五，清除浮动

1，清除浮动带来的影响

如果子元素浮动了，此时子元素不能够撑开标准流的块级父元素。原因：子元素浮动后脱标—>不占位置。
目的：需要父元素有高度，从而不影响其他网页元素的布局。

2，方法：

①直接加高度（有时不方便）。

②额外标签法：在父元素内容的最后加一个块级元素，给添加的块级元素设置clear：both。缺点：会让html结构变复杂。

③单伪元素清除法(即用伪元素代替额外标签):

1 .clearfix::after{ content:’ ‘; display:block; clear:both; }
2 .clearfix::after{ content:’ '; display:block; clear:both; height:0; visibility:hidden; }(此种写法在网页检查中看不到伪元素。)