CSS基础学习（四）

最新推荐文章于 2024-07-18 15:09:36 发布

Jenny_Ghost

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量611

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/Jenny_Ghost/article/details/120781337

版权

一、结构伪类选择器

通过使用结构伪类选择器，可以根据元素在HTML中的结构关系查找元素，常用于查找父级选择器中的子元素。

1.查找单个

查找第一个子元素，并且为li标签 ,两个条件要同时满足。

 li：first-child{
     background-color: bule;           
}//找到第一个子元素并且为li标签

li：nth-child(4){
    background-color:bule;
}//找到第四个子元素并且为li标签
li：nth-last-child(4){
    background-color:bule;
}//找到倒数第四个子元素并且为li标签

2.查找多个

要想准确查找子标签中的孙标签

li：first-child  a{
     background-color: bule;           
}//找到第一个子元素li标签中的a标签

二、伪元素

使用伪元素来表示网页中的的非主体内容，他与HTML设置出来的标签不同，伪元素是CSS模拟出来的标签效果

 <style>
        .father{
            width: 300px;
            height: 400px;
            background-color: blue;
        }
        .father::before{
            /*必加属性*/
            content: "伪元素";
            /* 伪元素是一个行内元素是设置不了宽高的 */
            /* 转换显示方式 */
            display: block;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="father"></div>
</body>

before是在父元素内容最前添加一个伪元素

after是在父元素内容最后添加一个伪元素

三、标准流

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

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

作用：进行网页的布局，让垂直布局的盒子变成水平布局

属性名：float

属性值：left、right

浮动的特点

1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高

6.浮动元素不能水平居中。

五、清除浮动

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

清除浮动的方法

1.直接给父元素设置高度；

2.额外标签法：

步骤：1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置 clear:both

    <style>
        .father{
            width: 300px;
            
            background-color: blue;
        }
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .clear{
            clear:both;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="clear"></div>
    </div>
</body>

3.单伪元素清除法

    <style>
        .father{
            width: 300px;
            
            background-color: blue;
        }
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::after{
            content:'';
            display:block;
            clear:both;
            height:0;
            visibility:hidden; 
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

4.双伪元素清除法

<style>
        .father{
            width: 300px;
            
            background-color: blue;
        }
        .son{
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .clearfix::before,
        .clearfix::after{
            content:'';
            display:table;
        }
        .clearfix::after{
             clear:both;
        }
        
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</body>

与单伪元素清除法不同的是，双伪元素的after用来清除浮动，before用来解决盒子上部margin的塌陷。

5.给父元素设置overflow:hidden

直接给父元素添加overflow：hidden

六、定位

通过使用定位，可以让元素摆放在网页的任意位置，一般用于盒子之间的层叠情况

1.定位的基本使用

属性名：position

属性值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）

.box{
    position:absolute;
    top:300px;
    left:300px;
}

①相对定位

每次定位是相对于自己之前的位置进行移动

代码：position：relative；

②绝对定位

相对于非静态定位的父元素进行定位移动，相对于整个网页来移动的

代码：position：absolute；

③字绝父相

可以让子元素相对于父元素进行自由移动

含义：子元素绝对定位、父元素相对定位

因为相对定位在布局中是占位置的，所以使用相对定位不会使网页的布局变得混乱。

特殊使用：让子元素在父元素中水平居中

.father{
    position:relative;
    top:300px;
    left:300px;
}

.box{
    position:absolute;
    left:50%
    margen-left:-100
    width:200px;
}
/*或者*/

.box{
    position:absolute;
    left:50%
    transform:translateX(-50%)
    width:200px;
}

④固定定位

他会相对于浏览器进行定位移动，在上下移动中是不会随着网页的移动而移动的，被固定在屏幕中的某一位置。

代码：position：fixed

⑤元素的层级关系

标准流<浮动<定位，

在定位中，绝对、相对、固定的层级相同，但是写在下面的会覆盖掉上面的

如何更改定位元素的层级呢？

属性名：z-index

属性值：数字，数字越大层级越高

七、装饰

1.垂直对齐方式

用来解决行内/行内块元素垂直对齐的问题，当图片和文字在一行中显示时，他的底部是不对齐的。

还可以用来解决文本框和表单按钮无法对齐的问题、input和img无法对齐的问题、div文本框无法贴顶的问题……

属性名：vertical-align

属性值：baseline（默认、基线对齐）、top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）

2.光标类型

设置鼠标光标类型在元素上显示的样式

属性名：cursor

属性值：default（默认）、pointer（小手）、text（工字形）、move（十字光标）

3.边框圆角

让盒子的四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

取值：数字+px、百分比

从左上角开始赋值、没赋值的看对角。

3.overflow溢出部分显示效果

溢出部分指的是盒子内容部分所超出盒子范围的区域。控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…

属性值：overflow

常见取值：

4.元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标hover之后元素隐藏

常见属性：

1.visibility: hidden
2.display: none

区别：
1.visibility: hidden 隐藏元素本身，并且在网页中占位置
2.display：none 隐藏元素本身，并且在网页中不占位置

八、链接伪类选择器

用于选中超链接的不同状态

Jenny_Ghost

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习（四）

一、结构伪类选择器通过使用结构伪类选择器，可以根据元素在HTML中的结构关系查找元素，常用于查找父级选择器中的子元素。1.查找单个查找第一个子元素，并且为li标签 ,两个条件要同时满足。 li：first-child{ background-color: bule; }//找到第一个子元素并且为li标签li：nth-child(4){ background-color:bule;}//找到第四个子元素并且为li标签li：...
复制链接

扫一扫