HTML-CSS流水账

一、Html

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

<span> <strong> <em> <a> <del>

2、块级元素：独占一行，可通过CSS改变宽高；块级元素可以嵌套任何元素，<p>标签内不能嵌套块级元素

<div> <p> <ul> <ol> <li> <form> <address>

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

<img>

二、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)都有文本特点