CSS3第二天（元素显示模式、图片背景设置）

1.元素显示模式

①块元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

特点：

1.独占一行

2.高、宽、外边距、内边距可控制

3.宽度默认是父级容器宽度的100%

4.里面放行内或块级元素

注意：文字类元素内不能使用块级元素 <p>、<h1>~<h6>

②行内元素 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

1.相邻元素在一行上，一行可显示多个

2.高宽不可控

3.默认宽度就是本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意：<a>链接里不能嵌套链接 特殊情况链接<a>里面可以放块级元素，但转换一下块级模式最安全 

③行内块元素 <img/>、<input/>、<td>

特点：

1.一行可以显示多个，之间有空白缝隙

2.默认宽度是它本身内容的宽度

3.高度、行高、外边距、内边距可控

元素显示模式转换：

转换为块元素：display:block;（经常使用，可以给它设置宽高）

转换为行内元素：display:inline;（设置在 同一行）

转换为行内块元素：display:inline-block;（兼具）

 

line-height=盒子高度的值，则行内文字会垂直居中。

 

CSS背景：

背景颜色bcg-color：xx

背景图片bcg-image：url（images/logo.png）/none 背景图片在背景颜色上

背景平铺bcg-repeat：repeat  no-repeat repeat-x repeat-y

背景图片

①设置方位名词

bcg-position：x轴 y轴； 如果省略一个，默认按居中显示。

x轴：left center right

y轴：top center bottom

②精确单位

bcg-position：x轴 y轴；x和y的位置按顺序写，如果写一个值，则是x轴方位值，y轴居中。

③混合单位 同上

背景固定bcg-attachent：scroll  fixed

 

背景复合写法：没有特定顺序 一般习惯约定为：

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background:transparent url(image.jpg) repeat-y fixed top;

background:rgba(0,0,0,.3) 红-绿-蓝-alpha透明度百分比

 

CSS三大特性：

层叠性：冲突则就进原则，不冲突的样式保留合并

继承性：继承字体的样式

优先级：

 链接<a>，系统默认加了样式，相当于元素选择器写了一遍样式，覆盖的话，需要通过类、id选择器等方式。

 

盒子模型学习

border-width 定义粗细，单位px

border-style 边框的样式 solid实线 dashed虚线 dotted点线

border-color 边框颜色

简写-->  border:1px solid red;没有顺序

边框可以分开设置-->border-top、border-bottom、right、left，可以利用层叠性让代码更简单border-collapse：collapse；相邻边框合并在一起

padding内边距 padding-left左内边距 padding-right padding-top padding-bottom

1个值，代表上下左右的内边距

2个值，代表上下内边距、左右内边距

3个值，代表上内边距、左右内边距、下内边距

4个值，代表上、右、下、左 内边距   顺时针设置。