CSS盒模型

最新推荐文章于 2024-11-01 12:26:05 发布

verify.Mar

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量1.4k

点赞数 38

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

本文链接：https://blog.csdn.net/2301_80227523/article/details/139182596

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒子模型（box model)

无论是div，span，还是a都是盒子

但是，图片，表单元素疑虑看作文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容

盒子中的区域：

一个盒子中主要的属性就5个：width，height，padding，border，margin。

width和height :内容的宽度和高度
padding：内边距
border：边框
margin:外边距

<style>
    div{
        width:200px;
        height:200px;
        border:1px solid red;
        padding:50px;
    }
</style>

标准盒模型和IE盒模型

我们目前所学习的知识中，以标准盒子模型为准

标准盒子模型：（抄录GitHub大佬图片）

IE盒子模型

上图显示：

在css盒子模型规定了元素处理元素的几种方式：

width和height
padding
border
margin

css盒模型和IE盒模型的区别：

在标准盒子模型中，width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。
IE盒模型中，width和height指的是内容区域+border+padding的宽度和高度

<body>标签也有margin

正确理解是参考大佬总结：整个网页最大的盒子是<document>, 即浏览器，而<body>是<decument>的儿子。

认识width、heigh

盒子的真实占有宽度=左border + 左padding + width + 右border+ 右padding

盒子变胖是灾难性的，这会把别的盒子挤下去

认识padding

padding区域也有颜色

padding有四个方向

小属性的写法：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

综合属性的学法：（上下左右）

padding：30px 20px 40px 100px

如果写了四个值，则顺序为：上下左右

如果写了三个值，则顺序为：上，左和右，下

如果写了两个值，则顺序为：上和下，左和右

用小属性层叠大属性，比如：

padding: 20px;
padding-left: 30px;

对于盒子模型：

而

padding-left: 30px;
padding: 20px;

第一行的小属性无效，因为被第二层的大属性叠掉了

一些元素默认带有padding

所以我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding

可以用*进行清楚

*{
    margin: 0;
    padding: 0;
}

但是，*的效率不高，所以我们选择并集选择器，罗列所有的标签（不用背，右专业的清除默认样式的样式表，之后学习）

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}

认识border

border就是边框，边框三要素：像素(粗细），线型，颜色


.div1{
	width: 10px;
	height: 10px;
	border: 2px solid red;
}

border-style

查表CSS 参考手册 | 菜鸟教程

比较稳定的border-style就几个：solid，dashed，dotted

border拆分

booder是一个大综合属性。

比如说：border：1px solid red;

就是把上下左右这四个方向的边框，都设置为1px宽度，线型实线，red颜色

border属性是能够被拆开的，有两大种拆开的方式：

(1)按三要素拆开：border-width,border-style,border-color

(2)按方向拆开：border-top,border-right,border-bottom,border-left

一个border属性是由三个小属性综合而成的。如果小属性后面是空格隔开的多个值，那么就是上下左右的顺序。

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

可以自己试试

工作中用什么？

什么简单用什么，但要懂得，小属性层叠大属性

如要实现下方表示，写法如下

border:10px solid red;
border-right-color:blue;

border:10px solid red;
border-style:solid dashed;

border也可以没有

border:none

也可以一条边没有：

border-left:none;

也可以调整左边框宽度为0

border-left-width:0;

border-image属性

比如

border-image:url(.img.png) 30 round;

举例：利用border属性画一个三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:0;
            height: 0;
            border: 50px solid green;
            border-top-color:red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（2)取消底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:0;
            height: 0;
            border: 50px solid green;
            border-top-color:red;
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（3）最后设置border的左右为白色或者透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:0;
            height: 0;
            border: 50px solid white;
            border-top-color:red;
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

举例2：利用border属性画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 0;
            height: 0;
            border-top: 30px solid red;
            border-left:20px solid transparent;
            border-right: 20px solid transparent;
        }
       
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>