CSS盒子模型——边框&内外边距&默认样式

日期：2020-10-03

作者：19届WY

标签：CSS盒子模型，边框设置，内外边距设置

一、盒子模型

1、盒子的大小

使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度width和height只是设置盒子内容区的大小，而不是盒子整个的大小盒子可见框的大小由内容区，内边距和边框共同决定 .box1{ width:100px; height:100px; /*设置背景颜色*/ background-color: #bfa; }

2、为元素设置边框

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度 border-color:边框的颜色 border-style：边框的样式

1⃣️边框的宽度

/*设置边框的宽度*/ border-width:100px;

使用border-width可以分别指定四个边框的宽度

如果在border-width指定了四个值。 则四个值会分别设置给上右下左，按照顺时针的方向设置的

如果指定三个值：

则三个值分别设置给 上 左右 下

如果指定两个值： 则两个值会分别设置给 上下 左右

如果指定一个值： 则四边全是该值 除了border-width，CSS还提供了border-xxx-width

xxx的值可能是top right bottom left 专门用来设置指定边的宽度

border-width:10px 20px 30px 40px; border-width:10px 20px 40px; border-width:10px 20px; border-width:10px;

2⃣️边框的颜色

设置边框的颜色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

border-color:red; border-color:red yellow orange green; border-color:red yellow orange;

3⃣️边框的样式

设置边框的样式

可选值： none，默认值，没有边框 solid，实线 dotted，点状边框 dashed，虚线 double，双线

style也可以分别指定四个边的边框样式，规则和width一致

同时它也提供border-xxx-style四个样式，来分别设置四个边

border-style:dotted solid double dashed;

4⃣️设置边框——border

大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none border-width:10px; border-color:red; border-style:dotted; border： - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色 - 而且没有任何的顺序要求 - border一指定就是同时指定四个边，不能分别指定 border:red solid 10px; border-right:none;/*把不想要的那条边的样式去掉*/ border-top border-right border-bottom border-left 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

二、内边距

内边距，指的是盒子的内容区与盒子边框之间的距离一共有四个方向的内边距，可以通过 padding-top padding-right padding-bottom padding-left 来设置四个方向的内边距内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距盒子的大小由内容区、内边距、边框共同决定盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width;可见框的高度 = border-top-width + padding-top + height + padding-bottom +border-bottom-width; /*设置上内边距*/ padding-top:100px; /*设置右内边距*/ padding-right:100px; 使用padding可以同时设置四个边框的样式，规则和border-width一致 padding:100px 200px 300px 400px;

三、外边距

1⃣️一般操作

外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置盒子有四个方向的外边距： margin-top margin-right margin-bottom margin-left由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左边距时，会导致盒子自身的位置发生改变 /*设置box1的上外边距，盒子上边框和其他的盒子的距离*/ margin-top: 100px; /*左外边距*/ margin-left: 100px; /*设置右和下外边距*/ margin-right: 100px;

2⃣️设置负值

边距也可以设置为一个负值 如果外边距设置的是负值，则元素会往反方向移动 margin-left: -100px; margin-top: -100px;

3⃣️设置auto

margin还可以设置为auto，auto一般只设置给水平方向的margin如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值垂直方向如果设置为auto，则外边距默认就是0如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中 margin-left: auto; margin-right: auto;

4⃣️简写属性

外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距,，规则和padding一样 margin:10px 20px 30px 40px; margin: 0 auto;

5⃣️垂直外边距的重叠

垂直外边距的重叠： - 在网页中相邻的垂直方向的外边距会发生外边距的重叠 - 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和 注意相邻和垂直方向两个前提 <style type="text/css"> .box1{ width:100px; height:100px; background-color:red; /*为上边的元素设置一个下外边距*/ margin-bottom:100px; } .box2{ width:100px; height:100px; background-color: yellow; /*为下边的元素设置一个上外边距*/ margin-top:100px; } </style> /*这两个兄弟元素相邻垂直外边距是100px，不是200px*/ 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素 .box3{ width:200px; height:200px; background-color: green; } .box4{ width:100px; height:100px; background-color:yellowgreen; /*为下边的元素设置一个上外边距,使子元素的位置下移*/ margin-top:100px; } /*4是3的子元素时，4的外边距也会给3*/

四、默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果所以为很多的元素设置了一些默认的margin和padding而它的这些默认样式，正常情况下我们都是不需要使用的所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉 /*清楚浏览器的默认样式*/ *{ margin:0; padding:0; }