目录
一、盒子模型的组成和作用
盒子模型的组成:
宽高(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;(方式二)让透视式隐藏变为可见状态;