前端学习日志0914

css的三大特性 

1、层叠性：是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

 2.继承性：子标签会继承父标签的某些样式，如文本颜色和字号。但是父盒子的盒子模型相关的属性无法继承。

3.优先级（重点）：定义CSS样式时，经常出现两个或更多规则应用在同一元素上时，选择器相同，则执行层叠性。选择器不同，就会出现优先级的问题。

CSS盒子模型（重点）

1.概念：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）

（1）盒子里面的文字和图片等元素是 内容区域

（2）盒子的厚度 我们成为 盒子的边框—border

（3）盒子内容与边框的距离是内边距—padding

（4）盒子与盒子之间的距离是外边距—margin

2.padding的属性

 

 

 3.margin的属性

上下左右外边距与padding写法相同，不同就是盒子的概念。

盒子会自动消除上下边距的重叠部分；嵌套块级元素同时设置垂直外边距，会发生边距的合并。无论是重叠还是合并都是以较大的边距作为参考设置最终的边距。

4.border的属性

利用css的border画三角形

 

 如果只需要一个三角形，只需把其他几个方位的颜色改为透明即可。