05盒子模型

最新推荐文章于 2024-08-17 22:24:13 发布

Maxcu

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量73

点赞数

分类专栏： web前端基础入门文章标签： css css3 html

本文链接：https://blog.csdn.net/Maxcu/article/details/125688001

版权

web前端基础入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细解析了HTML元素的盒子模型，包括边框样式、宽度、颜色，以及内外边距、盒模型尺寸计算和box-sizing属性的应用。讲解了如何通过CSS精确控制布局，并介绍了初始化外边距、居中对齐和列表样式技巧。

摘要由CSDN通过智能技术生成

盒子模型

将html元素看成一个盒子，来实现也网页布局

在这里插入图片描述

有关盒子模型的css属性

边框
- border-width边框的粗细，单位是px
- border-style边框的风格
  - none 无边框
  - dotted 点状边框
  - dashed 虚线
  - solid 实线
  - double 双线
- border-color 边框的颜色
外边距（上右下左）
- margin-top
- margin-right
- margin-bottom
- margin-left
内边距（上右下左）
- padding-top
- padding-right
- padding-bottom
- padding-left

border

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

关于border的属性可以依次简写成

border: border-width border-style border-color;

margin

用来设置盒子的外边距

除了依次设置top right bottom left对应的外边距，也能进行简写

margin: margin-top margin-right margin-bottom margin-left;

例如

margin:100px 0 0 100px;

效果：

还有一种简写方式

margin:100px 50px;

如果只简写成两个数值，第一个数值表示的是margin-top 和 margin-bottom，第二个数值表示的是margin-left 和 margin-right.

如果只有一个数值，就全部都设置为这个数值了

padding

和margin类似，用来控制内部元素与盒子边界的距离，设置的格式也和margin类似，可以直接设置paddin-top padding-right padding-bottom padding-left也可以有两种简写方式，参考margin

实际盒子的宽度和高度

在设置padding数值的时候，我们不难发现，盒子的宽高会随着padding的数值而变化，这是因为，盒子的实际大小并不是我们一开始设置的width和height

实际宽度：border-left+boder-right+width+padding-left+padding-right

实际高度：border-top+boder-bottom+height+padding-top+padding-bottom

因此盒子的大小是会变化的

而如果我们设置属性

box-sizing:border-box;

那么我么的盒子大小就是我们设置的width和height。

设置box-sizing之前

在这里插入图片描述

设置box-sizing之后

在这里插入图片描述

外边距内边距初始化

当我们将margin设置为0的时候不难发现，其实外边距并没有设置为0，外边距还是存在的，这是因为一般的浏览器可能是有默认是外边距和内边距设置，所以为了让我们所设计的页面完全符合我们的想法来设计，我们要用通配符选择器将所有margin和padding设置为0，将其初始化。（这里的初始化相当于是说将我们box以外的元素外边距初始化一下，将其他元素的外边距啥的设置成0，这样“假外边距”就消失了）

盒子居中

margin:0 auto;

列表的样式

取消列表样式：

list-style:none;

列表样式在边距之内

list-style:inside;

<!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: 400px;
            height: 100px;
            border: 1px solid red;
            margin: 0px auto;
        }
        .sports{
            width: 400px;
            height: 100px;
            border: 1px solid blue;
            margin: 0px auto;
        }
    </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>

在这里插入图片描述

会发现点在边框外面

因此加入样式

.fruits ul,.sports ul{
    list-style: inside;
}

在这里插入图片描述

Maxcu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05盒子模型

css中的盒子模型
复制链接

扫一扫

专栏目录