CSS学习线路导读

CSS好好 “表现”（presentation）

1. CSS作用：美化，布局,让结构(html)和样式"css"分离

2. 构成：

选择器 {
    属性: 值;
}
p{
    /*p是标签*/
    color:red;
}

3. CSS标签选择器(基础选择器 / 复合选择器)

基础选择器：

• 标签选择器
• 类选择器
• id选择器
• 通配符选择器

3.1. 标签选择器(用标签名作为选择器)

// 优点：页面中标签全部选择
// 缺点：不能差异化选择
p {
       color: red;
}

3.2. 类选择(重点)

可以先定义，谁调用就写在谁身上,书写注意事项: 冒号后面空一格

/* 样式点定义，结构类class 调用，一个或多个，开发最常用*/
.box {
    border: 1px;
}
<div class="box">一个大盒子</div>


/* 多类名*/
.red {
    color: red;
}
.sz {
    font-size: 20px;
}
<div class="red sz">刘德华</div>

3.3 id选择器

#box {
    border: 1px;
}
<div id="red">刘德华</div>

标签选择器和id选择器的区别

1. id选择器定义**#**完了，只能自己调用，调用一次，其他不能调用 （相当于身份证号码），和js搭配使用
2. 类选择器可以多次调用 （相当于名字）

3.4 通配符选择器

/*清除所有元素的内外边距*/
* {
    margin:0;
    padding:0;
}

4. CSS字体属性(字体系列，大小，粗细，文本样式(斜体，加粗))

4.1 字体系列：font-family在页面中通常是给body一个字体

p {
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

4.2 字体大小 font-size 在页面中通常是给body一个字体大小，标题标签比较特殊需要单独给文字大小

p {
    font-size: 16px;
}

4.3 字体粗细 font-weight [normal,bold,bolder,ligher]

//不需要加单位 很重要
p {
    font-weight: 400/(normal), 700(bold);
}

4.4 font-style 文字的样式 斜体itelic 和 normal,一般用于将斜体转换成正常显示字体

em {
   font-style: normal;
}
<em>放学别走</em>

4.5 字体的复合属性(记住！！！)

font-size和font-family是必须要写的，不然不起效果

   body {
       font: font-style font-weight font-size/line-height font-family;
   }

5. CSS文本属性 (颜色，对齐文本，装饰效果，文本缩进，行间距)

5.1: 颜色 color

5.2: 对齐文本 (text-align:center)

只能设置水平对齐方式,其实就是实现文字在所在的盒子居中对齐, 这里面是给图片添加了一个p便签，想要让图片水平居中中需要个父级添加一个水平居中text-align:center

5.3: 装饰文本(text-decoration)

可以给文本添加下划线(underline)，删除线(line-through)，上划线(overline)，和去掉线(none)

5.4 文本缩进(text-indent)

指定文本首行的缩进,通常是2em(点前元素两个文字大小的距离)

5.5 行间距(line-height) **控制文字行与行之间的距离

行高的测量，可以从第一行文字的底部，测量到下面的底部

加强理解:chrome默认的文字大小是16px，当把行高设置成16px的时候，(由上面的图片得知，行间距是由上间隙,文本高度，下间距组成的)，上间距和下间距就看不到了，也就是实现了文字居中的效果

6. 内部样式表/外部样式表/行内样式表

• 内部样式表(可以放在html任何地方，一般放在head中)，控制范围(整个html页面)
• 行内样式表(用的少) 样式简单的时候使用，<p style="color:pink;font-size:20px">
• 外部样式表使用的是最多的。新建文件叫做 ***.css | style.css

7. chrome调试工具

• f12打开调试工具

• ctrl + 滚轮 放大缩小代码区

• ctrl + 0 复原浏览器大小

8. CSS目标(2)

• 使用emmet语法

• 使用复合选择器

• 写出伪类选择器规范

• 说出元素几种显示模式

• 模式相互转换的代码

• 写出背景图的设置方式

• 计算css权重

8.1 emmet语法(tab键)

生成多个 li*3

父子级 ul>li

兄弟关系div+p

类选择器 #nav

id选择器banner

想要生成递增的类选择器.demo$*5其实就是把1,2,3用$符号代替了，结果就是<div class="demo1"></div> <div class="demo2"></div>

想要标签里面显示几个文字 div{pink老师} 显示结果就是 <div>你好你好</div>

8.2 快速格式化代码

 "editor.formatOnType": true,
 "editor.formatOnSave": true

9. 复合选择器:后代选择器(重要)，字元素选择器，并集选择器，伪类选择器

9.1 后代选择器

   /*
   元素1 元素2 {样式声明}
   一层层往下查找，就是选子元素孙子元素，子子孙孙
   */
   ol li {
       color: pink;
   }

9.2 子元素选择器

   /*只能选择作为某个元素最经一级的子元素，就是选亲儿子元素*/
   元素1> 元素2{样式声明}

9.3 并集选择器(重要)

/*选择多组标签，定义相同样式，集体声明，任何选择器都可以是并集选择器里面的一部分   */
元素1,元素2 {
    样式声明
}
p,
div, 
.pig li {
    color:pink;
}

9.4 伪类选择器**(用 : 的都是伪类选择器)**

   /*1. 链接伪类选择器*/
   a:link /*选择未被访问的链接*/
   a:visited /*选择所有已被访问的链接*/
   a:hover	/*选择鼠标指正位于其上的链接*/
   a:active /*选择鼠标按下不松开的链接*/
   /*注意:
   1: 顺序不能颠倒
   2: lv hao
   3: a链接在浏览器中有默认样式(字体颜色蓝色，有下滑线)，在实际开发中给单独样式
   4.开发中一般都是给a一个颜色,然后给鼠标经过一个样式
   */
   a {
       color:grey;
   }
   a:hover {
       color: red; //鼠标经过由原来的灰色变成了红色
   }
   /*
   2. :focus 伪类选择器  用于选取获得焦点的表单元素，焦点就是光标。一般情况<input>表单元素才能获取，这个选择器也是主要针对表单元素
   */
   input:focus {
       background-color:yellow;
   }

10. 元素的显示模式**(块级元素(自占一行),行内元素(一行可以放好几个))**

10.1 块元素

• <h1>-<h6>,<p>,<ul>,<ol>,<li>，<div>
• 独占一行
• 可以设置宽度 高度 内外边距
• 盒子宽度默认是容器(父级宽度)100%
• 里面可以放行内和块级元素
• 注意:文字标签

  主要存文字，不能发放块级元素，特别是div

10.2 行内元素(有的地方叫内联元素)

• <a>, <strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

• 在一行上，一行显示多个

• 宽高设置无效

• 默认宽度是内容本生宽度

• 只能容纳文本和其他行内元素

• 链接a不能再放链接

• 特殊情况可以放块级元素，但是给转换一下块级模式最安全

10.3 行内块元素

• <img/> <input/> <td>
• 和相邻元素(行内块)在一行上 但是他们中间会有空白缝隙 一行可以显示多个(行内元素特点)
• 默认宽度就是本身内容的宽度(内容撑起宽度),可以设置宽度和高度(行内元素特点)
• 高度，行高 外边距以及内边距都可以控制(块级元素特点)

11.css背景(背景颜色 背景图片)

**11.1背景图片使用场景

一般是logo 超大图用背景图片比较合适,或者装饰类的小图片(精灵图)

background-repeat:repeat  no-repeat   repeat-x   repeat-y
背景图片会压住背景颜色

11.2 背景图片的位置 background-position: x y

1. 后面可以跟方位名词 top center bottom left center right 前后顺序没有关系
2. 如果只写一个方位名词第二个方位名词默认是居中的
3. 可以跟百分数 10px
4. 混合单位 backgroud-position: 20px center 20px必定是x轴 center 是y轴

11.3 背景附着(background-attachment）后期设置视差滚动效果 scoll fixed

11.4v背景的复合写法 没有顺序要求

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent ulr(img.jpg) repeat-y fixed top;

11.5 颜色半透明

background: rgba(0, 0, 0, 0.3);
平常开发中0.3 一般把0省略 就是.3

12. CSS的三大特性

1.1 层叠性

就近原则，下面的覆盖上面的，哪个离得近就执行哪个样式

1.2 继承性(继承的都是和文字相关的,text-, font-, line-, color)

会继承字体颜色和样式 inherited
行高的继承 line-height
子元素可以继承父元素的行高,就想下面的图，行高可以不带单位，意思就是子元素的行高是字体大小的1.5倍，如果子元素没有定义行高就往上找，找到父元素的字体大小，然后在乘上1.5,就是行高

1.3 CSS权重

1.继承和通配符选择器权重是0
2.标签选择器(元素选择器)是1
3.类选择器，伪类选择器 10
4.id选择器 100
5.行内样式 style 权限是 1000
6. !important 重要的 权限是无穷大

div {
	color:pink!important;
}

13. 盒子模型

1.盒子模型
2.浮动
3.定位

网站布局的步骤(重要):

1. 先准备网页相关元素(div p h1-h6)，网页元素基本都是box

2. 利用CSS设置好盒子模式，然后拜访在相应的位置

3. 往盒子里面放内容
   网页布局的核心本质:核心就是放盒子
   盒子模型的组成部分: (margin|padding|border|content)

4. border(border-width:100PX[设置粗细单位px], border-style:[none|soild|dotted|dashed],border-color:pink)

border简写: border(1px soild red); 顺序没有要求(boder-top,border-right,border-bottom,boder-left)

5. 表格table 清除边框 border-collapse:collapse;

14. 内外边距(padding, margin,border)

14.1padding内边距(padding:left | right | top | bottom) 1.会影响盒子大小 2.内容和边框有了距离

如果原本的盒子有了宽度和高度，再加上内边距会把盒子撑大，用盒子的宽度减去盒子的内边距就可以了，如果盒子没有给定确切的宽度或者高度，那么就不会撑开盒子

连写:
padding 5px 10px 15px 20px;四个值是：上 右 下 左 5px 10px 15px 20px;
padding:5px 10px 15px;  三个值是: 上5px 左右10px 下边距15px;
padding:5px 10px;两个值是: 代表上下边距是5px 左右边距是10px
padding:5px; 一个值是: 上下左右内边距都是5px

14.2 margin margin-top |left |top |bottom

**重要应用: 外边距可以让块级元素水平居中 **
必须满足以下两个条件:

1. 盒子必须指定宽度(width)
2. 盒子左右边距必须设置成auto,
3. 写法：margin: 0 auto;

重要: 行内元素和行内快元素是没有宽度的，想要让他们水平居中只能把他们当成是文字，可以给父级元素添加text-align:center

14.3 外边距合并(外边距塌)陷问题

1. 相邻块元素垂直外边距合并(只会取两者中较大的值)
2. 嵌套元素垂直外边距的塌陷 (对于两个嵌套关系的(父子关系)块元素)，父亲有上外边距，子元素也有上外边距，此时父元素会塌陷较大外边距。也是取两者中较大值

解决方案:

第一种情况的解决方案: 直接给一个盒子margin值

第二种情况的解决方案:

• 给父元素定义上边框
• 给父元素定义内边距
• 给父元素加上overflow:hidden

14.1. 清除内外边距

   /*
   为什么要清除内外边距?
   1.很多元素都自带样式，p标签就自带上下的边距
   2.默认浏览器的样式也不一样 需要清除样式
   */
   * {
       margin:0;
       padding:0;
   }

注意:行内元素为了照顾兼容性，尽量设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块就可以

15. photo常用快捷操作

• ctrl + r 标尺工具
• 按住空格出现小手就可以移动
• ctrl + d 取消选区
• ctrl + +键 放大视图
• ctrl + - 缩小视图

16. 圆角边框/盒子阴影/文字阴影

16.1 圆角边框border-radius:length

length可以是具体单位px,也可以是百分比 50%

• 想要圆形，就把正方形宽度，高度设置成50% border-radius:50%

• 想要圆角矩形，就把border-radius设置成成高度的一半

/*可以设置成不同的圆角*/
顺序是 border-radius: 10px 20px 30px 40px;
border-radius: 左上 右上 右下 左下；
border-top-left-radius | border-top-right-radius | border-bottom-right-radius |border-bottom-left-radius

16.2 盒子阴影

box-shadow: h-shadow(必备) v-shadow(必备) blue spaerd color inset;
box-shadowL：水平阴影位置   垂直阴影位置  模糊距离 阴影的尺寸 阴影的颜色 将外部阴影改为内部阴影

16.3 文字阴影

box-shadow: h-shadow(必备) v-shadow(必备) blue  color;
box-shadowL：水平阴影位置   垂直阴影位置  模糊距离  阴影的颜色 

17.浮动

17.1. 3种传统的pc布局方式(普通流，浮动，定位)

为什么浮动？

改变元素默认的排列方式，可以完成标准流无法完成的事

多个盒子纵向排列找标准流。多个块级元素横向排列找浮动

语法:

选择器 {
    float: left | right | none;
}

17.2 浮动的特性

1. 脱离标准流的控制(浮) 移动到指定位置(动)，俗称脱标
2. 浮动的盒子不在保留原先的位置
3. 所有浮动的盒子都是顶端对齐(紧贴在一起，如果父级装不下就另起一行)
4. 浮动元素具有行内块元素的特征，意思就是给行内元素加上浮动之后，**行内元素(内容撑起宽度)**就具有行内块元素的特征，不用加display:inline-block可以设置宽度和高度

17.3 浮动和标准流搭配使用(div是没有内外边距的，其他标签有)

1. 先用标准流的父元素排上下位置，然后内部子元素采取浮动排列左右位置，符合网页布局第一准则

2. 网页布局的第二准则: 先设置盒子的大小，之后设置盒子的位置
   

17.4 浮动布局注意点

1. 先用标准流排列上下关系 之后内部采用浮动的方法排列左右位置
2. 一个元素浮动了子元素也要跟着浮动(浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流)

18.清除浮动

18.1 为什么要清除浮动

父级盒子在很多请款下不方便个高度，这个时候子元素浮动父元素的高度就会变成0，会影响下面标准流的盒子，清除浮动就是清除浮动元素造成的影响

18.2 清除浮动的方法

方法一:

   /*清除浮动的策略就是:闭合浮动，就是只让浮动在父盒子内部影响，不影响其他外部盒子*/ 额外标签法
   书写位置:在浮动元素末尾添加一个控标签，这个新添加的标签必须是块级元素div,不能是行内元素
   选择器: {
       clear:属性值; both | left | right
   }

方法二:

   /*给父元素添加overflow:hidden | auto | scroll 这三个都可以*/
   一定是添加在父元素上面的,优点就是简洁，缺点就是溢出部分会被影藏
   overflow:hidden | auto | scroll;

方法三:

/*也是添加在父元素身上的，相当于额外标签发的升级版
优点：没有增加标签，结构更加简单
缺点：照顾低版本浏览器
代表：百度 淘宝 网页 */
.clearfix:after {
    content: "";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    /*ie6,7专有*/
    *zoom: 1;
}

方法四:

/*父级添加，双伪元素清除浮动*/
代表网站: 小米 腾讯
.clearfix:before,clearfix:after {
    content:"";
    display"table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

19. ps切图

20. CSS书写顺序

代表：百度 淘宝 网页

 .clearfix:after {
     content: "";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
 }
 .clearfix {
     /*ie6,7专有*/
     *zoom: 1;
 }

/*父级添加，双伪元素清除浮动*/
代表网站: 小米 腾讯
.clearfix:before,clearfix:after {
    content:"";
    display"table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

19. ps切图

20. CSS书写顺序

21.定位(相对定位 | 绝对定位 | 固定定位)

为什么定位?:实现标准流和浮动无法实现的状况,可以压住其他的盒子都需要定位来实现。

定位: 定位模式 + 边偏移;

21.1 两部分组成(定位模式和边偏移)

1. 定位模式position属性来设置的，包括static静态定位，relative 相对定位，absolute绝对定位 ，fixed固定定位。
2. 边偏移 top(定义元素相对于其父元素上边线的距离),bottom(定义元素相对于其父元素下边线的距离),left定义元素相对于其父元素左边线的距离,right定义元素相对于其父元素右边线的距离。

21.1.1 静态定位

和标准流差不多，就做一个了解。

21.1.2 相对定位(relative)

.box {
	position:relative;
	top:100px;
	left:100px;
}

特点: 相对定位是相对于原来位置来移动位置的。原来的位置还占着

21.1.3 绝对定位(absolute)

.box {
	position:absolute;
	top:100px;
	left:100px;
}

特点:

1. 绝对定位是相对于祖先元素来说的
2. 如果没有祖先元素，或者祖先元素没有定位，则按照浏览器document来设定的
3. 如果祖先有定位(相对，绝对，固定定位) 则以最近的有定位的祖先元素为参考点移动位置
4. 绝对定位不占有原来的位置，想去哪就去哪

21.2 子绝父相

子级是绝对定位(absolue)，父亲要用相对定位(reletive)
原因：

1. 子级绝对定位，不会占有位置，可以放在父盒子的任何一个地方，不会影响其他的兄弟盒子
2. 父盒子需要加定位来限制子盒子在一定范围内活动
3. 父盒子布局时需要占有位置，所以需要绝对定位
   总结： 父盒子需要占有位置所以是相对定位，子盒子不需要占有位置所以是绝对定位

21.3 固定定位fixed

固定定位就是元素固定在浏览器的可视区域
使用场景: 浏览器滚动 元素不动
语法：

选择器 {
	position:fixed;
}

特点:

• 和父元素没关系
• 不随滚动条滚动而滚动

2. 固定定位不占有原先的位置
3. 固定定位也是脱离标准流的，可以看做是一种特殊的绝对定位

实用小技巧

如果想要让图片固定在版心旁边

• 可以先让盒子走 left:50%
• 然后再让盒子走版心的一半就可以了

21.4 粘性定位 sticky (了解)

可以看做是相对定位和固定定位的混合
语法：

选择器 {
position: sticky;
top:10px;
}

特点：

1. 以浏览的可视窗口为参照点移动元素(固定定位的特点)
2. 占有原先的位置(相对定位的特点)
3. 必须添加 top、left、rigtht、bottom其中一项
   和页面滚动搭配使用，兼容性较差

21.5 定位叠放次序

语法

选择器 {
z-index:1;
}

特点：

• 可以是正整数 负整数 0 默认是auto
• 按照叠放的次序，后来者居上
• 后面不能加单位
• 只有定位的盒子才能加上z-index

22. 网页布局总结

html标签就是个盒子
css浮动、定位就可以把每个盒子排成网页

1. 标准流
   可以让盒子上下排列或者左右排列，垂直的块级盒子显示就是用标准流布局的
2. 浮动
   可以让多个块级元素一行显示，或者左右对齐盒子，多个块级盒子水平显示就是用浮动布局的
3. 定位
   定位最大的特点就是层叠的概念，就是可以让多个盒子前后叠压显示，想让一个盒子在另一个盒子上面自由移动就用定位布局

24.元素的显示和隐藏

本质:让一个元素在页面中隐藏或者显示出来
使用场景: 就想网站广告一样，点击完就不见了，等到再次刷新就会出现

1. display 显示和隐藏，特点是不占有原来的位置
   dispaly: none | block 除了转换块级元素以外还可以显示元素，js的时候使用极其广泛
2. visibility 显示隐藏，还占有原来的位置
   visibility: visible | hidden
3. overflow 溢出的部分显示隐藏起来
   overflow:visible | hidden | scroll | auto 有定位的盒子要慎用overflow:hidden 因为他会隐藏多余部分

23. (高级技巧)CSS精灵图和字体图标

目标:

1. 精灵图
2. 字体图标
3. CSS三角
4. CSS用户界面样式
5. vertical-align属性运用
6. 溢出文字省略号显示
7. 常见布局技巧

23.1 精灵图

为什么精灵图？
精灵图是将小图片整合到大图片中，减少服务器接受，请求次数，提高网页加载速度

使用方法:
background-position: x y 一般是往左和往上移动，所以是负值

23.2 字体图标

在字体图标之前，都是用精灵图技术的。缺点明显1.图片文件比较大 2.图片放大缩小会失真 3.图片制作完成换很复杂
属于文字，看上去像图标
优点:

1. 轻量. 减少服务器请求
2. 灵活 随意更改颜色，阴影 效果
3. 兼容性 支持所有浏览器
   常用字体库
   icomoon
   阿里字体库

引入字体图标:
4. 先把下载下来的font文件夹复制到网站根目录
5. 在style.css里复制出样式，一直到block
6. 再把样式放在里面<span> </span>

span {
font-family: icomoon;
}

23.3 三角形

设置方法： 宽高必须是0

.box {
	width:0;
	height:0;
	border: 10px solid transparent;
	border-left-color:pink;
}

23.4. 用户界面样式(鼠标样式，轮廓线)

23.4.1 鼠标样式 cursor

语法:

li {
	cursor:default | pointer | move(移动样式) | text | no-allowed(禁止符号);
}

23.4.2 轮廓线 outline,文本域的拖拽问题

1. 轮廓线
   给边框一个 outline: 0; 或者outline:none
2. 文本域拖拽问题
   textarea:{resize: none}

23.5 vertical-align

使用场景: 用于设置图片和表单(行内块元素) 和文字对齐，设置元素的垂直对齐方式
只对行内元素和行内块元素有效，对块级元素无效
语法：

img{
	vertical-align:baseline | top | middle | bottom;
}

**图片和文字默认是基线对齐的 **
一般调整的时候就直接给图片一个vertical-align:middle就可以了，如果是背景图片，记得要给这个背景图片转换成行内块。
行内块和文字更搭

图片底部默认有空白缝隙的问题以及解决方案
为什么会有这个问题？
行内块和文字的基线对齐，所以下面有缝隙
解决方案

1. 给图片添加

/*只要不是基线对齐就不存在这个问题*/
img{
	vertical-align: top | middle | bottom;
}

2. 将图片转换成块级元素，块级元素没有vertical-align,就不会存在这样的问题

23.6 溢出的文字用省略号显示

单行文字溢出隐藏:要满足三个条件

/*1. 先强制一行显示文本*/
white-space:nowrap;(默认normal自动换行)
/*2. 溢出隐藏*/
overflow:hidden;
/*3. 文字用省略号代替超出的部分*/
text-oveflow:ellipsis;

多行文字显示省略号

overflow:hidden;
text-oveflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块级元素显示的文本行数(第几行显示省略号)*/
-webkit-line-clamp:2;
/*设置或者检索伸缩盒子子元素对象的子元素的排列方式(让内容垂直居中)*/
-webit-box-orient:vertical;

23.7 布局技巧

1. margin 负值的运用
   []

2.CSS三角强化