CSS — 文档流、盒模型

最新推荐文章于 2023-03-02 20:29:24 发布

吃不到棒棒糖的小熊

最新推荐文章于 2023-03-02 20:29:24 发布

阅读量102

点赞数 2

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

本文链接：https://blog.csdn.net/m0_59897687/article/details/122506517

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、文档流（normal flow）

网页是一个多层的结构，一层摞着一层。通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层。这些层中，最底下的一层称为文档流。

文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。对于我们来说元素主要有两个状态：在文档流中和不在文档流中（脱离文档流）

元素在文档流中的特点：

1.块元素

(1).块元素会在页面中独占一行（自上向下垂直排列）

(2).默认宽度是父元素的全部（会把父元素撑满）

(3).默认高度是被内容撑开（子元素）

2.行内元素

(1).行内元素不会独占页面的一行，只会占自身的大小

(2).行内元素在页面中从左向右水平排列，如果一行之中不能容纳所有行内元素，则元素会换到第二行继续自左向右排列（与书写习惯一致）

(3).行内元素的默认宽度和高度都是被内容撑开

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            background-color: springgreen;
        }
        .box2{
            width: 100px;
            background-color: tomato;
        }
        span{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">我是div1</div>
    <div class="box2">我是div2</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
    <span>我是span4</span>
    <span>我是span5</span>
    <span>我是span6</span>
    <span>我是span7</span>
</body>
</html>

效果如下：

二、盒模型

盒模型，也称盒子模型、框模型（box model）。

CSS将页面中所有元素都设置为了一个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

每一个盒子都由以下几部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）

1.边框

边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小。

要设置边框，需要至少设置三个样式：

边框的宽度：border-width (默认宽度是三个像素)

边框的颜色：border-color

边框的样式：border-style

(1).border-width

border-width默认值一般都是3个像素，border-width可以用来指定四个方向的边框的宽度

值的情况：

四个值：上右下左

三个值：上左右下

两个值：上下左右

一个值：上下左右

除了border-width还有一组 border-xxx-width，xxx可以是top、 right、 left、 bottom，用来单独指定某一个边的宽度。

(2).border-color

border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样，border-color也可以省略不写，如果省略了则自动使用color的颜色值

(3). border-style

border-style指定边框的样式

solid表示实线

dotted点状虚线

dashed虚线

double双线

border-style的默认值是none 表示没有边框

(4).border简写属性

通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求，除了统一设置四个方向的border，以外还可以分开设置

border-top

border-right

border-bottom

border-left

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            border-width: 20px;
            border-color: skyblue pink cadetblue darkblue;
            border-style: solid dotted dashed double;
        }
    </style>
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

效果如下：

2.内边距（padding）

内容区和边框之间的距离是内边距，一共有四个方向的内边距：

padding-top

padding-right

padding-bottom

padding-left

内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

一个盒子可见框的大小，由内容区、内边距和边框共同决定。所以在计算盒子大小时，需要将这三个区域加到一起计算

padding内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height:200px;
            background-color: orange;
            border: 10px skyblue solid;
            padding-top: 100px;
            padding-right: 50px;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>

效果如下：

3.外边距（margin）

外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置。

一共有四个方向的外边距：

1. margin-top

上外边距，设置一个正值，元素会向下移动

2. margin-right

默认情况下设置margin-right不会产生任何效果

3. margin-bottom

下外边距，设置一个正值，其下边的元素会向下移动

4. margin-left

左外边距，设置一个正值，元素会向右移动

margin也可以设置负值，如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果设置左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。

margin的简写属性：

margin可以同时设置四个方向的外边距，用法和padding一样

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            height: 200px;
            width: 200px;
            background-color: paleturquoise;
            border: 10px red solid;
            margin: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

效果如下：