该篇主要是对自己查漏补缺的一篇文章。

1.<q>标签

    引用标签，默认加上双引号；

2.<blockquote>标签

    引用标签，不会加上双引号，左右缩进。

3.<hr/>和<br/>没有结束标签

4.<address>地址标签

5.<code>代码标签

6.<pre>标签

    预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

7.mailto标签

<a href="526295149@qq.com?subject=邮件主题&body=邮件内容">

8.为<select>设置multiple="multiple"即可以实现多选功能

9.子选择器 div>ul

选择div里面的第一代子元素ul，隔代的不起作用

<div><ul><li></li></ul></div>

10.包含（后代）选择器 div ul

和>子选择器比较，空格作用于元素所有的后代

11.分组选择器  div,ul

 它相当于同时对组内的选择器起作用

12.标签的权值

继承标签的权值为0.1，类标签选择器的权值为1，类选择器的权值为10，ID选择器的权值为100，如 

.class span {} 权值就为：10+1；权值越大，优先级越高。

13.text-indent

首行缩进。

14.word-spacing

字体间距

15.标签分类

块级元素：<div> <p> <h1>..<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

    宽、高、行高、底边距都可设置，当没有设置宽度时，默认宽度为其父容器的100%。

    转换为内联元素：display:inline;

内联元素：<a> <span> <br> <i> <em> <strong> <label> <q> <code>

    宽度、高度不可变，由其内容决定。转换为块级元素：display:block;

行内块元素：<input> <img>

    在一行，宽度、高度可以设置。转换为行内块元素：display:inline-block;

16.CSS的布局模式

流动模型（Flow）,浮动模型（Float），层模型（Layer）

17.水平居中

    文本、图片通过设置text-align:center来设置；

    定宽、块级元素：通过margin左右设置；

    不定宽、块级元素：

    1）加<table>标签；table标签的长度自适应，根据其文本内容决定。

    
	
     
		      
       
			        
你好我是居中标签，没有宽
		       
	      
     
    

 

table{			margin: 0 auto;}

  2）将块级元素转换为内联元素，然后再利用内联元素的text-align:center；

 3）通过给父元素设置，然后给父元素设置  和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

18.垂直居中-父级元素高度确定的单行文本

    通过设置line-height和height相等来设置。

19.垂直居中-父级元素高度确定的多行文本

    1）使用<table>同时包括（<tbody> <tr> <td>） 同时设置,vertical-align:middle;

    2)  使用display:table-cell,同时设置vertical-align:middle;

20.  隐形改变display类型

    当为元素设置position:absolute或者float:left或者float:right时，元素都会变为dispaly:inline-block行内块元素。

21.boder-width不支持百分比

22.使用boder写三角形

.nei{		width: 0px;		height: 0px;		border-width: 100px;		border-color: red red transparent transparent;   		border-style: solid;	}

使用CSS改变图片颜色：

.context{    width: 20px;    height: 20px;     overflow: hidden;}.tu{	position: relative;	left: -22px;	border-right: 20px solid transparent;	filter: drop-shadow(20px 10px #ff8040);}