css学习笔记（二）——盒子模型

introversi0n

已于 2022-08-05 20:50:56 修改

阅读量190

点赞数

分类专栏：前端学习之旅文章标签： css 学习 css3

于 2022-08-05 20:50:26 首次发布

本文链接：https://blog.csdn.net/code_bro/article/details/126185363

版权

前端学习之旅专栏收录该内容

7 篇文章 0 订阅

订阅专栏

x月x日零基础自学CSS笔记第x篇。

1. 盒子概述

将HTML元素看作是盒子，来实现的网页布局

边框：盒子的厚度

外边距：不同盒子的边框与边框的距离

内边距：盒子的内容距离边框距离

内容：盒子的内部

2. 有关盒子模型的 css 属性

内容：(width,height)

边框：border(-width\-style\-color);

外边距：margin(-top\-right\-bottom\-left)

内边距：padding(-top\-right\-bottom\-left)

2.1 边框 `border`

border-style的值	描述
none	定义无边框。
dotted	定义点状边框。
dashed	定义虚线。
solid	定义实线。
double	定义双线。

<style>
    .box{
        width: 100px;
        height: 100px;
        /* border-width: 10px;
        border-style: solid;
        border-color: red; */
        border:10px solid red;
    }
</style>

2.2 外边距 `margin` & 内边距 `padding`

与 border 很类似，不做展开

这里需要指出，margin 和 padding 是可以简写的

margin: 12px 12px 20px 20px;

如果有四个值，则默认为顺时针对于上右下左

如果只有两个值默认分别代指上下和左右

如果只有一个值默认代指上下左右

3 容器的长宽限制

设置内边距会发现边框的长度发生了变化，因此这里给出元素的长宽计算公式

默认情况：元素的宽度和高度计算

元素的实际宽度 = border-left(左边框厚度) + border-right（右边框厚度） + width（内容宽度） + padding-left（左内边距长度） + padding-right（右内边距长度）

元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom

设置 box-sizing：border-box;

元素的实际宽度 = width

元素的实际高度 = height

这里要注意，设置的 width 和 height 如果被 padding 和 内容 的加和给超越了，容器不会被撑大，但内容会跑到容器外。要避免设置长度过大。

4 初始化

当设置 css 样式的过程中，如果 margin 属性为 0px 时，会发现边框还是会存在一定外边距，这是 html 标签默认的外边距。但是实际开发过程中我们希望严格按照我们设定的样式走，因此我们需要进行元素边距的初始化。

/* 元素边距初始化 */
*{
	margin:0px;
	padding:0px;
}

*代表通配，即所有元素。

5 容器元素居中

左右元素宽度设置为 auto

.container{
	width:800px;
    height:300px;
    bordere:1px solid red;
    margin:0 auto;
}

如果不用auto，而是设置为一个固定值。

那么在浏览器的页面大小因拖拽产生变化时，页面的容器是不会跟着变化的。

6 列表的样式

取消列表样式：list-style:none;

列表样式在边距之内：list-style:inside;

7 示例

该示例的重要知识点有：

边距的初始化
容器居中
限制容器长与宽+内容越界
列表的样式：设置表格在边距内

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .fruits{
            width: 800px;
            /* 这里没有设置height，因此容器会被padding-top撑大
            这是因为height默认取padding-top+内容高度 
            如果设置height后，容器大小不变，内容会超出容器*/
            border: 1px solid red;
            margin: 0px auto;
            padding-top: 20px;
            padding-left: 30px;
            /* 限制容器的长与宽 */
            box-sizing:border-box;
        }
        .sports{
            width: 800px;
            border: 1px solid blue;
            margin: 0px auto;
            /* 这里的margin重定义的先后顺序会影响结果 */
            margin-top: 50px;
        }
        /* 将表格置于容器内部 */
        .fruits,.sports{
            list-style: inside;
        }
    </style>
</head>
<body>
    <div class="fruits">
        <h3>水果列表</h3>
        <ul>
            <li>菠萝</li>
            <li>香蕉</li>
            <li>苹果</li>
        </ul>
    </div>
    <div class="sports">
        <h3>运动列表</h3>
        <ul>
            <li>足球</li>
            <li>篮球</li>
            <li>羽毛球</li>
        </ul>
    </div>
</body>
</html>