HTML5基础篇之html（二）

今天呢 继续往下回顾

三、盒模型

1.margin（外边距）

1>距离的算法

同级：边框外侧距离与边框外侧的距离

嵌套：边框外侧距离父级边框内侧的距离

2>影响的时标签的作用范围，不会影响显示范围。

3>margin值的给法：

margin: 0 0 0 0 分别是（上 右 下 左）的顺序

margin:0 0 0   分别是（上 左右  下）的顺序

margin:0 0   分别是（上下 左右)的顺序

margin:0  (上下左右)

4>块级标签

四个方向都可以设置margin

5>行级标签

如果纵向的margin产生了冲突，取值大的一方，

只能设置横向间距，不能设置纵向间距。

行级与行级之间横向默认有4px的间隙；

横向margin产生了冲突，累加

注：margin的坑  嵌套父级没有边框，子级设置了margin-top 此时会出现问题。

2.border

设置了border之后，会影响标签的显示范围。

border-width

border-color

border-style 边框样式 

只给定边框样式，会显示边框，默认宽度3px,如果没有内容颜色，那么默认黑色，如果设置了内容颜色，边框颜色与内容颜色一致。

小发现

三角形的制作方法：

eg.

width:0;

height:0;

border-top:20px solid red;

border-right:20px solid transparent;

border-left:20px solid transparent;

border-bottom:20px solid transparent;

ps: 要实现哪个角的效果，就在该方向设置一下颜色，然后其他三个方向 把颜色设置成transparent就可以了。

border-radius 边框弧度   圆形 首先保证 容器本身呈正方形，然后设置值为50%既可。也可以设置宽度或者高度的一半。

3.padding

距离的算法：容器的边框内侧距离内容的距离。会影响显示范围，但是不会影响作用范围。

padding值的给法与margin一样。

块级和行级都可以设置四个方向上的padding值，但是行级标签不建议使用，因为本身盒模型内部的属性值设计出来就是根据块级设计的。

4.内容  content

四、inline-block

1.既具有行级标签的特性也具有块级标签的特性。标签显示在同一行，并且可以设置宽度和高度。

2.为了保证布局不出现上下偏移，一定要保证元素与元素内部的结构或者内容一致，否则将会出现偏移（默认的对齐方式）

五、隐藏

1.display:none

从本质上达到隐藏的效果，元素不再占空间。

2.opacity 不透明度

取值范围   0~1之间的浮点数。

不透明度越高，值越接近1，元素显示的更加明显，反之，值越接近0，元素会越透明，达到隐藏的效果，但是没有达到本质上隐藏。空间还在，

rgba()前三个值代表三颜色的原色值（0~255）最后一个值代表颜色的不透明度。

3.visibility

1>hidden 隐藏 空间还在。

2>visible  显示。

今天就复习到这边啦~  本人也去继续学习啦~~~继续希望收到大家的意见哦~~bye!