前端学习day05-CSDN博客

本文链接：https://blog.csdn.net/weixin_68489142/article/details/131647325

设置内联块元素（行内块元素）

display:inline-block;

它的本质是对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方法

原因：两个内联块元素之间键入了回车，回车也是一个字符，他的大小跟父标签的font-size有关

解决办法：

1.去掉回车键

2.设置他们的父元素的大小为0

注意：字体大小可以被传递到子元素上的

基础选择器

1.通配选择器

*表示通配符，可以匹配任何标签

css内容

}

2.标签名选择器

E{css内容}给所有标签名为E的元素设置css样式

3.类名选择器

.类名{css内容}

使用的时候需要在标签上绑定css="类名"如果有多个类名，使用空格隔开，类名最好不要超过五个

4.id选择器

#id名{css内容}

在一个页面上，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id

5.群组选择器

如果多种选择器所表达的css内容是相同的则可以把他们写成群组选择器

.wp,#abc,div {css内容}

<!-- 通配选择器 -->
    <style>
        *{
            color: #666;
        }
        /* 标签名选择器 */
        div{
            border: 1px #f00 solid;
        }
        span{
            font-size: 30px;
            color :#f0f
        }
        /* 类名选择器 */
        .mu-lan1{
            background: rgba(255,0,0,0.3);
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
        /* id选择器 */
        #abc{
            font-size: 40px;
            color: #04be02;
        }
        #book{
            font-size: 80px;
            background-color: #ff0;
        }
        /* 群组选择器 */
        #abc,div,.wp{
            background: rgb(79,50,50);
        }

1.后代选择器

E M { css 内容 } 通过E选择器设置E中的M选择器的css内容，M可以是E的子级，也可以是E的后代中的某一个选择器

2.父子选择器

E>M { css内容 }通过E选择器找到E选择器的子级M选择器，设置css内容

3.兄弟选择器

E~M {css内容}通过E选择器找到该元素之后的所有选择器名为M的兄弟元素，并设置css样式

4.相邻兄弟选择器

E+M {CSS内容}通过选择器E找到该元素之后第一个兄弟元素M，并且对M设置css样式

<style>
        /* 后代选择器 */
        ul li {
            border: 1px #f00 solid;
        }
        ul span {
            font-size: 30px;
        }
        /* 父子选择器 */
        ul>li {
            background: #ccc;
        }
        ul>li>span {
            color: #04be02;
        }
        ul>li>div {
            color: aqua;
        }
        /* 兄弟选择器 */
        .f~li {
            height: 50px;

        }
        /* 相邻兄弟选择器 */
        .f+li {
            height: 40px;
            color: #ff0;
        }
    </style>

a的伪类

伪类，是css系统创建好的内部的类，用来对标签的某一个时机设置的样式

link:初始时候的状态

visited：点击之后的状态

hover：鼠标悬浮时候的状态

active：鼠标按下不松手时候的状态

顺序是 l -> v -> h -> a(先爱后恨)

ie8以后，任何标签都可以添加:hover 伪类

可以根据hover触发元素本身，以及通过元素能找到的元素的变化

什么时候要考虑选择器的优先级？

不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值

选择器优先级的强弱顺序：

1.!important 100000

2.行间样式在标签上添加style属性 10000

3.id选择器 1000

4.类名选择器，伪类选择器，属性选择器 100

5.元素（标签名）选择器，伪元素选择器 10

6.通配符选择器 1

7.系统默认提供的css属性 0

假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小既是权重的大小

如果他们的值相同，后来者居上

 <style>
        #abc,#abc1 {
            background: #04be02;
        }
        .wp{
            width: 200px;
            height: 200px;
            background: #f60 !important;
        }
        .wp1{
            width: 200px;
            height: 200px;
            background: #ccc;
        }
        .wp2{
            
            background: #00f;
        }
        /* 具有类名txt的span标签 */
        span.txt {
            color: rgb(18,93,190);
        }
        .wp2 span {
            color: #ff0;
        }
        span{
            color: #f00;
        }
    </style>

盒模型：在HTML中每一个标签都具有一个盒模型

盒模型的组成部分：Content(内容)，padding(内边距)，

border(边框)，margin(外边距)

Cotent:标签元素内容，一般自己定义宽和高，或者由子元素的内容撑开

padding：设置元素内容到元素边框之间的距离

border：指的是元素的边框

margin：设置当前元素到相邻元素之间的距离

设置内边距

padding-top:num;设置上边距

padding-right:num;设置右边距

padding-bottom:num;设置下边距

padding-left:num;设置左边距

合写：

padding：上右下左;

左=右上!=下

padding：上右下;

左=右上=下

padding:上右;

左=右=上=下

padding：上;

margin与padding一样

<style>
        .wp {
            width: 200px;
            height: 200px;
            background: #f60;
            /* 分开设置padding */
            padding-top: 20px;
            padding-left: 20px;
            /* 合写padding */
            padding:20px 30px 20px 60px;

        }
    </style>