第四章 css盒模型概念

2020-08-31 本文已影响0人扶光_

一,盒模型

什么是盒模型?
（英语：box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型.
盒模型分为标准盒模型和怪异盒模型

标准盒模型又分为:块级盒模型行内盒模型行内块盒模型
首先先讲一下边框样式

            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid yellow;
        }

如下图我们可以清楚的看到外面加了一个绿色的边框

            border-style:solid ;
            border-color:red;
            border-width:1px;

这样子的写法和上面的图片的样式相同
那么小伙伴问可能会问了,我想让四个边框的宽度,颜色,线条都不一样那该怎么办啊?
下面我们就来说说如何设置各个边框的样式

例如:我们要设置一个上边框为5px,右边框为10px,下边框为15px,左边框为20px的宽度看下面这条代码

            border-style:solid ;
            border-color:red;
            border-width:5px 10px 15px 20px;

会变成这个样子

很明显边框的各个宽度就改变了,它遵从的顺序就是上右下左
当然他的四个边框的颜色也可以自主设定

例如我们要设置一个上边框为红色,右边框为绿色,下边框为黑色,左边框为黄色,看下面这条代码

            border-style:solid ;
            border-color:red green black yellow;
            border-width:5px 10px 15px 20px;

咳咳,虽然这个图片有点丑,但是很易懂不是嘛
当然各个边框的样式也可以设置这里我就不一一举例了,你们下去可以自己研究一下我就直接把边框的样式写下来了

border-style:solid实线 dashed 虚线 dotted 圆圈线 double 双线,(顺序也是遵从上右下左的原理)

最后在这里给大家扩展一下,有的小聪明就会问了,设置四个值顺序是上右下左,那么设置三个和设置两个顺序又是什么呢

其他的遵从顺序也是如此,不一一举例了大家下去可以多多敲敲代码发现新大陆吧

如果我们只想要上边框为红色,那么该如何设置呢?看下面代码

border-top:1px solid red;      就是左边框为1px的红色边框
            top 上 left 左 bottom下 right右

什么是内边距呢? 内边距就是content主体内容到border之间的间隙这里给你举一个我自己做的两个效果图你就明白了

没添加padding的图片
添加padding:10px的效果图
padding:20px;也是复合样式也是遵循上右下左的顺序这里就不一一演示了(也有 padding-top;20px;等等
还要注意一点内容会扩大盒子的大小

什么是外边距呢? 我就不用名词来解释了 ,用白话来讲就是两个盒子之间的距离
还是先用图片举例子先了解这是什么
我们先建立两个没有加入margin盒子看下面效果图

没有加入margin

当我们向盒子之中加入margin:20px;看看会是什么样子

第一个盒子加入margin:20px;
相信各位小聪明们一定会发现这个也是一个复合样式 margin也是遵循上右下左的顺序原理这里就不再次写了也有left top....等功能.
盒子如何居中?

盒子居中 margin: 0px      auto;        这样子盒子就可以居中了
                上下   左右自动计算

扩展:父子级外边距合并问题当我们一个盒子嵌套一个盒子时,还想让里面的盒子在父级发生移动时直接写margin,会和我们预期的一样吗?
当我们图一转变成图二,直接在绿盒子里面加入margin会成为我们理想中图二的效果吗? 并不会这样
想要变成图二这样子的理想样子的解决办法是:需要给父级添加一个border边框属性

写法 :box-sizing:border-box;
跟标准盒模型的不同是
1.会自动计算元素的大小
2.设置的width,height是多少就是多少不会被主体内容挤压