CSS完整版教程(3)持续更新中~

目录

一、盒子模型的组成和作用

二、盒子内边距(内填充)

三、盒子外边距

四、清除页面间距

五、margin和text-align的区别 

六、边框的类型、颜色、厚度、总写法、分别设置

七、边框形状(圆角)

八、盒子模型的与生俱来的两个BUG

九、元素的可见性


一、盒子模型的组成和作用

盒子模型的组成:

宽高(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;(方式二)让透视式隐藏变为可见状态;

上一篇:前端 字体 颜色 背景 边框 盒子模型


下一篇:有趣的css—简单的下雨效果2.0版