一分钟复习完CSS基础知识

逃离我推掉我的手 2023-10-04 19:31 55阅读 0赞

### 一、css的三大特性 ###

/* 继承性 */
    div{
        /* 子承父业 */
        /* 常见属性：
        color 
        font
        text-indent\text-align
        line-height
        ...*/
        color: aliceblue;
    
        /* 继承应用场景 */
            /* 1.ul设置去圆点
            2.body设置字体 */
    
        /* 继承失效 */
            /* 1.a color失效
            2.h font-size失效
            3.div高度不能继承，但是宽度有类似继承的效果 */
    }
    
    /* 层叠性 */
    div{
        /* 特性 */
            /* 1.给同一个标签设置不同的样式，此时样式会层叠叠加，共同作用在标签上
            2.给同一个标签设置相同的样式，样式覆盖，写在最后的样式生效 */
            /* 注意：样式冲突时，选择器优先级相同时，通过层叠性判断结果 */
        color: aliceblue;
    }

### 二、css引入方式 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <link rel="stylesheet" href="">
        
        <style>
            
        </style>
    </head>
    <body>
        
        <div style="width: 10px;"></div>
    </body>
    </html>

### 三、选择器 ###

#### 1.基础选择器 ####

/* 标签选择器 */
            div{
                width: 20px;
            }
    
            /* 类选择器 :类名：数字、字母、下划线、中划线组成，不能以数字、中划线开头*/
            .a{
                width: 20px;
            }
    
            /* id选择器：id只能有一个 ,配合js使用*/
            #id{
                width: 20px;
            }
    
            /* 通配符选择器 */
            *{
                margin: 0px;
                padding: 0px;
            }

#### 2.伪元素 ####

/* 伪元素 :一般页面中非主体内容可以使用伪元素*/
    div::before{
        /* 在父元素内容的最前添加一个伪元素 */
        content: '';
    }
    
    div::after{
        /* 在父元素的最后添加一个伪元素 */
        content: '';
    }
    
    /* 
        1.必须设置Content属性才能生效
        2.伪元素默认是行内元素
    */
    
    /* 
        区别:
        元素:html设置的标签
        伪元素:由css模拟出的标签效果
    */

#### 3.结构伪类选择器 ####

/* 查找单个 */
    div:first-child{
        font-size: 12px;
    }
    
    div:last-child{
        font-size: 12px;
    }
    
    div:nth-child(2){
        font-size: 12px;
    }
    
    /* 从后数 */
    div:nth-last-child(1){
        font-size: 12px;
    }
    
    /* 查找多个 */
    /* 偶数 */
    div:nth-child(2n){
        font-size: 12px;
    }
    
    div:nth-child(even){
        font-size: 12px;
    }
    
    /* 奇数 */
    /* 2n+1 2n-1 odd */
    
    /* 找到前五个 */
    /* -n+5 */
    
    /* 找到从第5个往后 */
    /* n+5 */
    
    /* 先通过该类型找到符合的一堆子元素,然后在这一堆子元素中数个数 */
    div:nth-of-type(3){
        font-size: large;
    }
    
    /* 区别 */
        /* 
            nth-of-type 一定是前面的类型的
            nth-child 从前面那个类型数第几个,不一定是同类型*/

#### 4.选择器进阶 ####

/* 复合选择器 */
        /* 后代选择器 */
        div p{
            font-size: small;
        }
    
        /* 
         子代选择器 
         只包含儿子
        */
        div>p{
            font-size: small;
        }
    
    /* 并集选择器 */
        /* 通常一行写一个，提高代码可读性 */
        div,p{
            font-size: small;
        }
    
    /* 交集选择器 */
        /* 又是1又是2，标签选择器写在最前面 */
        p.red{
            font-size: larger;
        }
    
    /* Emmet语法 （html）*/
        /* 
        1. 标签
        2. .类名(div+类名)
        3. #id名（div+id）
        4. p .red#one (指定标签 类加id)
        5. ul>li
        6. ul>li{li内容}
        7. ul>li*3
        */
    
    /* hover伪类选择器 */
        a:hover{
            color: #000;
        }

### 四、字体 ###

div {
                /* 默认字号16px */
                font-size: 12px;
                /* 正常400，加粗700 */
                font-weight: normal;
                font-weight: bold;
                /* 倾斜 */
                font-style: italic;
                /* 字体：具体字体1，具体字体2，具体字体3.。。从左到右查，未安装就显示下一个，都不支持就是默认字体，多个单词推荐引号包裹 */
                font-family: 'Courier New', Courier, monospace;
                /* 无衬线字体 :网页*/
                /* 衬线字体 :报刊书籍*/
                /* 等宽字体 :编码*/
    
                /* 只能省略前两个,如果省略了相当于设置了默认值 */
                font:style weight size family;
            }

### 五、文本样式 ###

/* 文本缩进 */
                text-indent: 2em;
                /* 两个字的大小 */
    
                /* 水平对齐方式 */
                text-align: center;
                /* span a input img都可以居中*/
                margin: 0 auto;
                /* 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度 */
                /* div p h(大盒子)水平居中 */
    
                /* 行高 */
                line-height: 23px;
                /* 
                取值：1.数字+px 2.倍数（font-size的倍数）
                应用：
                1.让单行文本垂直居中，可以设置line-hight：文字父元素高度
                2.网页精准布局时，会设置line-height：1 取消上下间距
                设置了行高和font连写注意！
                行高=文本高度加上下间距
                 */
                font: italic 700 20px/400px 楷体;
    
                /* 文本修饰 */
                /* 下划线 */
                text-decoration: underline;
                /* 删除线 */
                text-decoration: line-through;
                /* 上划线 */
                text-decoration: overline;
                /* 无修饰 */
                text-decoration: none;

### 六、颜色取值 ###

> 颜色取值：关键字、rgb、rgba、十六进制
> 
> 默认：rgba(0,0,0,0),transparent
> 
> 一般先设置背景色，看清盒子的位置
> 
> 背景图可以省略引号
> 
> 背景图迷人是在水平和垂直方向平铺的
> 
> 不能撑开图片

### 七、背景 ###

.color{
                width: 400px;
                height: 400px;
                /* background-color: aliceblue; */
                /* 背景透明 */
                background-color: rgba(0, 0, 0, 0);
                background-color: transparent;
            }
    
            .image{
                background-image: url('');
            }
    
            .repeat{
                background-repeat: no-repeat;
                /* background-repeat:repeat;
                background-repeat:repeat-x;
                background-repeat:repeat-y */
            }
    
            .position{
                background-position: 1px 1px;
                /* 水平方向(left center right top) 垂直方向(top center bottom) 
                像数值 (0,0)左上角 */
            }
    
            .write{
                background: color image repeat position;
            }

#### img和背景图的区别 ####

> img有默认宽高
> 
> 背景图是装饰css样式，不能撑开div

### 八、优先级 ###

/* 优先级 */
    /* 继承<通配符选择器<标签选择器<类选择器id选择器 <行内样式<!important*/
    /* !important
        1.写在属性后面，分号前面
        2.不能提升继承优先级，只要是继承优先级最低！
        3.实际开发中不建议使用
    */
    
    /* 权重叠加计算 */
    /* （第一级（行内样式的个数），第二级（id选择器的个数），第三级（类选择器的个数），第四级（标签选择器的个数）） */
    /* 如果所有数字都相同，则优先级相同，比较层叠性（谁在下面谁说得算） */

### 九、盒子模型 ###

/* 盒子模型 */
        /* 盒子模型的介绍
            盒子模型由：内容区域、内边距区域、边框区域、外边距区域构成
        */
    
    
        /* 内容区域的宽度和高度
        */
        div{
            width: 10px;
            height: 10px;
            /* 设置的是内容区域的宽高 */
    
            /* 边框 */
            border-width: 1px;
            /* 实现 */
            border-style: solid;
            /* 虚线 */
            border-style: dashed;
            /* 点线 */
            border-style: dotted;
            border-color: aliceblue;
            border: 10px solid black;
        }
    
        /* 盒子实际大小初级计算公式 */
            /* 宽=左边框+内容宽度+右边框 */
    
        /* padding介绍 */
        div{
            /* 上下左右 */
            padding: 10px;
            /* 上下 左右 */
            padding: 10px 20px;
            /* 上 左右 下 */
            padding: 10px 20px 30px;
            /* 上 右 下 左 */
            padding: 10px 20px 30px 40px;
        }
    
        /* 盒子实际大小中级计算公式 */
            /* 宽=左边框+内容宽度+右边框    +左padding+右padding*/
    
        /* 不会撑大盒子的特殊情况 （块元素）*/
            /* 
                1.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度 
                2.此时给子盒子设置左右padding或者左右border，此时不会撑大子盒子
            */
    
        /* 盒模型（自动内减）：怎么取消盒子被撑大 */
            /* 1.手动内内减（不推荐）
                自己计算好
    
               2.自动内减
               box-sizing:border-box;
               浏览器会自动计算多余大小，自动在内容中减去
             */
    
    
    
        /* margin介绍 */
        div{
            /* 上右下左 */
            margin: 10px;
            /* 上下 左右 */
            margin: 10px 20px;
            /* 上 左右 下 */
            margin: 10px 20px 30px;
            /* 上 右 下 左 */
           margin: 10px 20px 30px 40px;
        }
    
        /* 清除默认内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
    
        /* 外边距正常情况 */
            /* 
            场景：水平布局的盒子，左右的margin正常，互不影响
            结果：最终两者距离为左右margin的和
             */
    
        /* 外边距折叠现象 */
            /* 1.合并现象
                场景:垂直布局和块级元素，上下的margin会合并 
                结果：最终两则距离为margin的最大值
                解决方法：避免就好
                    只给其中一个盒子设置margin即可
            
                2.塌陷现象
                场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
                结果：导致父元素一起往下移动
                解决方法：
                    1.给父元素设置border-top 或者 padding-top (分隔父子元素的margin-top)
                    2.给父元素设置overflow:hidden
                    3.转换成行内块元素
                    4.设置浮动
                */
    
        /* 行内元素的margin和padding无效情况 */
            /* 场景：给行内元素设置margin和padding时
                结果：
                    1.水平方向的margin和padding布局中有效！
                    2.垂直方向的margin和padding布局中无效！ */