HTML-CSS流水账

一、Html

1、行级元素：内容决定元素所占位置，不可通过CSS改变宽高；行级元素只能嵌套行级元素

 

2、块级元素：独占一行，可通过CSS改变宽高；块级元素可以嵌套任何元素，

标签内不能嵌套块级元素

1. 3、行级块元素：内容决定大小，可通过CSS改变宽高

   二、Css

   1、权重

   !important                           Infinity

   行间样式                             1000

   id                                          100

   class|属性|伪类                   10

   标签选择器|伪元素             1

   通配符选择器                      0

   2、margin塌陷解决办法：bfc(block format context)

   如何触发一个盒子的bfc

   position:absolute

   diplay:inline-block

   float:left/right

   overflow:hidden

   3、定位

   absolute：脱离原来位置进行定位，相对最近有定位的父级进行定位；如果没有则相对文档进行定位

   relative：保留原来位置进行定位，相对自己原来的位置进行定位

   4、float:left/right

   浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们

   产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素

   可以使用伪元素清除浮动，示例代码如下：

   .wrapper::after{

   content:"";

   clear:both;

   display:inline-block;

   }

   5、postion:absolute;float:left/right;系统会自动将元素转换成inline-block

   6、溢出容器，要打点显示

   单行文本：

   .wrapper::after{

   white-space:nowrap;

   overflow:hidden;

   text-overflow:ellipsis;

   }

   多行文本：容器高度设置为行高的整数倍

   7、文本类元素(inline,inline-block)都有文本特点