前端之路（CSS基础篇）

CSS的概念及其作用

css全称为（Cascading Style Sheets）翻译过来就是层叠样式表 作用：主要作用就是设置网页的文字（大小，颜色，字体，对齐等等）图片和板式布局等等 说的简单点了就是给页面化妆的

基本语法：

选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}

注意：符号必须是英文状态下的

字体属性

设置字体的大小

font-size  设置字体的大小   
•取值：font-size: 12px;  
注意：在css大多数数值都需要添加单位

设置字体的粗细

font-weight 设置字体的粗细 
取值：normal 、bold、 100 - 900

多说一嘴：用数字设置的时候，只有400和700会产生变化，是因为字体在初始设计的时候就没有设置太多的粗细标准，一般就是两种，默认的和加粗的所以 在实际工作中 用的最多的就是normal（400） bold（700）

设置字体的风格

font-style 设置字体的风格(样式)
取值：
•   normal 默认 显示标准的字体样式
•   italic 字体倾斜

设置不同类型的字体

font-family 设置不同的字体
取值：宋体、微软雅黑、黑体、。。。等等

多说一嘴：

1. 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。

2. 字体可以写多组，中间用逗号隔开

3. 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号

font简写

font: font-style  font-weight  font-size/line-height  font-family;
​
不建议修改顺序  并且不需要设置的属性可以不写  但是font-size和font-family必须指定，否则将不起作用

开发者工具 (重点)

开发者工具对于开发者来说特别重要，只要你开发你就离不开它。一定要学会使用作用：调试代码 检测代码的！！

打开开发者工具：f12 或者在页面上直接右键选择 “检查”

在基础班我们只需要关注elements这个面板 右侧的style就是当前标签对应的css样式 我们可以通过这个来检查代码错误和调试代码！！

选择器

想要操作任何一个标签，那么首先需要做的事情就是选中对应的标签，而这个就是选择器的作用

基础选择器

标签选择器

    标签名 {属性1: 值1;属性2: 值2;}

特点：会将页面上所有符合的标签都选择上，但是不能实现差异化选择

类选择器

声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} （声明类名选择器）

给对应的元素添加class类名属性 class="自定义的类名" （调用类名选择器）

如：.box {
        font-size:12px;
    }
<div class="box">内容</div>

多类名选择器

思考：需求：两个相同的标签，有一些共同的css样式 但是也有一些差异化的css样式

.red {
    color: red;
}
.ft12 {
    font-size: 12px;
}
.ft14 {
    font-size: 14px;
}
​
<div class="red ft12">内容</div>
<div class="red ft14">内容</div>

一个元素可以拥有多个类名 类名和类名之间用逗号隔开多类名选择器可以让我们解决更复杂的一些需求

id选择器

id选择器的使用方式和类选择器基本一致

1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}

2. 调用id 给对应的元素添加属性 id="自定义id"

#box {
    font-size:12px;
}
​
<div id="box">内容</div>

特点：id选择器一般配合后期的JS使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用，但是id选择器只能被一个元素调用 在同一个页面中吗，不能出现两个id值相同的元素

通配符选择器

* {
    属性1: 值1;
    属性2：值2;
}

特点：选中任何元素，后期用于页面初始化。

伪类选择器

伪类选择器可以理解为选择的元素的一种状态，并不是如之前直接选中元素就完事了

a:link   没有被访问的时候的状态
a:visited  访问之后的状态  
a:hover     鼠标移动上去之后的状态
a:active    鼠标按下的状态

伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成

a {}
a:hover {}

文字的对齐 缩进 下划线

水平对齐

text-align:值;  
取值：left right center
该属性控制的是标签  “内部的文字”  水平居中

首行缩进

text-indent:值;
取值可以是像素，也可以是em  推荐写法：text-indent:2em;

字体下划线和删除线

text-decoration:值;
取值：underline 下划线  line-through 删除线 none 去掉多余的样式

行高

行高控制的是文字与文字之间的上下距离 （行距）

line-height:值;

1. 值的取值是像素

2. **小技巧：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中

3. 两者结合使用可以让单行文字在标签内部水平垂直居中

其他细节属性

1. 颜色属性颜色属性的取值可以是 十六进制，rgb(), rgba()

2. css的注释/* 注释内容 */

样式表的书写位置

样式表可以有三种书写方式，分别分为

1. 内嵌式样式表

2. 外链式样式表

3. 行内式样式表

内嵌式样式表

内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面

<style>
    css语句
</style>

外链式样式表

单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件

<link rel="stylesheet" href="css文件的地址" />

行内式样式表

将样式直接写在标签本身上，以属性的形式存在

<div style="color:green; font-size:20px;"></div>

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内式样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内嵌式样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外链式样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

 

标签的三种显示模式

块级元素

1. 可设置宽和高

2. 独占一行

3. 默认宽度是父级标签的宽度

注意：p这种段落标签不要嵌套块级元素

代表标签：div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section,display:block;

行内元素

1. 不能设置宽高

2. 行内标签允许其他的行内标签排一排

3. 盒子大小完全是被内容撑开

注意：尽量不要用行内元素包裹块级元素 a链接除外

代表标签：a,span,b,u,s,i,strong,ins,del,em,display:inline

行内块元素

1. 行内块标签其实本质上是一种特殊的行内标签 （text-align可以控制行内块元素）

2. 允许其他的行内元素排一排

3. 可以设置宽高

代表标签：input,img,display:inline-block

复合选择器

     1.交集选择器

既又原则 
例如：p.box {}  既是p标签 又有box类名

     2.并集选择器

将多个选择器合并在一起 
例如： div,p,h1 {}  

     3.后代选择器

空格前面的元素和后面的元素必须是嵌套关系 
例如：.father .houdai {}

      4.子代选择器

> 前面的元素和后面的元素必须是父子关系 
例如：.father > .son {}

背景

背景颜色

background-color: red;     颜色可以设置成十六进制 或者 rgb 或者 rgba 

背景图片

background-image: url(图片路径);

背景平铺

background-repeat: 背景平铺;
​
1.repeat 平铺  默认的
2.no-repeat 不平铺
3.repeat-x 水平平铺
4.repeat-y 垂直平铺

背景是否滚动

background-attachment: 背景是否滚动;
​
1.scroll  默认值 图片跟随盒子一起滚动
2.fixed   图片不跟随盒子一起滚动

背景位置

background-position: 背景位置;
​
1.方位名词 right top left center bottom 书写的顺序不论
2.像素 如果是像素 那么默认在以“当前盒子”的左上角为0 0原点 构建一个坐标系 第一值是X轴的位置 第二个值是Y轴的位置 交互的点就是图片开始显示的起始位置
3.百分比  百分比参照的自身盒子的宽高： 最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比
4.还可以混写 混写是需要考虑顺序

背景的简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
​
如：background: #fff url() no-repeat scroll center center;

img和背景图片的区别：

img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的 需要专门写宽高
一般产品插入图都推荐使用img  而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

css的三大特性

继承性

后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承 块元素可以继承父级元素的宽度，高度不继承注意：a链接颜色不予继承，需要单独写注意：如果元素自身有该css样式，那么该样式不予继承

<div class="father">
    爸爸
    <div class="son">
        儿子
        <div class="grandson">孙子</div>
    </div>
</div>

层叠性

后渲染的css样式会覆盖掉先渲染的css样式 （权重相同的情况下） 注意：层叠性真针对css的书写位置，类的调用位置先后会它没有影响

<style>
    .box1 {
        /* 最终绿色起效果 */
        color: red;
        color: green;
    }
</style>
​
<div class="box"></div>

优先级（权重）

不同的选择器之间会有不同的优先级

继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 <　!important

盒子模型

网页的布局本质就是把网页上的元素，如图片，文字，都放入盒子里面，然后按照自己的需要摆放盒子的过程就是网页布局

盒子模型的组成

       width + padding + border

边框

边框有三部分组成：

border: 边框大小  边框样式（solid 实线 dashed 虚线 dotted 点线 double 双实线） 边框颜色;

直接这么写边框控制的是上下左右四条边框，如果想要单独某一条边框的写法

border-方位名词:边框大小 边框样式 边框颜色;

边框是一个复合属性，每一个部分都可以有单独的属性去控制 用的较少

边框大小；border-width
边框样式：border-style
边框颜色：border-color

• 补充：细线表格 border-collapse:collapse;

• 圆角：borde-radius:值; 一个值控制的上左 上右 下右 下左;课外链接补充：http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

内边距

padding的取值可以是1-4个
​
一个值：控制整个上下左右
两个值：第一个控制上下  第二个控制左右
三个值：第一个控制的上 第二个控制的左右 第三个控制的下
四个值：上右下左

也可以单独写：

padding-top
padding-bottom
padding-left
padding-right

注意：

1. 行内元素里面不要写上下padding，左右可以

2. 块级元素继承的是父级的width的宽度

外边距

1. margin的取值方式和padding一样

2. margin的大小只会移动盒子的位置，并不会对盒子的大小造成影响（特殊情况例外）

3. 行内元素也不要给上下的margin

4. 特殊值：auto margin:0 auto; 可以让一个块级元素水平居中

   • 前提条件：必须是块级元素 同时必须有固定的width

   • 注意：text-align和margin:0 auto的不同 前者是控制盒子内部的文字或者内部的行内块 后者控制的是盒子本身

清除内外边距

* { 
    padding: 0;
    margin: 0; 
}

外边距的BUG

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案： 避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，
则父元素的上外边距会与子元素的上外边距发生合并，
合并后的外边距为两者中的较大者，
即使父元素的上外边距为0，也会发生合并。

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。

1. 实际应用注意：在实际工作中，我们很难直接话的得到盒子的内容的大小，所以我们会直接将整个盒子量出来，在后续如果需要添加padding的情况下 一定要减掉 padding

2. 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）

浮动

布局的三种基本方式

1. 标准流 按照标签默认的特性摆放盒子即为标准流

2. 浮动流 利用浮动摆放盒子即为浮动流

3. 定位流 利用定位摆放盒子即为定位流

浮动的意义

1. 浮动最开始是做图文绕排的。

2. 浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右

浮动的特性解析

1. 浮动的元素会“脱标”

2. 脱标的元素拥有行内块的表现

脱标：（脱离了标准流）

标准流：块元素单独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流 （按照默认的规则排列的）
​
1. 脱标的元素不占标准流的位置
2. 不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）
3. 可以直接写宽高 （不论前身块级还是行内）
4. margin:auto对于脱标元素不起作用

浮动因为脱标的特性（脱离标准流了，不占位置，会盖住其他的标准流的盒子），所以，在使用上有一个口诀：要浮全浮（要浮动的话兄弟元素都浮动）

其他细节特性：

1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）
2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定, 会以上一个盒子的底边线为基准线水平移动，如果在移动的过程里面被挡住了，那么就会卡在这里地方）
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片
5. 尽量在标准流的盒子里面浮动

闭合浮动

浮动带来的问题：浮动元素撑不开父级容器

解决办法（闭合浮动）：

1. 强行给父盒子添加高度 （不推荐，不利于后期维护）
2. 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）
3. 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）
4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)

伪元素

就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染

伪元素特性：

1、伪元素由css渲染  所以不会增加你的DOM（html结构）开销
2、伪元素默认是行内元素 可以进行转块等处理
3、伪元素不管有没有内容  content这个值一定不能少 即使没有 也要写个空
4、伪元素 官方推荐写::  但是为了兼容考虑 写成单冒号
5、因为伪元素是css渲染  所以JS获取不到

伪元素清除浮动完整代码：

.clearfix::after {
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.clearfix {
    *zoom:1;
}
或者
.clearfix:before,
.clearfix:after { 
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
    *zoom:1;
}

版心：

是约束网页的一个具体的值

为什么要有版心?

因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束

版心的公共类的设定

.container {
    width: 1280px;
}
​
<div class="container"></div>

特殊情况：

设计师会给你一张很大的图片 1920 * 1000  (是为了适应不同的屏幕) 
但是版心只有1280 
​
问：图片怎么处理
​
答：这个盒子不做约束 width:100%;  这个图片作为背景图片放到这个盒子里面 
同时background-position:center 0;

定位

定位的使用包含两个部分：

1. 定位的方式

2. 偏移值 left,right,top,bottom

偏移值准确的理解是“距离什么位置有多大” 如 top:100px; 距离顶部为100像素 （向下走）

静态定位

所有的标准流都是静态定位

position:static;

• 一般用于将某些已经定位的元素还原成标准流，用的很少

• 偏移值对于静态定位来说不起作用，我们以后说的元素定位不包括静态定位

相对定位

相对定位是相对自己的标准流的位置进行定位移动

position:relative;

特性：

1. 移动的出发点是自身标准流的位置
2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在 灵魂永驻）
3. 可以盖在标准流的上方
4. 一般用于微调元素和配合绝对定位来实现效果

绝对定位

position:absolute;

特性：

1.移动的出发点：
    从绝对元素开始一直往上级找（直到找到最大的html标签），在这个过程中，只要有一个元素（A元素）是定位（相对，绝对，固定）的任何一个，这个绝对定位的元素就会参照这个A元素进行定位，并且不会在往上找了，如果一个都没有，最终会以html元素定位
​
2.脱标
    1.1. 脱标的元素不占标准流的位置
    1.2. 不会继承父级的的宽度，内容有多个就撑多大 （不论块级还是行内）
    1.3. 可以直接写宽高 （不论块级还是行内）
    1.4. margin:auto对于脱标元素不起作用

巧妙运用：让一个定位盒子水平垂直居中

left: 50%;
top: 50%;
margin-left:-自身宽度的一半;
margin-top:-自身高度的一半;

使用方式：

在工作中，绝对定位"大多"配合相对定位一起使用（父相子绝） 
父相：在标准流上占有位置
子绝：针对这个标准流在去移动
​
注意：父绝子绝的情况也有，只是很少，不要完全形成思维定式。

固定定位

position: fixed;

特性：

1.脱标
    1.1.脱标的元素不占标准流的位置
    1.2.不会继承父级的的宽度，内容有多个就撑多大 （不论块级还是行内）
    1.3.可以直接写宽高 （不论块级还是行内）
    1.4.margin:auto对于脱标元素不起作用
2.移动的出发点：浏览器窗口 （直接表现：滚动条对于固定元素没有作用）

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位的父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

z-index

控制“定位”元素的叠放层级

1. z-index只针对定位元素有效果

2. z-index值越大，层级越高

3. 如果父元素已经比较过层级了，那么子元素与子元素之间是不会再去比较的

元素的显示和隐藏

将元素的显示模式设置成none即可让元素隐藏

display的值为none的时候，元素完全隐藏
display的值为block的时候，元素呈块级显示
display的值为inline的时候，元素呈行内显示
​
display为none隐藏时候是不占位置的
实际工作中用的较多

visibility 控制元素的显示和隐藏

visibility的值选择
hidden 占位置隐藏
visible 显示
实际工作中用的较少

overflow

控制元素溢出之后的显示方式

取值：
visible  直接显示
hidden   超出的部分隐藏掉
auto     如果超出，自动产生滚动条，如果不超出，不产生
scroll   不管有没有超出，都有滚动条控件
​
overflow-x:hidden;
overflow-y:hidden;

BFC

块状格式上下文 产生BFC之后，盒子内部的空间与外部完全隔离

那些可以产生BFC ?

overflow只要取值不是visible的情况下
float的值不为none的时候
display为table或者inline-block的时候
position的取值为fixed或者absolute

(课外BFC参考资料)[https://www.cnblogs.com/CafeMing/p/6252286.html]

vertical-align

控制行内块与文字的对齐方式，写在行内块元素上面

取值：

baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线（行高的顶线）对齐
bottom 图片的底线和文字的底线（行高的底线）对齐
middle 图片的中线和文字的中线对齐

应用场景：

可以解决图片与文字排列时候底下留白的问题 
（不要让图片以基线对齐即可 或者将图片转成块元素）
可以解决表单元素与文字排列不对齐的问题
（设置图片的vertical-align：middle || top || bottom）
可以设置图片（行内块）垂直居中
可以设置多行文字居中显示

如何让一个行内块在一个盒子里面水平垂直居中：

1、给父级元素设置text-align：center  （水平居中）
2、给父元素设置一个等高的行高
3、给行内块元素设置vertical-align：middle；（让图片以文字的中线对齐）

如何设置多行文本水平垂直居中

1、给多行文字包裹一个盒子 给这个盒子设置成行内块 
2、给父级元素添加行高，并且给行内块元素设置成vertical-align:middle;即可
3、给行内块添加行高  让其覆盖掉继承过来的行高 

溢出文字以省略号的形式显示（单行）

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
white-space: nowrap; 文字换行

精灵图（雪碧图 sprite）

概念：就是将很多的小图片 icon，都整合到一张大图上使用。作用：减少网络请求，降低服务器压力，提高效率原因

因为浏览器会去服务器请求页面，请求回来的页面在执行的过程里面，会不断的去服务器请求对应的图片，当页面上的小图片过多了，那么浏览器会频繁的去服务器发请求，这个会给服务器带来很大的压力，同时效率很慢。解决方式就是将小图片整合到一张大图上，直接请求大图片即可，需要使用到某一张小图的时候只需要获取这个小图在这张大图的位置即可

使用方式：
1.将需要显示的区域用PS切片选中，直接将PS切片的宽高赋值给盒子
2.直接获取PS切片的坐标，直接将坐标取负值赋值给background-position

 其他细节

 1.cursor：
        pointer 小手
        default 箭头
        text 文本
        move 移动
        url(),临时替换的样式
2.outline:none;
    去掉选中之后的蓝色边框
3.resize:none;
    去掉文本域的自动拉伸效果