2024字节青训营笔记(一) CSS页面布局之盒子模型 | 豆包MarsCode AI刷题

页面布局的三大核心：盒子模型、浮动、定位

布局过程：先放盒子，CSS设置盒子样式，摆位置，再往盒子里装内容

盒子模型的组成

boder

content

padding

margin

border

weight ..px

style: solid实线 ，dashed虚线，dotted点线

color

简写：

border：1px solid red 没有顺序

分开设置：

            border-top: 5px dotted red;
            border-bottom: 5px solid pink;
            border-left: 5px dotted greenyellow;
            border-right: 5px solid blue;

表格边框

合并边框:

​border-collapse: collapse;​​

边框会影响盒子大小

      div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
        }

总的大小就是220px

padding(内边距）

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
        }

简写：

padding:上右下左的像素

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px 20px 30px;
        }

不会增加盒子大小的padding

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
            padding: 30px;
            background-color: skyblue;
        }

    <div>
        <p></p>
    </div>

p是div的儿子，宽度不用设置就和div一样，直接写padding就可以，不用调整，不会超过div范围

外边距margin

 div {
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .one {
            margin: 10px;
        }

<div class="one">1</div>
    <div>2</div>

简写和padding一样

块级盒子水平居中对齐

盒子必须制定了宽度

盒子的左右外边距都设置为auto，上下可以随便设置

        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }

想要子元素居中：

span居中，就要在父类中增加text-align

<div class="header">
        <span>里面的元素</span>
    </div>

.header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
        }

外边距合并

子元素增加外边距失败，变成了父元素增加外边距

 .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }

解决方案：

为父元素设置一个边框

        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            border: 1px solid transparent;
        }

为父元素设置一个内边距

​padding: 1px;​​

为父元素设置overflow:hidden

清除内外边距

不同元素本身就带有内外边距

        * {
            margin: 0;
            padding: 0;
        }

行内元素尽量只设置左右的内外边距，但是转换为块元素和行内块元素就可以了

圆角边框

        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }

圆的半径越大，边框越圆

圆形的做法

高度宽度一样，半径为高度的一半

或半径为50%

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border-radius: 150px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border-radius: 50%;
        }

圆角矩形

半径设为高度的一半，高度和宽度不用相等

盒子阴影(重点）

box-shadow

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 10px 10px 10px 10px black;
        }

顺序分别是：h,v,blur,spread color

阴影不占用空间，不影响其他标签

文字阴影

​text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);​​