初阶CSS全览

1. web三大技术

HTML--搭建框架
CSS--装饰美化 decoration
JavaScript（JS）--交互

2. CSS

层叠样式表，stylesheet

2.1 引入CSS

内联：

<h1 style="color: blue;">today Thursday</h1>

内嵌：

    <style>
        h2{
            color: brown;
        }
    </style>

外联文件：（推荐）
单独创建.css文件
在head中引入link标签：

<link rel="stylesheet" href="css/base.css">

@import（了解，几乎不使用）
在一个css中导入另外一个css文件；

2.2 css语法

选择器 {
css属性: 属性值；
…
}

2.3 选择器

2.3.1 语法

选择器的名称，字母开头，全部采用小写；
选择器中只能由字母数字字母 下划线(_) 连字符(-)组成：

2.3.2

元素选择器：会选中所有的相同的标签。
标签名 {

}

id选择器：唯一

id选择器

#pi { font-size: 20px; }

class 选择器：（推荐使用）

class选择器

.big { font-size：50px; }

• 选择器：选中所有的标签
  可以作为重置浏览器默认给的css样式
• {
  margin: 0;
  padding: 0;
  }

2.3.3组合选择器

后代选择器（常用）
E F{
选择E中所有的后代F
}

子代选择器：
E>f{
只选择第一个（第一代）
}

兄弟选择器：
E~F{
后面跟着的所有同级
}

下一个兄弟
E+F{

}

分组选择器
E,F{

}
.box,.box2{
width: 600px;
height: 300px;
background-color: brown;
}
.box2{
border:1px solid red;
}

2.3.5伪类选择器

E：link（正常，未访问的链接）
E：visible（用户已访问过的链接）
E：hover（用户鼠标放在链接上时）
E：active（链接点击的那一刻）
E：focus（选择具有焦点的输入元素）
E：first-child（指定只有当

元素是其父级的第一个子级的样式。）

2.3.5伪元素 区分:的多少

::befor
必须设置content：‘属性’；
特性与内联属性一样；
也可以使用一个冒号；

::after
必须设置content：‘属性’；
特性与内联属性一样；
也可以使用一个冒号；

2.4 css权重

css引入优先级：
代码执行顺序决定了大部分问题
行内>内联||外联

权重：
!important>行内样式（1000）id选择器（100）>class选择器（10）>元素选择器（1）

*权重可以相加；

*当权重值相同时，看先后顺序；

*权重值不一样时，看权重大小；

文字属性

color：颜色值；
颜色单词：red blue
十六进制：#000000 #f5f5f5
RGB：RGB（255.255.255）
rgba：rgba（255，255，255，0.1）透明度

text—decoration：none（空） | underline（底部划线） | overline（顶部划线） | blink（定义闪烁的文本。） | linethrough（删除线）

text—aline：right | left | center（水平居中）
文本对齐（文字和内联元素生效）

text-indent：数值；
设置缩进，值可以是百分比也可以是像素
em是字符的意思

text-transform：none | uppercase（全部大写） | lowercase（全部小写） | capitalize（首字母大写）

word-spacing：大小；
改变单词之间的间隔（只针对英文）

letter-spacing：大小；
修改字符间隔（字符是指所有信息）

direction：文本方向
ltr从左边排 | rtl从右边排

text-shadow：x y 模糊 颜色；
文本偏移

word-wrap: normal | break-word;
是否允许长单词或者url地址换行。

4.字体属性

font-size：大小；
设置字体大小

font-style：normal | italic；
字体倾斜

font—weight：400；
加粗，值100~900直接的正数 bold bolder
lighter变细

font-family：字体；
使用安全字体
多个单词和中文字体要打引号，多个字体逗号隔开

font:是以上几个属性的简写，使用简写的时候必须指定字体大小和字体系列，其他属性可省略。
font: font-style font-weight font-size/line-height font-family;

line-height:大小;(行高)
应用:当当前块级元素只有一行文字的时候，设置块级元素的行高=块级元素的高度，可以实现内部文字在垂直方向上居中。

5.其他元素

width：% | px；宽度
height：% | px；高度
只能给块级元素设置宽高

background：设置背景
background-repea（重复）
backgrongd-images：url（图片地址）
background-size：100% | width 100% | height；设置背景图大小；
contain:其中一边与盒子一样大，另一边等比例缩放;
*cover：等比例放大图片，一直到最短边与盒子一样大，必然会导致场边会被裁剪；
background-position：canter； （背景图定位）
background：url（） no-repeat center/cover；设置背景图片不重复且居中

6、vertical-align

middle（水平中间 图片和td用）
在垂直方向上的对齐方式。(内联元素或者表单)
baseline（ 默认。元素放置在父元素的基线上。） | sub（ 垂直对齐文本的下标） | super（垂直对齐文本的上标） | top（ 把元素的顶端与行中最高元素的顶端对齐） | bottom（ 使元素及其后代元素的底部与整行的底部对齐。） | middle（把此元素放置在父元素的中部。） | text-top（ 把元素的顶端与父元素字体的顶端对齐） | text-bottom （使元素及其后代元素的底部与整行的底部对齐。）具体长度值；

扩展：一个元素垂直方向上居中（应用有限）
display：table-cell；
vertical-align：middle；（内联元素，表单元素）

7. 盒子模型

7.1 概念

css中非常常用的思维模型，可以把每一个标签（元素）看做是一个矩形盒子，一个页面就由各个盒子通过不同的排列方式进行堆叠，盒子之间彼此影响。

7.2分类

标准盒子模型（w3c组织）

怪异盒子模型（IE盒子模型）

7.3标准盒子模型

content（内容）：展示内容的区域

padding（内填充）：（padding的颜色和内容是一样的）介于内容与边框之间

border（边框）：单独设计颜色 样式

margin（外填充）：透明的区域

重点：盒子实际大小。
    宽度= width+padding*2+margin*2
    高度= height+padding*2+margin*2

7.4padding

padding：四边的大小
padding-left
paddinf-right
padding-toppadding-bottom
padding：10px 20px；
上下 左右
padding：10px 20px 30px；上 左右 下

7.5margin

margin 重叠的问题
如果两个元素在垂直方向上都有margin，则两个元素之间的距离取margin的最大值。
父子嵌套的时候，子元素设置margin-top，并且父子元素之间具有其他的元素，浏览器会把子元素的margin-top作业于父元素。
*父元素设置浮动；
*父元素设置padding-top: 1px
*父元素添加一个border；
*父元素设置display：inline-block 同时拥有块级元素和行元素的的特征
***父元素设置overflow：no-visible（推荐）

margin 双倍边距bug
在IE6下，如果设置了左浮动，并且也设置了 margin-left，那么实现margin效果是两倍margin-left的值。
解决办法:设置display: inline;

7.6overflow（溢出）

：属性
visible 超出后依然使用
hidden 溢出隐藏
scroll 滚动列表（不分超出情况 都要滚动条的）
auto 自动辨别是否为滚动列表

7.7 display

用于决定当前元素表现的特性。
inline：
当前元素为内联标签的特性。
无法设置宽高 大小内容决定
可以设置水平方向margin，padding、border；
垂直方向的padding、border；会遮挡其他元素

balock：
块级标签的特性
宽度默认父元素的100%独占一行

inline-block
*不会独占一行
*可以设置宽高
中和二者特性

table-cell
单元格的特性

8.float

8.1文档流

块级从上到下，内联从左到右

8.2浮动

遇到边缘部分就会掉下去
可以定位

8.3浮动语法

float：left | right

8.4浮动的影响

会改变当前块级元素独占一行的特性；
浮动元素不会影响之前的元素，但是会影响后面的元素
会让当前文档脱离文档流
导致父元素高度坍塌。
块级元素没有宽度，设置浮动后会将块级元素压缩到内容宽度。
内联元素浮动之后，可以设置宽高。

8.5清除浮动

clear：left | right | both

5.6清除浮动对父元素的影响

添加一个空标签设置一个clear
给父元素直接设置高度（知道子元素高度）
父元素一起浮动：
父元素设置 overflow：hidden；（一般 但是IE9不支）
伪元素方案：清除浮动固定代码 在父元素上class里写
.clear::before,
.clear::after{
content:’’;
display: table;
}
.clear::after{
claer:both
}

水平居中块级元素
前提：块级元素 必须设置宽度
margin-left：auto；
margin-right：auto；
margin：0 auto；