盒子属性的常用css有边框，外边距，内边距与内容
上面这张图中border是边框，padding是内边距，margin是外边距，中间的1903 x 149是内容(content)
- 大部分的元素都可以使用盒子属性，不只有div可以使用
目录
1 边框 border
边框主要由三部分构成，边框宽度(粗细)(border-width)，边框样式(border-style)与边框颜色(border-color)，我们先感受一下
1.1 border-color与border-width
border-color除了使用指定颜色还可以使用16进制或rgb或rgba，border-width除了使用px还可以使用em
1.2 border-style
下面我们详细看一下border-style的样式，border-style常用值如下所示
- none 无边框，默认就是无边框，与宽度无关，有没有宽度都是无边框
- hidden 隐藏边框
- dotted 点
- dashed 虚线
- solid 实线
- double 双实线
- groove 3D凹槽
- ridge 3D凸槽
- inset 3D凹边
- outset 3D凸边
我们给他都写出来，为了让其更美观一点，设置一下盒子的宽度与高度
我们都看一下
1.3 统一设置
边框也可以像font那样进行统一设置，我们这样写
- 这三个值没有顺序要求
我们对border-top,border-bottom,border-left,border-right四个变量给不同的值，就可以给四个边框不同的样式
如果只对一个边框进行设置，其他不进行设置(也没有继承的情况)，其余边框的border-style默认为none,也就是设置哪个有哪个
1.4 边框会影响盒子的大小
我们先搞一个没有边框的
然后我们再加上边框
发现盒子明显变大了
它现在黑色的区域还是200px*200px，算上红色的区域就是360px*360px，如果还想维持200px*\200px，只能手动改一下width与height
1.5 圆角边框 border-radius
它的语法是这样的
我们简单写一下
它的样子是这样的
- 之后无论再设置多大，它都是这个样子
像我们上面那个设置的圆角是比较大的，我们搞一个比较小的
那它就是这样的
当设置的尺寸大于盒子最小边的一般，它的两端就会生成圆形
border-redius后面可以是数值，也可以是百分比，当使用的百分比过大的时候，它就不再是矩形的样子了
这里的50%指的是盒子最长边的50%
- 之后无论再设置多大它都是这个样子
当我们的宽与高相同，且给border-radius设置的值过大时(无论是数值或是百分比)，那么它就会变为圆形
它可以给四个数值，分别是 左上圆角，右上圆角，右下圆角，左下圆角(从左上角顺时针到左下角)
顺序是不能变的，数值或百分比可以混着给
也可以少给若干个
没给的值与对象值相同
它也可以拆开来写，有下面这些属性
- border-top-left-radius 左上圆角
- border-top-right-radius 右上圆角
- border-bottom-right-radius 右下圆角
- border-bottom-left-radius 左下圆角
上面四个属性中top,left这种方位名词不能颠倒
注意一点，圆角盒子只是样子是这样的，在布局中还是被当作一个矩形进行处理
1.6 边框图像 border-images
border-images是CSS3的新属性
- 我们之前在pyqt中使用过这个属性 86.样式表 QSS_Suyuoa的博客-CSDN博客_样式表qss 9.2.6，原理是一样的，用法有所不同
1.6.1 搞图像
首先需要一个像边框的图像，背景需要是透明的，不是透明的要自己用PS搞一下，我们用下面这张图像，将其命名为border
如果不是透明的也可以，那样后面用的时候可能麻烦一些
1.6.2 取值
我们需要取boder-image-slice与border-image-width的值
首先我们画四条线，将图像分为9个部分。四条线要求保留四个角的完整性，如果划线的时候两个角一个大，一个小，要按照大的角来画
border-image-slice赋值的时候只写像素值不要写单位。border-image-width可以写单位，不仅可以写px，也可以写rem这种别的单位
border-image-repeat有三种值，分别是平铺(repeat),铺满(round)和拉伸(stretch)，我们以下面这张边框图像为例
拉伸stretch，它会把中间的黄色方框拉伸
平铺repeat，它会不停的复制，到最后如果没复制完一个也就完了
铺满 round，铺满会照顾到中间黄色方块的完整性，是介于拉伸与平铺之间的方法
1.6.3 代码
border-style是一定要给的，不然没有效果
现在改动盒子的大小边框会按指定的方式(border-image-repeat)自适应，比如我们现在把盒子搞大
发现依然适用
边框图像实质上是用图像代替了以前边框的样式，比如你觉得现在文字距离边框太近了，你可以改大border-width的值
这样我们的文字就会向内挤一挤
2 内边距 padding
2.1 分开写
内边距是边框与内容之间的距离
它有四个属性可以设置
- padding-left 左内边距
- padding-right 右内边距
- padding-top 上内边距
- padding-bottom 下内边距
我们现在先创建一个盒子，里面写点儿内容，然后给盒子搞一个边框
为了体现出内边距，我们把窗口放到合适的大小(让内容可以换行)
然后我们对这四个边距进行设置
- 没设置的默认为0
然后它变成这样了，我们明显发现内边距也可以影响盒子的大小
四个值是这样的
2.2 一起写
pading可以进行简写设置
2.3 padding的一个例子
我们现在写了这样一个html
它的效果是这样的
我们现在想让标签变得大一点，而且大小是随着文字数量改变的，这时我们使用width或height把宽高写死就不行了，我们这个时候就使用padding
现在它就变成这样了
2.4 padding不影响盒子尺寸的例子
当我们不设置盒子的尺寸的时候，就无法影响盒子的尺寸，这个话看起来是个废话，但我们想一下，如果盒子的尺寸是继承来的，比如我现在有这样一个html
它的效果是这样的
那么我现在对左右设置内边距
之后我们注释掉 width:100% 这一行
发现它当前宽度与父对象宽度相同了
如果你此时设置上下边距，无论有没有height:100%，它都会影响盒子的尺寸，但不设置height的情况下，无论上下边距设置的多大，都是无法超出父元素的高度的
后续的开发中有可能会用到这种方法，所以我们记录一下
3 外边距 margin
外边距我们可以理解为盒子与盒子之间的距离，可以对margin-left,margin-right,margin-top,margin-bottom四个值进行设置
为了我们方便看我们直接搞九个盒子成九宫格排列
我们发现列与列之前在没设置margin前就有细小的空隙，我们发现列与列之前在没设置margin前就有细小的空隙，这个和我们的布局方式有关，在我们下一章 12.浮动属性 中会提到
我们现在对5号盒子设置margin
它现在是这样的
- 我们可以发现margin并不会影响盒子的尺寸
它的四个值是这样的
margin与padding相同，也可以进行统一设置，而且给参数个数的意义也是完全一致的
3.1 盒子水平居中
我们访问百度后，把页面比例拉到最小，会出现这种情况
我们不难发现中间的区域是一个盒子，而且这个盒子是在页面中居中显示的，我们现在来做一下这个
我们只需要设置宽度与外边距就可以让盒子达到居中的效果
- height与margin是为了体现效果设置的，如果盒子中有内容则不需要额外设置这两个值
我们通过下面两个语句代替margin:0 auto，一样可以达到盒子居中的效果
- margin-left:auto;margin-right:auto;
- margin:auto;
后面我们会提到定位的属性，使用定位属性后，margin:auto是无效的
3.2 盒子内元素水平居中
如果想让盒子内的元素在盒子内水平居中，我们需要给盒子添加text-align:center
3.3 垂直外边距
3.3.1 垂直外边距合并
垂直外边距会出现合并的状况，水平外边距不会有这种状况，我们先看一下水平外边距
我们在调试工具中看一下，我们可以看到盒子一的右边距
这个是盒子二的左边距
发现他们可以同时存在，我们再看一下垂直的情况
发现盒子一的下边距直接顶到了盒子二的上方
盒子二是上边距与盒子一的下边距合并到一起了
这种现象我们称做垂直外边距的合并，纵向的外边距，网页会选取两侧值较大的数作为外边距
3.3.2 嵌套块元素垂直外边距消失
我们依然先看水平的情况
它的效果是这样的
然后我们再看垂直方向的
发现父盒子的20px消失了，直接使用了子盒子的50px，而且子盒子也没有相对父盒子移动
我们称这种现象为嵌套块元素垂直外边距消失(塌陷)，父盒子与子盒子在垂直情况下，会选择一个较大的值作为边距
这个问题是我们很难避免的，我们有三个解决方案
把父元素与子元素隔开，可以解决这个问题
这里border-style不要写none，边框宽度至少1px
只有定义上边框好使，只定义下边框不好使，如果愿意的话使用border(四周都给)也可以
3.3.2.2 为父元素定义上内边距(padding-top)
使用padding也可以，内边距至少1px
3.3.2.3 为父元素添加overflow:hidden
overflow这个属性到后面会提到
4 清除内外边距
像ul中的li，在创建的时候就会自带内边距
不只这一个元素，其余元素在创建的时候也会自带内外边距，这就给我们排版的时候带来了一点儿麻烦，所以我们一般这样写
这样就取消了所有元素的内外边距
如果我们有需要的话，我们会单独对这个元素进行设置
5 盒子属性的综合案例
我们写一个这个
首先给它结构先写出来
然后把文字颜色弄了
之后再简单调整一下
发现就和样子差不多了
这里如果觉得图太大了，我们可以用一下这个
这样就能让图像和盒子一样宽了
6 盒子阴影 box-shadow
在这里当我们把鼠标放上去的时候，周围产生部分阴影，这个就是盒子阴影的效果
它的语法是这样的，其中加粗的是必选属性
- h-shadow 水平阴影中止位置，允许负值
- v-shadow 垂直阴影中止位置，允许负值
- blur 模糊距离
- spread 阴影尺寸
- color 阴影颜色，可以使用十六进制值，rgb值等
- inset 将外部阴影改为内部阴影
inset放到最后测，我们先测一下前面的几个参数
6.1 h-shadow与v-shadow
这两个参数是以盒子右下角点为原点，定义阴影的中止位置，上面是都是-20，我们把它搞大一点
- 就像上面这样理解就行，它实际上还包括模糊距离和阴影的尺寸，我们后面会讲
6.2 blur
blur是模糊距离，之前是10px，我们现在给它搞大一点
我们明显感觉模糊的范围变大了
这个部分的长度就是blur的值
6.3 spread
spread是阴影的尺寸，之前是20，我们现在改为100
- spread可以设置为负值
我们明显发现阴影尺寸变大了
阴影的面积 = (盒子的宽 + 2*spread) * (盒子的高 + 2*spread)
6.4 color
颜色可以设置为任意颜色，上面我们用的是黑色，现在我们搞成红色
6.5 inset
之前我们没设置最后一个参数，没设置的时候默认为外部阴影，设置之后变为内部阴影
我们之前的盒子的橘黄色的，现在设置成内部阴影，且由于阴影太大，盒子就变成这样了
我们现在给它调美观一点
如果将h-shashow与v-shadow设置成正值就是这样的
如果设置为负值就是这样的
后面如果用到就自己调调看吧，在chrome中的调试工具直接对值进行操作，效果更加直观
盒子的影子不会影响布局
6.6 比较好看的影子
当鼠标放上去加影子可以使用div:hover,我们这里用一下影子比较美观的数值做一下
没放上去之前是这样的
放上去之后是这样的
7 盒子尺寸类型 box-sizing
box-sizing有两个可选值，分别为content-box与border-box，默认为content-box
- content-box 盒子尺寸为 盒子本身宽度 + padding + border
- border-box 盒子尺寸仅为 盒子本身宽度，就是设置了多少整个盒子就是多大，它会去自动改变内容区域的尺寸
我们做个例子，我们先看没有使用border-box的状态
当前蓝色区域的尺寸是200*200
现在我们加入 box-sizing:border-box;
现在整个盒子的尺寸是200*200
这样当我们改变 边框与内边距 的时候，并不会影响盒子的大小。但是当 边框与内边距 的和大于盒子大小的时候，依然会将盒子撑大
7953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
