CSS完整版教程（3）持续更新中~
作者：互联网
目录
一、盒子模型的组成和作用
盒子模型的组成：
宽高（width、height）、内间距（padding）、边框（border）、外间距（margin）；
盒子模型的作用：
布局页面；
二、盒子内边距（内填充）
1、注意：
内边距最好理解为内填充，因为内边距会改变盒子大小，所以使用内边距后会就要在对
应的宽度或高度上减去内边距的距离；
2、作用：
改变小盒子在大盒子中的位置；
3、语法：
①padding: 1px ;
当padding后只设一个值时，此值表示上下左右内边距都增加的距离；
②padding: 1px 1px ;
当padding后设有两个值时，前值表示上下内边距，后值表示左右内边距；
③padding: 1px 1px 1px ;
当padding后设有三个值时，1st值设置上，2nd设置左右，3rd设置下；
④padding: 1px 1px 1px 1px ;
当padding后设有四个值时，1st设置上，2nd设置右，3rd设置下，4th设置左（顺时针记忆）；
⑤padding-top: ; padding-right: ; padding-left: ; padding-bottom: ；
三、盒子外边距
1、作用：
设置大盒子：设置大盒子在页面中的位置；
设置小盒子：设置小盒子在大盒子中的位置；
2、语法：
①margin: 1px;
当margin后只设一个值时，此值表示上下左右外边距都增加的距离；
②margin: 1px 1px;
当margin后设有两个值时，前值表示上下外边距，后值表示左右外边距；
③margin: 1px 1px 1px;
当margin后设有三个值时，1st值设置上，2nd设置左右，3rd设置下；
④margin: 1px 1px 1px 1px;
当margin后设有四个值时，1st设置上，2nd设置右，3rd设置下，4th设置左（顺时针记忆）；
⑤margin-top: ; margin-right: ; margin-left: ; margin-bottom: ；
⑥margin:auto;盒子居中（左右居中）
四、清除页面间距
1、注意：
①块元素默认宽度100%、高度0 ；
②body标签设置页面间距时，会与浏览器边框留有一小段间距，所以要手动清除页面边距；
2、语法：
<style>
body{
/*用来清除间距的属性对*/
padding: 0;
margin: 0;
</style>五、margin和text-align的区别
1、针对的对象不同：
margin：针对（块元素）盒子本身
text-align：针对标签内部的行元素
2、居中范围：
margin：在其在父盒子内居中；
text-align：其内部的子元素居中；
六、边框的类型、颜色、厚度、总写法、分别设置
1、边框厚度：
border-width: 1px;
2、边框颜色：
border-color: #f00;
3、边框类型：
border-style: dashed;虚线
border-style: dotted;点线
border-style: double;双线
border-style: inset;凹面
border-style: outset;凸面
4、边框的类型、颜色、厚度总写法：
border: 1px #f00 dashed;
5、上下左右边框的分别设置：
border-top: 1px #f00 solid;
border-right: 1px #f00 solid;
border-bottom: 1px #f00 solid;
border-left: 1px #f00 solid;
七、边框形状（圆角）
1、基本语法：
①border-radius: 10px; / border-radius: 10%；可以用像素值也可以用百分比设置圆角
②border-radius：10px ; 一个值时，同时设置四个角；
③border-radius：10px 10px ; 前值设置左上和右下，后值设置右上和左下；
④border-radius：10px 10px 10px; 1st值设置左上角，2nd设置右上角和左下角，3rd设置右下角；
⑤border-radius：10px 10px 10px 10px; 顺时针，左上-右上-右下-左下；
2、进阶语法：
⑥border-bottom-left-radius: 10px 10px;
设置不对称角（top/bottom必须在前，left/right必须在后）
前值设置横角度，后值设置纵角度；
⑦border-radius: 10px / 10px;
前值设置左上角、右下角，后值设置右上角、左下角；
⑧border-radius：10px 10px 10px 10px / 10px 10px 10px 10px;
斜杠前：值分别表示横向（半径），左上、右上、右下、左下
斜杠后：值分别表示纵向（半径），左上、右上、右下、左下
⑨border-radius：10px 10px 10px 10px / 10px 10px 10px ;
斜杠前后的值不为四个时，斜杠前依旧表示横向，斜杠后依旧表示纵向。
斜杠前后缺值时，其规律同上的②、③、④；
八、盒子模型的与生俱来的两个BUG
盒子模型的第一个BUG：
1、BUG的问题：
①无论是给内盒子还是外盒子设置 上-外间距（margin-top），都会作用在外盒子上。
②如果同时给内盒子和外盒子设置 上-外间距（margin-top），会取设置的值中的更大值，仅作用
在大盒子上。
2、解决方案：
①给外部盒子加上边框，或者给外部盒子设置内间距；
②给外盒子添加 overflow: hidden;
盒子模型的第二个BUG
1、BUG的问题：
①盒子上下摆放，上盒子有 下-外边距（margin-bottom），下盒子有 上-外边距(margin-top)。两边
距会重合，设置中的较大者生效。
2、解决方案：
①尽量避免，其实上下盒子都设置一个边距本身就是多此一举，完全可以在一个其中一个盒子中设
置完成。
九、元素的可见性
1、作用：
隐藏属性、显示属性
2、语法对：
①display:none;（方式一）元素消失式隐藏（且是彻底消失，占位变化，影响盒子内其他内容，下
面的文字会上移）；
display:block; （方式一）让消失的元素以块元素出现；
②visibility:hidden;（方式二）元素透明式隐藏（只是看不见了，占位不变，不影响盒子其他内容）
visibility:visible;（方式二）让透视式隐藏变为可见状态；
标签：教程,盒子,border,1px,设置,10px,完整版,margin,CSS 来源： https://blog.csdn.net/m0_59086897/article/details/122760017