web前端第五次作业笔记

menge2333

已于 2023-11-26 15:34:28 修改

阅读量42

点赞数

文章标签：前端笔记

于 2023-11-22 18:07:25 首次发布

本文链接：https://blog.csdn.net/menge2333/article/details/134556787

版权

笔记

CSS权重

*当不同选择器的样式设置发生冲突时，高权重选择器的样式会覆盖低选择器样式

标签选择器：0001

class选择器： 0010

id选择器：0100

伪类选择器：0010

包含选择器的权重等于权重之和

属性选择器：0010

伪元素选择器：0001

内联选择器：1000

auto

div{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            margin: 0 auto; /*水平居中*//*上下不能用auto*/
            /*用auto必须要块链接*/
        }

*margin:0 auto;(水平居中)

上下居中不能用auto

用auto必须要快链接

选择器补充

<style>
        a:hover+div{/*+表示下一个标签*/
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .box1:hover{
            width: auto;
            background-color: blueviolet;
        }
        .box1:hover .box2{/*嵌套关系*/
            width: auto;
            background-color: black;
        }
    </style>
</head>
<body>
    <a href="#"></a>
    <div>mksdd</div>
     <div class="box1">
        <div class="box2"></div>
     </div>
</body>
</html>

a:hover+标签(下一个标签)

.box1:hover .box2(嵌套关系)

外边距

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            border:30px solid pink ;
            /* border+padding+content*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>

 <style>
        div{
            width: 300px;
            height: 300px;
        }
        .box1{
            background-color: pink;
        }
        .box2{
            /*margin-top: 20px;
            margin-bottom: 20px;
            margin-right: 20px;
            background-color: aqua;*/
            margin: 20px;/*上下左右20像素*/
            background-color: aqua;
            margin: 0px 20px;/*上下0 左右20*/
            margin: 0px 20px 80px;/*上0 左右20 下80*/
            margin: 10px 20px 30px 40px;/*上10 右20 下30 左40*/
        }
        .box3{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

margin: 20px;/*上下左右20像素*/

margin: 0px 20px;/*上下0 左右20*/

margin: 0px 20px 80px;/*上0 左右20 下80*/

margin: 10px 20px 30px 40px;/*上10 右20 下30 左40*/

外边距margin塌陷问题

三种解决父盒子塌陷问题：

1.border(加边框)

2.padding: 10px;(加内边距)

3.overflow:hidden;

<style>
        .father{
            width: 800px;
            height: 400px;
            background-color: pink;
            /*border: 1px solid pink;*/
           /* padding: 10px;*/
           overflow: hidden;  /*三种解决父盒子塌陷问题*/
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 100px;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color: rgb(26, 37, 34);
        }
        .son3{
            width: 100px;
            height: 100px;
            background-color: rgba(196, 103, 64, 0.354);
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>

    </div>
</body>
</html>

内边距

div{
            width: 800px;
            height: 150px;
            background-color: pink;
            padding: 20px;
            padding-left: 40px;
            padding-bottom: 100px;
            padding:10px 20px; /*上下10 左右20*/

        }

清楚默认的内外边距

 *{
            margin: 0;
            padding: 0;
        }

轮廓线

<style>
        input{
            /*outline-color: aquamarine;
            outline-style: double;
            outline-width: thin;*/
            outline: none;
        }

    </style>
</head>
<body>
    <input type="text">
</body>
</html>

通常： outline:none

浮动

文字环绕

  <style>
        img{
            float: left;
        }

    </style>

划分区域

<style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        .box2{
            float: left;
            width: 300px;
            height: 300px;
            background-color:black;
        }
        .box3{
            float: left;
            width: 300px;
            height: 300px;
            background-color:brown;
        }
        .box4{
            
            width: 1200px;
            height: 100px;
            background-color:rgb(42, 149, 165);
        }
        /*同样浮动的元素在同一行 （BFC）如果盒子同时左浮动会从左往右依次排列
         浮动可以设置<a> <span> 的宽高
           文字始终会环绕
           浮动的元素会失去原本的位置（脱离文档流）*/

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <p>sgdjsfhjsdfgsdgag</p>
    <div class="box4"></div>
    
</body>
</html>

1.同样浮动的元素在同一行（BFC）如果盒子同时左浮动会从左往右依次排列

2.浮动可以设置<a> <span> 的宽高

3.文字始终会环绕

4.浮动的元素会失去原本的位置（脱离文档流）

clear:both 指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。