day04

选择器

选择器通俗的理解就是标签的起名方式，以及在样式中生效写法

标签选择器

选用标签名，当做样式生效的一个名字，这就是标签选择器

div{
    
}
span{
    
}
p{
    
}

缺点：所有的同名标签，会执行同一份样式

class选择器

class选择器就是给标签起一个别名(外号)

在开始标签内，使用空格隔开，写入class关键字，把外号写在引号之间

写样式的时候，在class类名前面要加 .

<div class="box">莱斯刘老师 清新 淡雅 高冷</div>

// 样式
.box {
    width: 200px;
    height: 200px;
    border: 5px solid blue;
}

后代选择器

后代选择器，其实就是子子孙孙

后代选择是父元素和子元素之间的选择器使用空格隔开

<div class="box">
<div class="box1">
    莱斯刘老师 清新 淡雅 高冷 11111111
</div>
<div class="box2">
    莱斯刘老师 清新 淡雅 高冷 20220222星期二22 222 222 
</div>
</div>

// 样式  --- 后代选择器
/* box和box1之间的空格 就是后代选择器   */
.box .box1{
    color: red;
}

伪类

伪类其实就是鼠标经过展示的效果

使用方式：

元素:hover{
    // 鼠标经过元素执行的样式代码
}

div:hover{
    border: 2px solid red;
    width: 200px;
    height: 200px;
}

伪类控制元素的出现和消失

// 结构
<div class="box">
        <p>
            dqwdqdqdqqfqwfqwfsdfgyhjul
        </p>
</div>
// 样式  
.box {
    /* 需求：鼠标经过div  显示红色的框，宽度和高度变为200px  */
    width: 100px;
    height: 100px;
    border: 2px solid blue;
    /* display: none; */
}
div:hover{
        border: 2px solid red;
        width: 200px;
        height: 200px;
    }

// 显示后代元素 
/* 需求： 鼠标经过div  显示一个p标签 */
/*  hover后面使用哪个选择器，在于鼠标经过的元素和要显示的元素之间是一种什么关系  
如果是父子关系 需要使用后代选择器  如果是兄弟关系 需要使用兄弟选择器  */
.box:hover p {
    /* 元素是怎么消失 就要让他怎么出现  */
    display: block;
    /* opacity: 1; */
}

浮动

所谓的浮动，就是让你的元素脱离页面的控制，让元素飘起来

浮动是针对元素的，和文本没有关系的

浮动有两种：左浮动( 左对齐 ) 右浮动(右对齐)

使用方式：

元素{
float:left/right // 左浮动( 左对齐 ) / 右浮动(右对齐) 
}

当一个元素有浮动属性的时候，首先会查看前面的兄弟元素是否有浮动属性，如果有浮动属性，就在前面这个元素的后面对齐，如果前面的元素没有浮动属性，就在自己的位置上对齐。

行元素和块元素

行元素不支持宽度和高度，所有的行元素在同一个行展示

块元素支持宽度和高度，另起一行展示

/* 行元素转化成块元素   */
display: block;

/* 把块元素转换成行元素 */
display: inline;

// 行内块元素 是行元素也是块元素 
display:inline-block