web11.21-23笔记

盐焗星球

已于 2023-11-29 23:15:59 修改

阅读量1.1k

点赞数 37

文章标签：笔记

于 2023-11-29 23:10:46 首次发布

本文链接：https://blog.csdn.net/liuxini2251/article/details/134543642

版权

补充：a:hover+div——div是a的下一个元素用+

轮廓线

input{

outline-style

outline-width

outline-color

}

连写：outline:none——去轮廓线

浮动

float

一个元素浮动起来，会不再占有原来的位置——脱离文档流

同时发生浮动的盒子会在同一行进行排列

浮动造成的高度塌陷

父盒子+overflow:hidden

p {

clear: right; （right更靠近p标签）

}

<p>我是不想漂浮的文字</p>

或clear:both

盒子模型

padding——内边距（影响盒子大小）

margin——外边距（不影响盒子大小）

盒子大小由border+ padding+content决定

box-sizing:border-box——避免padding和margin将盒子撑大

外边距

margin-top——元素的上外边距

margin-bottom——元素的下外边距

margin-left——元素的左外边距

margin-right——元素的右外边距

margin:20px——上下左右外边距全为20px

margin:20px 30px——上下外边距为20px,左右外边距为30px

margin:10px 30px 20px——上外边距为10px,左右外边距为30px,下外边距为20px

margin:10px 20px 30px 40px——上左右下（顺时针）

auto

margin:0px auto——水平居中（添加了浮动的盒子不能进行水平居中）

——auto只能用于左右且为块元素，必须有宽高

内边距

overflow:auto——内容溢出，则提供滚动条

外边距塌陷

<!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>
        .father {
            width: 1200px;
            height: 800px;
            background-color: pink;
        }

        .son {
            width: 100px;
            height: 100px;

        }

        .son1 {
            background-color: aquamarine;
            margin-top: 200px;
        }

        .son2 {
            background-color: black;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .son3 {
            background-color: brown;
        }
    </style>
</head>

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

</body>

</html>

son1的margin-top被父盒子抢占

解决方式：给父盒子加边框border

加padding(padding=0px，无效)

加overflow:hidden