css基础

---

一、css如何应用在代码中

• 外链式
  单独写一个css文件，在HTML文件中引入css文件
  
• 直接式
  直接在HTML中的标签内写样式

二、选择器

标签选择器：p、span
类选择器：class=“” .xxx{}（类名不能以数字、汉字、特殊字符或以数字开头命名）
ID选择器：id=“” #xxx{} （一个标签只能调用一个id样式）
通配符选择器：*{} 改变所有的标签的样式
标签指定式选择器：eg： p .one{} 表示p标签中的class为one的元素
后代选择器：eg： div p{} 选择器之间用要有空格，且标签之间成嵌套关系。
并集选择器：eg： div，p 中间用逗号隔开。

三、HTML标签分类

1.块级元素：p、div、h、ul、ol

特点：
自己独占一行，不在一行中显示
默认宽度为100%
可以设置宽度和高度
两个块级元素嵌套时，子元素和父元素的宽度默认相等

2.行内元素：span、a、font、strong

特点：
所有行内元素都在一行内显示
不能直接设置宽度和高度，由其内容的宽度和高度决定
不能设置竖直方向上的margin，padding，可以设置水平方向上的

3.行内块元素：img、input

特点：
在一行上显示
可以设置宽度和高度

4.标签之间的模式转换

行内元素—>行内块元素：display：inline-block（在一行上显示，转换之后可以设置宽高）
行内元素—>块级元素：display：block (使元素在新行上显示，可以设置宽高)
块级元素—>行内元素：display：inline使元素在一行上显示，宽高不能设置）

四、Css样式注意事项

1.样式层叠性

标签中的样式发生冲突时，以最后一条指令为准。

2.样式的继承性

标签之间有嵌套性
超链接不能继承文字的样式
标题标签文字大小不能继承父元素的文字大小
Width、padding、border不能继承

3.css优先级

通配符选择器<标签选择器<类选择器<选择器id<行内选择器

权重关系：
！Important 10000
Style行内 1000
id选择器 100
.类选择器 伪类 10
标签、属性选择 1
继承 0.1

需要使用！Important的情况：

#someElement p {  
    color: blue;  
}  

p.awesome {  
    color: red;  
}  

[在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。]

五、伪类

• a:visite：超链接访问后的样式，且只能设置有关颜色的属性
• a:hover：鼠标移动到超链接上的样式
• a:active：超链接激活状态下的样式，即鼠标按下去的样式
• a:focus：获取焦点

若上述的所有样式都要设置，则需按照上面的顺序来设置。

六、行高line-height

1.行高的计算

行高=文字大小+文字的上下间距

2.文字垂直居中

将行高设置为与父级盒子高度一样，注意只能让文字居中，不能改变盒元素的位置。

3.行高值的单位

当单位为em、%或者不带单位时，高度为行高值*字体大小

4.行高的继承

先计算再继承
- em、%：子元素的行高=父元素的行高值*父元素的文字大小
- 不带单位时：子元素的行高=父元素的行高*子元素的文字大小

七、盒模型

边框border
内边距padding：内容距边框的距离
外边距margin：border边框距外边框的距离

注意

1.border、padding会影响盒子大小

• 盒子计算公式：页面宽度=设置的宽度+左右内边距+左右边框
• 所以如果盒子设置了边框和内边距的值，则设置宽和高的时候要减去这两个值。
• 当两个块级元素发生嵌套时，如果盒子没有设置宽度，则在父盒子宽度范围内，给盒子设定padding值不影响盒子大小。

2.magin表示盒子与盒子之间的距离

外边距塌陷：（盒子与盒子之间是嵌套关系）
解决方式：给父盒子添加border值或者给父盒子添加overflow：hidden属性

3.通常在最开始用通配符去掉浏览器默认的内外边距

* {
padding：0； 
margin：0；
}

4.居中

• 盒子居中：margin：0 auto；（脱离标准文档流的盒子不能使用该方法）
• 文字居中：text-align
• 文字和图片垂直对齐：vertical-align：middle
• 定位的盒子的居中：先让子盒子走到父盒子的宽度的一半50%，再往回走自己宽度的一半。Eg：left：50%；margin-left：-自己宽度/2；

5.方位

右下方向为正（与命名的方向相反）
eg：top：100px 表示向下走100px left：20px 表示向右走20px

八、定位

文档流：页面中块级元素和行内元素默认的显示方式。
top、left、right、bottom、z-index必须和position配合使用。（left、top优先级高于其余两个）

1.静态定位static

与标准文档流的显示方式一样，设置任何方位值都不起作用。

2.绝对定位absolute

脱离了标准文档流，不占位置。
相对于距离自己最近的有position属性的祖宗（父、爷爷等）节点定位，如果不存在则相对于可视区域。
情况一：子元素设置了绝对定位，父元素没有设置定位，则以浏览器左上角作为基准。
情况二：子元素设置了绝对定位，父元素也设置了定位，则以父元素的位置为基准。

3.相对定位relative

看自己原来的位置为基准。（虽然移动了，但原来的位置还要占空）
通常做法：父元素为相对定位，子元素为绝对定位

4.固定定位fixed

脱离标准文档流。（也就是原来的位置消失了，不能再用float）
以浏览器左上角为基准，拖动滚动条该元素的位置不变。

九、浮动

浮动的特点：
元素设置浮动之后，就不占原来的位置了，脱离了标准文档流。
会影响后面的元素。
块级元素设置浮动之后可以在一行上显示。
行内元素设置浮动之后可以改变宽高。
设置了浮动的元素如果高度不一致，以顶部对齐。

浮动的作用：
解决文字图片环绕的问题（图片加浮动）。
制作网页导航

清除浮动的情况：子元素的父盒子没有设置具体高度且所有子元素都设置了浮动时需要清除浮动。

清除浮动的方式：
给子元素的直接父元素设置overflow：hidden
用clear：both
通过伪元素清除浮动

十、Overflow用法

overflow：hidden 将内容超出的部分隐藏
overflow：scroll 添加滚动条
overflow：auto 内容没有超出就没有滚动条，超出时自动添加滚动条

十一、隐藏元素

display：none；元素隐藏后，该元素不再占位置。
visibility ：hidden；元素隐藏后，仍要占位置。

十二、Logo优化

一般logo都用a标签实现，a标签中写logo的名字便于爬虫搜索
将a标签中的文字移除：text-indent：-2000px；

十三、css命名方法论

.block{}:更高级别的抽象或组件
.block__element{}:.block的后代，用来形成完整的.block整体
.block–modifier{}:.block的不同状态或者不同的版本