前端学习小白打卡4

最新推荐文章于 2024-08-14 15:19:20 发布

白潏

最新推荐文章于 2024-08-14 15:19:20 发布

阅读量47

点赞数

分类专栏：前端文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_65719034/article/details/131650708

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css特性
优先级
不同选择器具有不同的优先级优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式
继承<通配符选择器（*）<标签选择器<类选择器<id选择器<行内样式<!important
作用域越广优先级越低
!important 写在属性值后面，分号的前面
！important不能提升继承的优先级，只要是继承优先级最低
实际开发不建议用important，！important把优先级提升到最高

！important 不能给继承的添加，（无效）自己有样式就无法继承父类

权重叠加计算
如果是复合选择器需要通过权重叠加计算方法，判断哪一个优先级最高
（0,0,0,0）
第一个0
第一级行内样式的个数
第二个0
第二级 id选择器的个数
第三个0
第三级类选择器的个数
第四个0
第四级标签选择器的个数

先比较第一级，若相同就第二级，依次往下若全部相同则比较层叠性，谁在下面用谁

都是继承，看哪一个父级高
！important如果不是继承则权重最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* (0,1,0,1) */
    div #one{
        color: orange;
    }
    /* 0,0,2,0 */
    .father .son
    {
        color: skyblue;
    }
/* 0,0,1,1 */
    .father p{
        color: #000;
    }
    /* 0,0,0,2 */
    div p{
        color: aliceblue;
    }

</style>
<body>
    <div class="father">
        <!-- 橙色 -->
        <p class="son" id="one">dasdas</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid #000;
            padding: 20px;
            background-color:coral;
            box-sizing: border-box; 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

PxCook的基本使用
png 设计

盒子模型
页面中的每一个标签都可以看做一个盒子通过盒子的视角更方便进行布局
浏览器渲染网页时，会将网页中的元素看做一个个矩形
css中规定每个盒子由：内容区域（content）内边距区域（padding）边框区域（border）外边距区域（margin）
构成

内容用width和height设置数字+px

border 边框 bd 复合属性
border ：10px solid red（3个值 solid是线条种类）
solid 实线 dashed 虚线 dotted 点线
单向设置只给盒子的某个方向单独设置边框
border-方位名词
单独的属性
border-width 边框粗细数字+px
border-style 边框样式
border-color 颜色

布局从外到内

内边距padding
padding属性可以当做复合属性使用，表示单独设置某个方向的内边距
4值
padding后面上右下左
3值
上左右下
2值
上下
左右
多值写法，顺时针方向转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color:aquamarine;
            border: 2px solid #000;
            padding: 30px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        yi
    </div>
</body>
</html>

宽度自动撑开
文字利用padding增加间距

对于盒子的撑大可以自动内减
给盒子设置box-sizing ：border-box
浏览器会自动计算多余大小，自动从内容减去

*{
margin:0;
padding:0;
}

清楚默认内外边距（需要）

版心指网页的有效内容
版心居中
margin：0 auto；

去除列表的符号

ul{
        list-style: none;
     }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            padding: 0 16px;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover
        {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新狼</a>
        <a href="#">111111111111111奥</a>
        <a href="#">无</a>
        <a href="#">11111111111111111111器</a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;  
        box-sizing: border-box;
     }
     .news{
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 50px auto;
        padding: 42px 30px 0;
     }
     .news h2{
        border-bottom: 1px solid #ccc;
        font-size: 30px;
        line-height: 1em;
        padding-bottom: 5px;
     }
     ul{
        list-style: none;
     }
     .news li{
        height: 50px;
        border-bottom: 1px solid #ccc;
        padding-left: 28px;
        line-height: 50px;
     }
     .news a{
        text-decoration: none;
        color: #666;
        font-size: 18px;
        
     }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章</h2>
        <ul>
            <li><a href="">lili</a>     
            </li>
            <li>
                <a href="">lili</a>
            </li>
            <li>
                <a href="">lili</a>
            </li>
            <li>
                <a href="">lili</a>
            </li>
            <li><a href="">lili</a>
            </li>
        </ul>
    </div>
</body>
</html>

外边距折叠现象
合并现象
场景：垂直布局的块级元素上下的margin合并
最终两者的距离为margin的最大值
解决：只给一个盒子设置margin就行

塌陷现象
场景：互相嵌套的块级元素子元素的margin-top会作用在父元素上
结果：导致父元素一起向下移动
解决
1
给父元素设置 border-top或padding-top（分隔父子元素的margin-top）
2
给父元素设置 overflow：hidden
3
转换成行内块元素
4
设置浮动

行内元素的内外边距问题（垂直）
即行内标签的paddding/margin-top bottom不生效
可以用line-height解决

结构伪类选择器
作用：根据元素在html中结构关系查找元素
优势：减少对html类的依赖，保持代码整洁
场景：常用于查找父级选择器中的子元素

选择器
E:first-child{} 匹配父元素中第一个子元素，并且是E元素
E:last-child{} 匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){} 匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素
n可以是公式
偶数 2n even
奇数 2n+1 2n-1 odd
前五个 -n+5
找到从第五个往后 n+5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <style>
        li:first-child
        {
            background-color: #ffa;
        }
        li:nth-child(3)
        {
            background-color: #392c2c;
        }

      </style>
</head>
<body>
    <ul>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <style>
        li:first-child
        {
            background-color: #ffa;
        }
        li:nth-child(3)
        {
            background-color: #392c2c;
        }
        li:nth-child(4n)
        {
         background-color: #f20000;   
        }
      </style>
</head>
<body>
    <ul>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
        <li>zheshi1</li>
    </ul>
</body>
</html>