CSS概要

img的vertical-align除了可以使文字垂直居中，还可以去掉img3px的下边距

选择器

基础选择器

标签选择器类选择器 ID选择器通配符选择器属性选择

复合选择器

交集选择器div.nav 后代选择器div .nav 子代选择器div>.nav 并集选择器.box,#max,span

文本元素

属性 font-size:16px; font-weight:文字粗细，值从100-900。不推荐使用font-weight:bold; font-family:微软雅黑; font-style: normal|italic; 默认值，italic斜体； line-height: 行高

文本属性简写 font:font-style font-weight font-size/line-height font-family; eg:font:italic 700 16px/40px 微软雅黑; 注意：一定按照书写顺序。文本属性连写 文字大小和字体为必写项。

字体的表示

直接写中文名称。eg：微软雅黑
写英文名称。eg:microsoft yahei
字体的Unicode编码。控制台找到对应Unicode码，方法escape(“宋体”)，使用时%u转化为\。

颜色的显示方式

直接写颜色英文名称
十六进制表示
rgb(r,g,b)
rgba(r,g,b,alpha)

样式属性text-indent=”2em”首行缩进,和padding的作用相似,也是对行内元素不起作用。

三种样式表对比

内嵌式，样式只作用于当前文件，没有真正实现结构表现分离。外链式，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）

CSS三大特征

层叠性当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

继承性继承性发生的前提是包含（嵌套关系）文字的所有属性都可以继承。h系列不能继承文字大小。a标签不能继承文字颜色。

优先级默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上优先级的特点：继承的权重为零;权重会叠加。

链接伪类

a:link{属性:值;} a{属性:值}效果是一样的。 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态
a:active{属性:值;} 链接激活的状态 a:focus{属性:值；} 获取焦点

文本修饰text-decoration: none|underline|line-through

背景属性

background-color

background-image

background-repeat:repeat(默认)

no-repeat

repeat-x

repeat-y

background-attachment:scroll|fixed 背景是否滚动注意：取值为fixed时，背景图片是相对于浏览器窗口的固定定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background</title>
    <style>
        .box{
            width: 500px;/*浏览器窗口宽度小于500时，才能看到右侧的背景图片*/
            height: 500px;
            background-color: #ddd;
            background-image: url(1.png);
            background-repeat: no-repeat;
            background-position:right;
            background-attachment: fixed; 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

背景属性连写 background:color imageUrl repeat position attachment 没有顺序要求，url为必写项。

行高

行高是可以继承的。行高的单位：px、em、百分数、倍数. 注意：给父元素设置line-height属性，属性值取倍数时是和子元素文字大小相乘。如下代码，div的最终行高是40px；若取值为2em，div的最终行高是60px。

<style>
    *{padding: 0;margin: 0}
    div{line-height:2;font-size:30px;border:1px solid red;}
    p{font-size:20px;}
</style>
<div>
    <p>测试</p>
</div>

盒子模型

内边距padding

内边距影响盒子的宽度边框影响盒子的宽度盒子的宽度=定义的宽度+边框宽度+左右内边距

如果盒子的宽度是继承的（没有直接定义），那么给该盒子设置小于父盒子宽度的左右padding值，都不会被撑大。

<!-- div的宽度522px；p的宽度500px； -->
<style>
    div,p{padding:0;margin:0;}
    .box{background:green;width: 500px;height: 400px;border:1px solid #ddd;padding-left:20px; }
    .box p{height:300px;background:pink;padding-left:30px; }
</style>
<body>
    <div class="box">
        <p>ceshi</p>
    </div>
</body>

外边距

垂直方向外边距合并两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。行内元素的内外边距左右起作用，上下不起作用，且相邻两个元素的外边距是叠加的。行内块可以定义内外边距。

嵌套的盒子外边距塌陷解决方法:
1 给父盒子设置边框 2 给父盒子overflow:hidden; bfc,格式化上下文

<!--影响box1下移-->
<style>
    .box1{width:500px;height:400px;background: blue}
    .box2{width:200px;height: 200px;margin-top:100px;background:orange}
</style>
<div class="box1">
    <div class="box2"></div>    
</div>

参考

网页布局

1.文档流

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。

2.浮动

浮动的特点

元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）

浮动的作用

文本绕图:图片浮动后，文字所在的块会补充文档流，但是文字和图片不会重合。
制作导航
网页布局

清楚浮动的方法

给浮动元素的父元素设置overflow属性，属性值取hidden(bfc 如果有内容出了盒子，不能使用这个方法。)
在最后一个浮动元素后添加标签，设置 clear:both 样式

给浮动元素的父元素添加伪元素清除浮动

.clearfix:after{
  content: "";
  width:0;
  height:0;
  display:block;
  clear: both;
}

3.定位

四种：静态定位、绝对定位、相对定位、固定定位。

position:static; 静态定位。默认值，就是文档流

position:absolute; 绝对定位。绝对定位特点： 1.绝对定位的元素脱离文档流。 2.绝对定位元素的参照物是浏览器。 3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是相对浏览器的。 4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是相对父元素。 5.给行内元素使用绝对定位，行内元素被转换为行内块（不推荐使用，推荐使用display:inline-block;）

position:relative;相对定位相对定位特点： 1.使用相对定位的元素，参照物是元素本身。 2.还占据原来的位置。 3.最实用的定位组合：父元素相对定位，子元素绝对定位。 4.行内元素使用相对定位不能转行内块。

position:fixed;固定定位固定定位的特点： 1.固定定位的元素脱离文档流。 2.元素使用固定定位之后，会以浏览器为参照物。 3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

CSS初始化

腾讯：

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px”宋体”,”Arial Narrow”,HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word}

新浪：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:”SimSun”,”宋体”,”Arial Narrow”;} ul,ol{list-style-type:none;} select,input,img,select{vertical-align:middle;} a{text-decoration:none;} a:link{color:#009;} a:visited{color:#800080;} a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } #### 定位盒子的居中显示 margin:0 auto;只能让标准流的盒子居中显示。margin-left:auto; 让子盒子靠在父盒子的最右边

定位盒子的居中:先设置left:50%,再向左走盒子的一半,修改margin属性。

图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline; vertical-align:middle;

内容移除-网页优化

使用text-indent:-5000em;
将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏

选择器