CSS个人小结-2022-05-06-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37567841/article/details/124619463

这篇博客总结了CSS的选择器用法，如:nth-of-type()，以及各种布局技巧，包括居中、块级和行内元素、display属性、浮动与清除、定位（relative、absolute、fixed）以及背景透明度的设置。还介绍了使用overflow和伪类:after来实现虚拟DIV和清除浮动。此外，探讨了图层显示的z-index应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS学习小笔记

2022-05-06 完结散花!!!

选择器

div:nth-of-type(5) {
        /*
    大体框架里的div选择
    
    div-div不行
    */
        background-color: #eeff00;
    }

Div居中

margin: 0,auto;

块级元素

h1~h6 p div 列表...

行内元素

span a img strong...

display

block 块
inline 行内
inline-block 块可以内为连行
none

float 浮动

float:left;
      right
...

clear 清除环绕

clear:left;
right
both不允许某个方向有浮动元素

虚拟DIV

overflow

父级添加 overflow:hidden;

父类添加伪类: after

#id:after{
    content:'';//页面中的小一块
    display:block;
    clear: both;
    
}

相对定位

position: relative;
top:
left:
right:
bottom:
/*相对于原来位置的偏移*/

绝对定位

position: absolute;
/*

相对于父级元素偏移
-默认相对于浏览器偏移
-给这个元素的父级添加
position: relative;
就可以实现相对于父级元素偏移
top:
left:
right:
bottom:
不能超出父元素
*/

固定定位

        position: fixed;
        right: 0;
        bottom: 0;

/*
固定位置
下面的上下，左右 必须有一对定义
top:
left:
right:
bottom:


*/

背景透明度


opacity: 0.5;
/*设置透明度
原来:1
*/



        
/*      过滤器:
      filter: opacity(0.5);*/

图层

     /*图层更大的会在上层显示

默认: 0*/
        z-index: 99999;