CSS初学笔记：盒模型基础：

CSS初学笔记：
盒模型基础知识：
1.1盒模型的初步认识
一个盒模型应该具有：宽度，高度，边框，内边距，外边距。
CSS初学笔记：盒模型基础：
内容宽：width；内容高：height；边框：border
内边距：padding；外边距：margin（盒子和盒子之间的距离）；
书写内容区域：width：内容宽 height：内容高；
例如：

.box{
			width: 300px;
			height: 200px;
			border:20px solid red;
			padding: 50px;
			margin:100px;
		}

CSS初学笔记：盒模型基础：

盒子占有的区域：
宽度=width+2padding+2border
高度=height+2padding+2border

1.2 padding
内边距：内容到内边框的距离：

.box{
			width: 300px;
			height: 200px;
			border:20px solid red;
			padding: 50px;
		}

CSS初学笔记：盒模型基础：
Padding是复合属性，可以按照方向进行四个方向的划分，四个方向可以不同。

padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
拆开写和单值写效果一样：
CSS初学笔记：盒模型基础：
可以书写复合属性：
四值法：上右下左

padding: 50px 80px 100px 120px;

三值法：上左右下：（左边取右边的值）

padding: 50px 80px 120px;

两值法：上下左右

padding: 50px 80px;

单值法:上下左右

Padding：50px；

注意：一般先写单值法，特殊方向的值利用单一属性进行层叠。

padding: 50px;
			padding-top: 100px;

层叠效果：
CSS初学笔记：盒模型基础：

1.3 margin
CSS初学笔记：盒模型基础：
margin：指的是两个盒子之间的距离；
margin: 也是复合属性
四值法：上右下左

Margin: 50px 80px 100px 120px;

三值法：上左右下：（左边取右边的值）

Margin: 50px 80px 120px;

两值法：上下左右

Margin: 50px 80px;

单值法:上下左右

Margin：50px；

按照方向划分：

Margin-left 左距
Margin-right 右距
Magin-top 上距
Magin-bottom 下距
注意：一般先写单值法，特殊方向的值利用单一属性进行层叠。

margin: 50px;
			margin-top: 100px;

层叠效果：
CSS初学笔记：盒模型基础：

<1>设置盒子水平居中：margin: 0px auto;/*设置盒子水平居中，左右自动撑开最大程度*/
<2>设置盒子垂直居中：

.box{
			width: 300px;
			height: 200px;
			border:20px solid red;
            position: absolute;top: 50%;left: 50%;margin-top:-100px;margin-left:-150px; 
		}

垂直居中效果：
CSS初学笔记：盒模型基础：

1.4 border
border：边框
border也是一个复合属性；可以按照方向进行拆分。
三个类型值必须写全，缺一不可；

        border-left: 20px solid red;
		border-right: 20px solid red;
		border-top: 20px dashed red;
		border-bottom: 20px solid red;

CSS初学笔记：盒模型基础：
线的宽度：border-width：20px；
线的类型：border-style：dashed-虚线 dotted 点线
solid 实线
线的颜色：border-color：三种色值表示法
例子：

.box{
			width: 300px;
			height: 200px;
			border-color: pink;
			border-width: 40px;
			border-style: double; 
		}

CSS初学笔记：盒模型基础：

css初学笔记 2019.01.05

CSS初学笔记：盒模型基础：

相关推荐