CSS学习

最新推荐文章于 2026-01-01 20:08:21 发布

原创最新推荐文章于 2026-01-01 20:08:21 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #css3

盒子模型

网页元素基本都是盒子。（无论是div、span、还是a都是盒子。）

组成部分：边框（border）内边距（padding）外边距（margin）内容（conten）

总元素的宽度=宽度+内容+左边框+右边框+左边距+右边距

总元素的高度=高度+内容高度+上边框+下边框+上边距+下边距

不同部分组成说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

关于边框：

border-width 边框粗细 border-color 边框颜色

border-style 边框样式【默认（none）实线（solid) 空心（double）虚线（dashed）点线（dotted)]

边框简写：

border: 1px  solid  red

书写没有固定顺序。

边框分开写法（不同边）：border-top(仅有上边框)：1px solid red；

border-bottom(仅有下边框) 同理border-left border-right;

表格细线边框：border-collapse：collapse；（表示相邻边框合并在一起）

有height和width下，边框会影响盒子实际大小。

关于内边距：

和边框写法类似 padding-left，padding-right, padding-top, padding-bottom分别是左边距，右边距，上边距和下边距。

padding复合写法： padding：1~4个值。

如果只有一个值，即上下左右内边距均为该值。

只有两个值，为上下和左右的值。

只有三个值，为上内边距左右边距下边距。

有四个值，为上边距，右边距，下边距，左边距。

当盒子有height和width，有padding值会撑开盒子。

当然也有padding不会撑开盒子的情况：

当盒子本身未指定height / width（即遇到嵌套类型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        background-color: aqua;
    }
    div p {padding: 30px;}
    p {background-color: bisque;}
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
</body>
</html>

<p>的宽度不会更改。

关于外边距：

margin不同方向值的写法和padding一致，为margin-left，margin-right，margin-top，margin- bottom。

值：

auto：自动设置浏览器边距，这样做的结果会依赖于浏览器。

length：定义一个固定的margin（使用像素，pt，em等）

%：定义一个使用百分比的边距

典型应用：外边距可以让块级盒子水平居中显示。

实现：在盒子指定宽度后，将盒子左右外边距都设置成auto（自动）

margin: 0 auto;

这种写法对行内元素和行内块元素无效。

行内元素和行内块元素水平居中给父元素加（text-align：center即可）

使用margin定义块元素的垂直外边距时，可能会出现外边距合并。（此时外边距取两个值中的较大者）

嵌套块元素塌陷：

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，子元素也有上外边距，父元素会塌陷较大的外边距值。

解决方法：

1，给父元素添加一个边框（上边框）。

2，给父元素定义上内边距（使父子元素分开）

3，给父元素添加overflow：hidden；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .one {
        width: 500px;
        height: 200px;
        margin-top: 70px;
        background-color: aqua;
        overflow: hidden;
    }
   .two {
       margin-top: 60px;
        width: 200px;
        height: 50px;
        background-color: blue;
   }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>