CSS语法

CSS的元素显示模式：

块元素：

• 常见有<h1~h6>,<p>,<div>,<ul>,<ol>,<li>

行内元素：

• 常见有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
• 相邻行内元素在一行上可以显示多个
• 高宽设置无效
• 默认宽度就是他本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

行内块元素：

• <img/>,<input/>,<td>，他们同时具有块元素和行内元素的特点

元素显示模式的转换：

• 转换成块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块元素：display:inline-block;

单行文字居中的原理：

• line-height

CSS的背景：

背景颜色：

• background-color:颜色值；

背景图片：

• background-image:none|url(url)

背景平铺：

• background-repeat:|no-repeat|repeat-x|repeat-y

背景图片位置：

• background-position属性可以改变图片在背景中的位置

background-position:x  y;

背景图像固定：

• background-attachment属性设置背景图像是否固定或者随着页面的其余不分滚动

background-attachment:scroll  | fixed

背景复合写法：

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

背景颜色半透明：

background:rgba(0,0,0,0.3);

浮动：

• float

选择器{
    float:属性值；
}

浮动特性：

• 1. 脱标：脱离标准普通流的控制，移动到指定位置
• 2. 浮动的盒子不再保留原先的位置

清除浮动：

• 选择器{clear:属性值;}

1. left：不允许左侧有浮动元素
2. right:不允许右侧有浮动元素
3. both：同时清除左右两侧浮动

清除浮动方法：

• 1. 额外标签法：是W3C推荐的做法

- <div style="clear:both;"></div>

• 2. 父级添加overflow属性
  • 给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
• 3. 父级添加after伪元素

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    /*IE6、7专有 */
    *zocm:1;
}

• 4. 父级添加双伪元素:

 .clearfix:before, .clearfix:after{
     content:"";
     display:table;
     height:0;
 }
 .clearfix:after {
     clear:both;
 }
 .clearfix{
     *zoom:1;
 }

定位：

• 1. 定位组成

• static:静态定位 选择器{position:static;}

• relative:相对定位 选择器{position:relative;}

• absolute:绝对定位 选择器{ position:absolute;}

• fixed:固定定位 选择器{ position:fixed}

• 2. 边偏移

• 定位盒子移动到最终的位置，有top,bottom,left和right四个属性