继承性 层叠性 权重 盒模型 浮动 事件

1.继承性和层叠性:继承性:像一些文本的属性,color,text-*,line-*,font-*这些属性是可以继承下来的,text-decoration:underline(下划线)也可以继承;

2.层叠性就是权重,谁的权重大就显示谁的属性;

如何看权重?

就是数数,数(选择器的个数):优先id  然后是class  最后是  标签 ;

1.针对于选中的标签(谁的权重大,就会显示谁的属性);

2.如果权重一样大,以  后设置的为准;

3.如果是继承下来的属性,它权重为0,跟选中的标签没有可比性;

4.如果权重都为0,那么谁描述的近(就近原则),就显示谁;

5.如果权重为0,描述的一样近的时候,回到原始状态(数权重);

三 . 盒模型

属性:  width : 内容的宽度;

   height: 内容的高度;

   padding : 内容到border的区域;

   border : 边框;

<!--border:1px solid red;-->
<!--一个值:上下左右-->
<!--padding:10px;-->
<!--/*两个值:上下 左右*/-->
<!--padding:10px 20px;-->
<!--/*三个值:上 左右 下*/-->
<!--padding:10px 20px 30px;-->
<!--/*四个值:上 右 下 左*/-->
<!--padding:10px 20px 30px 40px;-->
一,二,三,四个值得设置,只有border可以, margin,padding都没有,而且border可以做出三角形的状态

      margin : 标准流的标签,  margin的使用通常是用在兄弟之间的标签;

  坑 : margin水平方向是没有任何问题;

  垂直方向会出现"坍塌问题",以设置的最大值为基准;

以后在写网站标准流的盒子,垂直方向只设置一个方向即可;

在两个块中,一个包含另一个,如果儿子踹他爹,可以踹,那么只需要给他爹加border,那么问题来了,页面冗余,可能会影响页面的布局;

记住 : 前提是标准流下的盒子;

  如果是父子之间调整位置,那么使用padding  ,  margin的坍塌要避免,只设置一个方向;

浮动元素 : 对行内元素和块元素的影响;

1.如果标准流下的标签浮动,定位(绝对固定,相对固定)了,不区分是行内还是块级元素,可以任意设置宽高;

2.浮动对块元素的影响,像把块元素转化成行内元素;

切记  :  浮动不做压盖现象;

  

猜你喜欢

转载自www.cnblogs.com/fengkun125/p/9509034.html