１.元素显示模式

（１）概念：元素显示模式就是元素(标签)以什么方式进行显示

（２）元素显示模式的分类

・块元素：

例：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点：

自己独占一行
可以控制宽度，高度
宽度默认是容器的100%
是一个容器或盒子，可以放行内或块级元素

注意点：

<h1>~<h6>、<p>文字类元素不能放块元素

・行内元素

例：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

特点：

相邻元素在一行，一行可以有多个
不能直接设置宽度，高度
默认宽度是它本身的宽度
只能容纳文本或其他行内元素

注意点：

<a>里面不能再放<a>
<a>里面可以放块级元素，但最好给<a>转换成块级模式

・行内块元素

例：<img />、<input />、<td>

特点：

和相邻行内元素(行内块)在一行上，中间会有空白缝隙。一行可以显示多个(行内元素特点)
默认宽度是它本身的宽度 (行内元素特点)
高度，行高、外边距以及内边距都可以控制(块级元素特点)

（３）元素显示模式的转换

①概念：一个模式的元素需要另外一种模式的特性

②转换方法：

转换为块元素

display:block;

转换为行内元素

display:inline;

转换为行内块

display: inline-block;

让文字垂直居中的tips：

让文字的行高等于盒子的高度

height: 40px;
line-height: 40px;

２.css的背景

（１）背景颜色

background-color:transparent;
background-color:颜色值;

（２）背景图片

background-image : none;
background-image : url (url);
//(url) 里面的url是图片地址，不加引号

*不用img，用background-image的优点：便于控制位置

（３）背景平铺

background-repeat: repeat；
//平铺
background-repeat: no-repeat；
//不平铺
background-repeat: repeat-x；
//x轴平铺
background-repeat: repeat-y；
//y轴平铺

（４）背景图片位置

background-position: x y;
//参数x,y可以是方位名词或者精确单位

①参数是方位名词

background-position: center top;
//background-position: 方位名词;
//水平居中， 靠上   
//方位名词顺序可变

background-position: top;
//另一个参数省略，默认居中

②参数是精确单位

background-position: 20px 50px; 
//background-position: 精确单位;
//x轴20px，y轴50px

background-position: 20px; 
//第二个参数省略，x轴20px，y轴居中

③参数是混合单位

background-position: 20px center;
//x轴20px,y轴居中

（５）背景图像固定

background-attachment : scroll;
//背景图像默认滚动
background-attachment : fixed;
//背景图像固定

（６）背景复合写法

background: transparent url(image.jpg) repeat-y fixed top ;
//background: 颜色 地址 平铺 滚动 位置;
//没有固定的顺序

（６）背景色半透明

background: rgba(0, 0, 0, 0.3);
//最后一个参数是 alpha 透明度，取值范围在 0~1之间
//0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
//注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响 
//CSS3 新增属性，是 IE9+ 版本浏览器才支持的

３.CSS的三大特性

（１）层叠式：

原则：样式冲突，就近原则；样式不冲突，不会层叠

好处：解决样式冲突

（２）继承性：子标签继承父标签某些样式

例：以text-,font-,line-开头的元素，color属性。。。

好处：简化代码

特殊：行高的继承

css    
body {
    color: pink;
    font: 12px/1.5 'Microsoft YaHei';
}

div {
    /* 子元素继承了父元素 body 的行高 1.5 */
    /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
    font-size: 14px; 
}

html
<body>
    <div>
    </div>
</body>

（３）优先级：

原则：选择器相同，执行层叠性（就近原则）；选择器不相同，根据选择器权重执行

记忆方法：通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表（style="属性：值"）为 1000, !important 无穷大

注意点：如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

权重叠加：复合选择器，则会有权重叠加，需要计算权重（会叠加，但不会进位）

css
ul li {
    color: green;
}
/* ul li 的权重是 0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */

li {
    color: red;
}
/* li 的权重是 0,0,0,1    1 */

html
<body>
    <ul class="nav">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

css（day1）

１.元素显示模式

２.css的背景

３.CSS的三大特性