CSS选择器与样式深入解析

CSS简介

• HTML 主要做结构, 显示元素内容

• css 是层叠样式表 主要做样式,用来美化 HTML ,布局网页

CSS 语法规范

• css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明.

• 属性和属性值以键值对的形式出现

• 属性和属性值之间用 “:” 分开

• 1. 属性值前面 , 冒号后面 ,保留一个空格
  2. 选择器 (标签) 和大括号中间保留空格

CSS 选择器

• 作用 : 选择标签用的

基础选择器

• 基础选择器是由单个选择器组成的
• 基础选择器包括: 标签选择器 . 类选择器 . id 选择器.和通配符选择器

标签选择器

• 标签选择器 : 是指用HTML 标签名做为选择器
• 作用 : 标签选择器可以把某一类标签全部选择出来.比如所有的 div
• 优点 : 能快速为页面中的同类型的标签统一模式.
• 缺点 : 不能差异化设置

类选择器

• 差异化选择不同标签, 单独选一个或某几个标签, 可以使用类选择器

• 类选择器口诀 : 样式点定义 , 结构类调用 (class) 一个或多个, 开发最常用
• 注意 : 长名称或词组可以使用中横线来为选择器命名.
• 不要使用纯数. 中文命名 , 尽量使用英文字母来表示.
• 命名规范

多类名

1. 多类名使用方式

   1. 在标签 class 属性中写多个类名
   2. 多个类名中间必须用空格分开

2. 多类名开发使用场景

   1. 可以把一些标签元素相同的样式放到一个类里面
   2. 这些标签都可以调用这个公共的类 , 然后再调用自己独有的类
   • 优点: 节省 CSS 代码 ,修改方便

id 选择器

• id 选择器可以为特有定的 id 的HTML 元素指定特定的样式
• id 属性只能在每个HTML 文档中出现一次. 口诀: 样式＃定义，结构id 调用, 只能调用一次, 别人勿使用

id 选择器和类选择器的区别

1. 类选择器可以被多个人使用
2. id 选择器只能用一次 , 不得重复使用
3. id 选择器和类选择器最大的区别是使用次数上
4. 类选择器在修改样式中用的最多, id 选择器一般用于页面唯一性的元素上, 经常搭配 Javascript 使用

通配符选择器

" * " 表示选取页面中所有元素.

• 语法: 元素 1 元素 2 { 样式声明 }

  选择元素 1 里面的所有元素 2 ( 后代元素 )

  选择 ul 里面所有的 li 标签元素

• 元素 1 和元素 2 中间用空格隔开

• 元素 1 是父级 , 元素 2 是子级 , 最终选择的元素是元素 2

• 元素 2 可以是儿子 , 也可以是孙子 , 只要是元素 1 的后代即可

• 元素 1 和元素 2 可以是任意基础选择器

子代选择器

子代选择器只能选择离自身元素最近的一级子元素 . 就是亲儿子元素.

• 语法: 元素 1 > 元素 2 {样式声明}

  选择元素 1 里面的所有直接后代元素 2

• 元素 1 和元素 2 中间用大于号隔开

• 元素 1 是父级 , 元素 2 是子级 , 最终选择的是元素 2

• 元素 2 必须是亲儿子 , 孙子 , 重孙子之类都不归他管 , 可以叫亲儿子

并集选择器

并集选择器可以选择多组标签 , 同时为他们定义相同的样式 . 通常用于集体声明 .

• 语法 : 元素 1 , 元素 2 { 样式声明 }

  表示选择元素 1 和元素 2

• 元素 1 和 元素 2 中间用逗号隔开

• 并集选择器通常用于集体声明

伪类选择器

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果 , 比如给链接添加特殊效果 , 或选择第 1 个 , 第 n 个元素.

伪类选择器很多, 如有链接伪类 . 结构伪类等

链接伪类选择器说明a : link选择所有未被访问的链接a : visited选择所有已被访问的链接a : hover选择鼠标指针位于其上的链接a : active选择活动链接 ( 鼠标按下未弹起的链接)

链接伪类选择器注意事项

• 按照 LVHA 的顺序声明 : link - visited - hover - active
• 记忆法 lv 包包 hao
• a 链接在浏览器中有默认样式 , 所以我们实际工作中都需要给链接单独指定样式

链接伪类实际工作中的写法

: focus 伪类选择器

: focus 伪类选择器用于选取获得的表单元素 , 主要针对表单 input 元素来说

• 去除输入框默认边框

• 语法

复合选择器总结

选择器作用特征使用情况隔开符号及用法后代选择器用来选择后代可以是子孙后代较多空格 .nav子代选择器选择最近一级元素只选亲儿子较小大于 .nav > p并集选择器选择某些相同样式的元素可以用于集体声明较多.nav , header链接伪类选择器选择不同状态的链接跟链接相关较多a{}和a:hover{}:focus选择器选择获得光标的表单跟表单相关较少input:focus

CSS 字体属性

font-family 字体

• 各种字体之间必须使用英文转态下的逗号隔开
• 如有空格隔开的多个单词组成的字体 , 需加引号
• 尽量使用系统默认自带字体
• 开发中经常给 body 指定 font-family 字体 body {font-famil:""}

font-size 字体大小

• 谷歌浏览器默认文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致, 我们尽给一个明确的值, 不要使用默认大小
• 可以给 body 指定整个页面文字的大小
• 标题标签比较特殊 , 需要单独指定文字大小

font-weight 字体粗细

• css 使用 font-weight 给标签加粗

属性值描述normal默认值( 不加粗 )bold加粗100~900400=normal , 700=bold

font-style 文字样式

css 使用 font-style 设置文本风格

属性值作用normal默认值 不倾斜italic文字倾斜

• 开发中需要给斜体标签 (em , i )改为不倾斜字体.

font 符合属性写法

• font : 字体样式 字重 字体大小 / 行高 设置字体

• 使用 font 属性时 , 必须按照上面语法顺序写, 不能换顺序, 并且各个属性之间用空格隔开
• 不需要的属性可以省略( 取默认值 ),但必须保留 font-size 和 font-family 属性.

字体属性总结

CSS 文本属性

css Text(文本) 属性可以定义文本的外观 , 比如文本的颜色. 对齐文本. 装饰文本. 文本缩进. 行间距等

文本颜色 color

color 用来设置文本的颜色

文本装饰 text-decoration

text-decoration 可以给文本添加下划线 删除线 上划线等

• text-decoration: none; 取消超链接默认的下划线

文本缩进 text-indent

text-indent 用来给文本第一行首行缩进 , 段落首行缩进

• em 是一个相对单位 , 就是当前元素 ( font-size ) 1 个文字的大小, 如果当前元素没有设置大小, 则会继承父元素的 1 个文字大小.

行间距 line-height

line-height 属性用于设置行与行之间的距离( 行高 ), 可以控制文字行与行之间的距离.

调试工具使用:

如果点击元素 , 发现右侧没有样式引入 , 极有可能是类名或者样式引入错误

CSS 的元素显示模式

元素显示模式一般分为块元素和行内元素

块元素

常见的块元素: h1-h6 / p / div / ul / ol / dl / table / form

• 块元素特点
  1. 独占一行
  2. 宽度 . 高度 . 外边距和内边距可以修改
  3. 宽度默认是父级的宽度 ( 浏览器 ) 的100%
  4. 是一个容器 , 里面可以放行内或者块元素
• 文字类的元素不能使用块级元素
• < p > 标签主要用于放文字 , 因此 < p > 里面不能放块级元素 , 特别不能放 < div >
• < h1 >~< h6 > 也不能放块级元素

行内元素

常见的行内元素 a span strong b em i del s ins u

• 行内元素的特点

  1. 相邻行内元素在一行上 , 一行可以显示多个
  2. 高 宽 不能直接设置
  3. 默认宽度就是本身的内容宽度
  4. 行内元素只能放文字或其他行内元素

• 注意 : 链接里面不能在放链接

• a 里面可以放块级元素 , 给 a 转换一下块级模式最安全

行内块元素

常见的行内块元素 < img > < input > < button >< td > 它们同时具有块元素和行内元素的特点

• 行内块元素的特点
  1. 和相邻的行内元素( 行内块 ) 在一行上 , 它们之间会有空隙 , 一行可以显示多个 ( 行内元素特点 )
  2. 默认宽度就是它本身的宽度 ( 行内元素特点 )
  3. 可以设置宽度高度外内边距 ( 块元素特点)

元素显示模式总结

元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽高度容器的100%可以包含任何标签行内元素一行能放多个行内元素不可以设置宽高度它本身的宽度容纳文字和其他行内标签行内块元素一行能放多个行内块级元素可以设置宽高度它本身内容的宽度

元素显示模式转换

• 转换为块元素 : display: block;

• 转换为行内元素 :display: inline;

• 转换为行内块元素 :display: inline-block;

单行文字垂直居中原理

简单理解 : 行高的上空隙和下空隙把文字挤到中间了 , 如果行高小于文字的高度, 文字会偏上 , 如果行高大于文字的高度文字会偏下

CSS 背景

背景属性可以设置背景颜色 . 背景图片 . 背景平铺 . 背景图片位置 . 背景图像固定等

背景颜色

• background-color: 一般情况下元素背景颜色默认是 transparent ( 透明)

背景颜色半透明

• 最后一个参数透明度取值范围是 0 ~ 1
• 0 可以省掉 .4
• 只能将盒子背景半透明 , 盒子里的内容不受影响
• 从0.0（完全透明）到1.0（完全不透明）

背景图片

• background-image: 开发中常用于 logo 或者一些装饰的小图片或者超大的背景图片

• 优点 : 非常便于控制位置 ( 精灵图也是一种运用场景 )

• background-image: none | url ;

  参数值作用none为背景图url使用绝对或相对指定背景图

背景平铺

background-repeat: no-repeat | repeat |repeat-x | repeat-y;

参数值作用repeat横线纵向平铺no-repeat不平铺repeat-x沿着 x 轴平铺repeat-y沿着 y 轴平铺

背景位置

利用 background-position: x y 属性可以改变图片在背景中的位置

参数代表意思 : x 坐标和 y 坐标 , 可以使用方位名词或者精确单位

参数值说明length百分数 | 数字 |单位positioncenter | top | bottom | left | right |

1. 参数是方位名词
   • 两个值如果都是方位词 他们的前后顺序无关.
   • 如果只写了一个方位名词 , 另一个省略 ,默认是居中的
2. 参数是精确单位
   • 第一个坐标是 X 坐标 , 第二个坐标是 Y 坐标
   • 如果只写一个, 另一个默认垂直居中
3. 参数是混合单位(精确单位 , 方位名词)
   • 第一个坐标是 X 坐标 , 第二个坐标是 Y 坐标

背景图像固定 ( 背景附着 )

background - attachment 属性设置背景图片是否固定或随着页面的其余部分滚动 , 后期可以制作视差滚动的效果

• background - attachment : scroll | fixed

  参数作用scroll背景图像随内容滚动fixed背景图像固定

背景属性复合写法

• background : 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置

背景总结

属性作用值background - color背景颜色颜色 / RGB / 十六进制background - image背景图片url ( 图片路劲 )background - repeat是否平铺repeat / no-repeat / repeat -x /repeat- ybackground - position背景位置量词 / 方位词 x 和 y 坐标background - attachment背景附着scroll ( 滚动 ) fixed ( 固定)背景简写背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置背景色半透明background: rgba(0, 0, 0, 0.4); 后面必须是 4 个值

透明设置

• rbga()设置单颜色的透明，a是alpha透明，取值范围0-1,0.5的0可以省略
• opacity:设置元素整体的透明度，取值范围0-1
  • 指定不透明度。从0.0（完全透明）到1.0（完全不透明）

两者的区别：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

opacity : 是作用元素的 , 以及元素内所有的内容都会有效果

rgba : 作用元素的颜色或背景色

CSS 三特性

CSS 有三个重要的特性 : 层叠性 , 继承性 , 优先级

层叠性

相同选择器设置了相同样式 , 此时会覆盖另一个样式 , 层叠性主要解决样式冲突的问题.

• 样式冲突 , 遵循的原则是就近原则 , 哪个样式结构近 , 就执行哪个

继承性

子标签会继承父标签中的某些样式 , 如文本样色和字号 .

• 恰当地使用继承可简化代码 , 降低 CSS 样式的复杂性
• 子元素可以继承父元素的样式 ( text- , font- , line- 这些元素开头的可以 , 和 color
• a 标签不继承颜色，h 系列标签不继承字体大小。

行高的继承

• 如果子元素没有设置行高 ,则会继承父元素的行高为 1.5

• 此时子元素的行高是 :　当前子元素的文字大小 * 1.5

• body 行高 1.5 这样写法最大的优势就是里面的子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器 , 就会有优先级的产生

• 选择器相同 , 则执行层叠性
• 选择器不同 , 则根据选择器权重执行
• 从左到右进行比较

选择器权重表

选择器权重继承 或者 *00元素(标签)选择器1类选择器 , 伪类选择器10ID 选择器100行内样式 style=""1000!important 重要的∞ 无穷大

• 通配符和继承权重为 0 , 标签选择器为 1 , 类/伪类选择器为10 , id 选择器为 100 , 行内样式表为 1000 , !important 无穷大

• 继承的权重为 0 .

权重叠加

权重叠加 : 如果复合选择器 , 则会有权重叠加 , 需要计算权重 .

• div ul li ------ 0 , 0 , 0 , 3
• .nav ul li ------0 , 0 , 1 , 2
• a:hover -------0 , 0 , 1 , 1
• .nav a ----------0 , 0 , 1 , 1

CSS 盒子模型

• 页面布局的三大核心 : 盒子模型 , 浮动 , 定位

• 网页布局过程

  1. 准备好相关的网页元素 , 网页元素基本就是box盒子
  2. 利用 cSS 设置好盒子样式 , 然后摆到相应位置
  3. 往盒子里装内容

  网页布局的核心本质 :　就是利用 CSS 摆盒子 .

盒子模型组成

• 封装周围的 HTML 元素 包括 : 内容 边框 , **外边距和内边距 **

边框

• border : border-width border-style border-color

• 边宽的复合写法 : border : 5 px solid green

• 边框分开写法 : border-top: 5px solid green;

• 表格的细线边框 : border - collapse ,属性控制浏览器绘制表格边款的方式 . 控制相邻单元格的边框
• 语法 : border - collapse : collapse
• collapse 是合并的意思 , 把相邻边框合并在一起

• 边框会影响盒子的实际大小
  1. 测量盒子大小的时候 , 不要测量边框
  2. 如果测量的时候包含了边框 , 则需要 width / height 减去边框的宽度

内边距 paddiing

• padding 盒子边框与内容之间的距离

属性作用padding - left左内padding - right右内padding - top上内padding - bottom下内

• padding 复合性写法

值得个数表达意思padding : 5px ;1 个值 ; 上下左右5 pxpadding : 5px 10px;2 个值 ; 上下内边距 5 px , 左右内边距 10pxpadding : 5px 10px 20px3 个值 ; 上 5 px , 左右 10 px , 下 20 pxpadding : 5px 10px 20px 30px;4 个值 ; 上 5 px , 右 10 px , 下 20 px 下30 px

• padding 影响了盒子实际大小 , 如果盒子已经有了宽高 , 此时在指定内边框 , 会撑大盒子 .
• padding 不会影响盒子大小 : 如果盒子本身没有指定 width / height 属性 , 则此时 padding 不会撑开盒子大小 .
• 解决方案 : 需要 width / height 减去多出来的内边距大小即可
• padding 应用 : 新浪导航栏

外边距 margin

• margin 控制盒子和盒子之间的距离

属性作用margin - left左内margin - right右内margin- top上内margin - bottom下内

• margin 复合性写法

值得个数表达意思margin : 5px ;1 个值 ; 上下左右5 pxmargin : 5px 10px;2 个值 ; 上下外边距 5 px , 左右外边距 10pxmargin : 5px 10px 20px3 个值 ; 上 5 px , 左右 10 px , 下 20 pxmargin : 5px 10px 20px 30px;4 个值 ; 上 5 px , 右 10 px , 左 20 px 下30 px

外边距典型应用

外边距可以让块级盒子水平居中 , 但必须满足两个条件

1. 盒子必须指定了宽度
2. 盒子左右的外边距都设置为 auto

行内元素或者行内块元素水平居中给其块级父元素添加 : 即可

外边距合并

使用 margin 定义块级元素的垂直外边距时 , 可能出现外边距的合并 . 主要有两种情况

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

   相邻块元素设置了margin-buttom , margin-top 取两个值汇总较大者,这种现象被称为相邻块元素垂直外边距的合并

   解决方案 : 尽量只给一个盒子添加 margin 值

2. 嵌套块元素垂直外边距的塌陷

   两个嵌套关系 ( 父子关系 ) 的块元素 , 父元素有上外边距同时子元素也有上外边距 , 此时父元素会塌陷较大的外边距值

   解决方案

   1. 为父元素定义上边框
   2. 为父元素定义上内边距
   3. 为父元素添加 overflow : hidden

   overflow : heiden 不会撑大盒子

   其他办法浮动 , 固定 , 绝对定位的盒子不会有塌陷问题

清除内外边距

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

竖杆 |怎么写: < em>|< em>

CSS 3新增

圆角边框

border-radius 用于设置元素的边框圆角 , 参数可以是数字也可以是百分比 .

半径越大 , 圆角越圆

1. 圆形的做法 : 设置为正方形的一半

2. 圆角矩形的做法 : 设置为高度的一半

3. border-radius 简写

   属性值border-radius: 10px;四个角border-radius: 10px 20px;对角线border-radius: 10px 20px 30px 40px;左上角 右上角 右下角 左下角

   分开写 , 顺序不能颠倒

   属性值border-top-left-radius: 10px;左上角border-top-right-radius: 20px;右上角border-bottom-right-radius: 30px;右下角border-bottom-left-radius: 40px;左下角

盒子阴影

box-shadow : h-shadow v-shadow blur color inset

水平 垂直阴影是必须写的

值描述h-shadow必需 : 水平阴影 ,允许负值v-shadow必需 : 垂直阴影 ,允许负值blur可选 : 模糊度spread可选 :阴影大小color可选 : 阴影颜色inset可选 : 将外部阴影改为内部阴影

盒子阴影应用 : 鼠标经过添加阴影

问题 : 怎样给盒子下边框加阴影

文字阴影

text-shadow : h-shadow v-shadow blur color

值描述h-shadow必需 : 水平阴影 ,允许负值v-shadow必需 : 垂直阴影 ,允许负值blur可选 : 模糊度color可选 : 阴影颜色

CSS 浮动

• 为什么需要浮动

  有很多的布局效果 , 标准流没有办法完成 , 此时可以利用浮动完成布局 . 因为浮动可以改变元素标签默认的排列方式

• 浮动最典型应用

  可以让多个块级元素一行内 , 排列显示

• 网页布局第一准则 : 多个块级元素纵向排列找标准流 , 多个块级元素横向排列找浮动 .

• 传统网页布局的三种方式

1. 标准流 ,( 普通流 , 文档流)

   标签按照规定好默认方式排列 .

2. 浮动

3. 定位

float: none;

属性值描述none不浮动left左浮动right右浮动

浮动特点

1. 浮动元素会脱离标准流 , 不再保留原来的位置
2. 浮动元素会一行内显示并且元素顶部对齐
   • 浮动的元素是相互贴靠在一起的不会有缝隙 , 如果父级盒子宽度装不下这些浮动的盒子 , 多出的盒子会另起一行
3. 浮动元素具有行内块元素的特性 , 任何元素都可以浮动
   • 如果块级盒子没有设置宽度 , 默认宽度和父级一样宽 , 但是添加浮动后 , 它的大小根据内容来决定

• 浮动元素经常和标准流父级搭配使用
  • 先用标准流的父元素排列上下的位置 , 之后内部子元素采用浮动左右排列位置 , 符合网页布局第一准则
  • 先设置盒子大小 , 之后设置盒子的位置 , 网页布局第二准则
• 通栏的盒子不需要指定宽度 , 宽度和浏览器一样宽

浮动布局注意点

1. 浮动和标准流的父盒子搭配使用
   • 先用标准流的父元素排列上下的位置 , 之后内部子元素采用浮动左右排列位置
2. 一个元素浮动了 , 理论上其余兄弟也要浮动 , 以防止引起盒子排列问题
   • 浮动的盒子只会影响浮动盒子后面的标准流 , 不会影响前面的标准流

为什么要清除浮动

• 由于父盒子很多情况下 ， 不方便给高度 ， 但是子盒子浮动又不占有位置 ， 最后父级盒子高度为 0 ，就会影响下面的标准流盒子
• 由于浮动的元素不再占有位置 ， 所以它会影响后面的元素排版方

1. 清除浮动的本质是
   • 清除浮动元素脱离标准流造成的影响
2. 清除浮动策略
   • 闭合浮动，只让浮动在盒子内部影响，不影响盒子外面的其他盒子

清除浮动

属性描述left清除左侧浮动right清除右侧浮动both清除左右两侧浮动

清除浮动方法

1. 额外标签法 (隔墙法)

   • 在元素末尾添加一个空的标签 ，如
   • 新添加的盒子必须是块级元素，不能是行内元素学

2. 父级添加 ( 别用 )

3. ：after伪元素

   • 是额外标签法的升级版，也是给父元素添加的

4. : 双伪元素清除浮动 ( 建议用 )

   • 也是给父元素添加

为什么要清除浮动

1. 父盒子没有高度 , 影响下面的标准流盒子
2. 浮动的元素不再占有位置 , 影响后面元素的排版

学成在线案例

常见的图片格式

1. jpg图像格式 : 高清 颜色较多 产品图较多
2. gif图像格式 : 小动画
3. png图像格式 : 背景透明
4. PSD图像格式 : 设计稿文件

CSS 书写顺序(重点)

CSS 编写顺序

1. 设置布局定位属性
2. 设置宽度或高度
3. 设置背景色或边框
4. 设置 padding 或 margin
5. 设置字体的样式

页面布局整体思路

导航栏

导航栏注意点 :

• 实际开发中 , 我们不会直接用 a 链接而是用li+a链接的做法

下划线制作

• 把 a 标签转换为行内块元素

• 给 a 标签设置左右 padding 撑开盒子

• 给 a 添加一个下边框

光标聚到输入框时去掉边框

定位

定位可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置 , 并可以压住其他盒子

定位组成

定位 : 将盒子定在某一个位置 , 所以定位也是在摆放盒子 ,按照定位的方式移动盒子 .

定位 = 定位模式 + 边偏移

1. 定位模式

值语义static静态定位relative相对定位absolute绝对定位fixed固定定位

2. 边偏移

   边偏移就是盒子移动的最终位置 .

边偏移属性示例描述toptop :80px顶端偏移量 , 定义元素相对于其父元素上边的距离bottombottom:80px底部偏移量 , 定义元素相对于其父元素下边的距离leftleft :80px左侧偏移量 , 定义元素相对于其父元素左边的距离rightright :80px右侧偏移量 , 定义元素相对于其父元素右边的距离

静态定位 static

静态定位是元素的默认定位方式 , 无定位的意思

相对定位 relative

相对定位是元素在移动位置的时候 , 是相对于它原来的位置来说的

相对定位的特点

1. 它是相对于自己原来的位置来移动的

2. 原来在标准流的位置继续占有 , 后面的盒子任然标准流的方式对待它 ( 不脱标 , 继续保留原来的位置)

   因此 , 相对定位并没有脱标 . 它最典型 的应用是给绝对定位当爹的 .

绝对定位 absolute

绝对定位是元素在移动位置的时候 , 是相对于它祖先元素来说的

绝对定位的特点

1. 如果没有祖先元素或者祖先元素没有定位 , 则以浏览器为准定位 ( 没有父级 , 或父级没定位的情况下)
2. 如果祖先元素有定位( 相对 , 绝对 , 固定 ) , 则以最近一级的有定位祖先元素为参考点移动位置 ( 父级有定位的情况 )
3. 绝对定位不再占有原先的位置 , 脱标

• 子绝父相

  子级是绝对定位的话 , 父级要用相对定位

  1. 子级绝对定位 , 不会占有位置 , 可以放到父盒子里面的任何一个地方 , 不会影响其他兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内显示
  3. 父盒子布局时 , 需要占有位置 , 因此父亲只能是相对定位

  相对定位经常用来作为绝对定位的父级

  总结 : 因为父级需要占有位置 , 因此是相对定位 , 子盒子不需要占有位置 , 则是绝对定位

固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置 . 主要使用场景浏览页面滚动时元素的位置不会变

固定定位的特点

1. 以浏览器的可视窗口为参照点移动元素

   • 跟父元素没有任何关系
   • 不随滚动条滚动

2. 固定定位不在占有原先的位置

   固定定位也是脱标的 , 其实固定定位可以看做一种特殊的绝对定位

固定定位小技巧 : 固定装置版心右侧位置

小算法 :

1. 让固定定位的盒子 left50% ,走到浏览器可视区 (可看做版心) 的一半位置 .
2. 让固定定位的盒子 margin -left 版心宽度的一半距离 . 多走版心宽度的一半位置 , 就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位 sticky (了解)

粘性定位的特点

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先的位置
3. 必须添加 top left right bottom 其中一个才有效

跟页面滚动搭配使用, 兼容性较差 , IE 不支持

• 粘性定位 用法背景图片的滚动产生一种视觉差效果
• 盒子添加定位 设置 tob 为 0

定位总结

定位模式是否脱标移动位置是否常用relative 相对定位否 (占有位置)相对于自身位置移动常用absolute 绝对定位是 ( 不占有位置)带有定位的父级元素常用fixed 固定定位是( 不占有位置)浏览器可视区常用static 静态定位否不能使用边偏移很少sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少

定位叠放次序 z-index

• 数值可以是正数 . 负数 . 默认是 auto , 数值越大 , 盒子越靠上
• 如果属性值相同 , 则按照书写顺序 , 后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z-index 属性

定位的拓张

绝对定位的盒子水平居中

• 加了绝对定位的盒子不能通过 水平居中 , 但是可以通过以下计算方法实现水平和垂直居中

1. 让盒子的左侧移动到父级元素的水平中心位置
2. 让盒子向左移动自身宽度的一半

定位的特殊性

• 绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位 , 可以直接设置高度和宽度
2. 块级元素添加绝对定位或固定定位 , 如果不给宽度或者高度 , 默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

• 浮动元素 , 绝对 ( 固定定位) 元素的都不会触发外边距合并的问题

绝对定位 ( 固定定位) 会完全压住盒子

1. 浮动元素不同 , 只会压住它下面标准流的盒子 , 不会压住下面标准流的文字 ( 图片 )
2. 绝对 ( 固定定位 ) 会压住下面标准流所有的内容

浮动最初产生的目的不是用来布局的 , 是做文字环绕效果的

注意 : 如果一个盒子既有 left 属性 也有 right 属性 ,则会默认执行 left 属性 , 同理 top bottom 则会执行 top 属性

淘宝焦点图

必备知识 ： 盒子模型的标准流 , 浮动 , 定位的使用

具体代码如下 :

1. display 显示隐藏元素 但是不保留位置
2. visibility 显示隐藏 但是保留原来位置
3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理

display 属性

• 隐藏对象

• 除了转换为块级元素之外 , 同时还有显示元素的意思

  display 隐藏元素后 , 不在占有原来的位置

visibility 属性

• 元素隐藏

• 元素可视

  隐藏后 , 继续占有原来位置

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框时 , 会发生什么

属性值描述visible显示溢出内容hidden隐藏溢出内容scroll不管内容是否超出 , 总是显示滚动条auto超出自动显示滚动条 , 不超出不显示滚动条

注意 : 如果有定位的盒子 , 请慎用 因为他会隐藏多余的部分

土豆案例

1. 精灵图主要针对背景图片使用
2. 移动背景图片位置 , 此时可以使用background-position
3. 一般情况下精灵图都是往上往左移动所以都是负值 ( 网页中的坐标 : x轴右边是正直 , 左边是负值 , y轴同理 )

• 使用步骤
  • 1.背景图片撑不开盒子的宽高，测量需要局部的大小，设置为盒子的宽高
  • 2.将测量的局部大小的坐标值，设置成背景定位的负值

字体图标

字体图标的优点

• 轻量级 : 一个字体图标要比一系列的图像要小 ,加载快 减少了服务器请求
• 灵活性 : 本质是文字 , 可以随意改变颜色 , 产生影印 , 透明效果 , 旋转等
• 兼容性 : 几乎支持所有的浏览器

总结 :

1. 遇到结构样式简单的小图标 就用字体图标
2. 遇到结构样式复杂的小图片 就用精灵图

字体图标的使用

1. 字体图标的下载
2. 字体图标的引入 ( 引入到html中 )
3. 字体图标的追加 ( 以后添加新的小图标 )

• Font Awesome : http://fontawesome.dashgame.com/
• icomoon 字库 : https://icomoon.io
• 阿里巴巴图标 : https://www.iconfont.cn/

下载

引用

1 把下载包里的fonts 文件夹放入页面根目录文件夹

2 通过 css 样式把这些文件引入到页面中

3 html 标签内添加小图标

4 给 span 声明一个字体

追加新的字体图标

CSS3 三角

css 设置三角形

1. 盒子宽高设置为 0
2. 盒子设置边框 , 四条边框颜色为透明色
3. 单独设置需要成为三角形的那条边框的颜色

微信对话框

CSS 用户界面样式

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单拖拽

更改用户的鼠标样式

属性值描述default小白 默认pointer小手move移动text文本not-allwed禁止

表单轮廓线 outline

给表单添加 或者 样式后就可以去掉默认蓝色边框.

防止表单(文本域)拖拽 resize

vertical-align 属性应用

属性使用场景 : 经常用于设置图片或者表单 ( 行内块元素 ) 和文字垂直对齐 .

官方解释 : 用于设置一个元素的 垂直对齐方式 , 但是它值针对行内元素或者行内块元素有效

值描述baseline和文字基线对top和文字顶线对齐middle和文字中线对齐bottom和文字底线对齐

文字顶线中线基线底线图

解决图片底部默认空白缝隙问题

bug : 图片底部底侧会有一个空白缝隙 , 原因是行内块元素会和文字的基线对齐 .

主要解决方案有两种 ;

1. 给图片添加 vertical- align : middle | top | bottom 等 ( 提倡使用 )
2. 把图片转换为块级元素 display : block ;

溢出的文字省略号显示

单行文本溢出显示省略号

单行文本溢出显示省略号 - - 必须瞒足三个条件

1. 先强制一行内显示文本
2. 超出的部分影藏
3. 超出的文字用省略号代替

多行文本溢出显示省略号 ( 了解 )

常见布局技巧

1.margin 负值运用

• 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

• 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

2.文字围绕浮动元素巧妙运用

巧妙运用浮动元素不会压住文字的特性

3.行内块的巧妙运用

页码在页面中间显示:

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

4.CSS 三角强化的巧妙运用

京东秒杀案例

html 代码

css 代码

技巧

CSS 初始化

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体 9ED14F53
宋体 5B8B4F53
微软雅黑 5FAE8F6F96C59ED1

京东 css 初始化代码

HTML 5 的新特性

html5 增加了一些新的标签 , 新的表单和新的表单属性等 .

这些新特性都有兼容性问题 , 基本都是IE9+以上浏览器支持 , 如果不考虑兼容性问题可以大量使用

新增的语义化标签

• 这种语义化标准主要是针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在 IE 中 ,需要把这些元素转化为块级元素
• 移动端更喜欢使用这些标签

新增的多媒体标签

新增的多媒体标签主要包括两个 :

1. 视频
2. 音频

1.视频标签

当前元素支持三种音频格式 : 尽量使用mp4 格式

1. MP4
2. WebM
3. Ogg

属性描述autoplay自动播放 ( 谷歌需要添加 muted 来解决)controls显示播放控件width设置播放器宽度height设置播放器高度loop循环播放preload是否预先加载 (如果有了autoplay 就忽略该问题 )src视频地址poster视频封面muted静音播放

2.音频标签

当前元素支持三种音频格式

1. MP3
2. Wav
3. Ogg

属性描述autoplay音频自动播放controls显示播放控件loop循环播放src音频地址

• 谷歌浏览器把视频和音频自动播放禁止了
• 可以给视频添加 muted 属性来静音播放视频 , 音频不可以 ( 通过 Javascript 解决)
• 视频标签是重点 , 我们经常设置自动播放 ,不适用 controls 控件 , 循环和设置大小属性

新增表单属性

新增 input 表单

常见输入类型

属性值说明type=“email”用户输入必须邮箱类型type=“url”url类型type=“date”日期类型type=“time”时间类型type=“month”月类型type=“week”周类型type=“number”数组类型type=“tel”手机号码type=“searcht”搜索框type=“color”生成一个颜色选择表单

新增表单属性

属性说明required说明其内容不能为空 , 必填placeholder表单提示文本autofocus自动聚焦属性 , 页面加载完自动聚焦autocompleteoff / on 提示之前输入的记录 , 需要放在表单内 , 加上name属性multiple可以选择多文件提交 ,配合 使用

修改 placeholder 里面的字体颜色

CSS 3 的新特性

一 . 新增选择器⭐️⭐️⭐️

css 3 给我们新增了选择器 , 可以更加便捷 , 更加自由的选择目标元素

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

1.属性选择器

属性选择器可以根据元素特定的属性来选择元素 , 这样就可以不用借助于类或者id 选择器

选择器简介E [ att ]选择具有 att 属性的 E 元素E [ att =“val” ]选择具有 att 属性值等于 val 的 E 元素E [ att^=“val” ]匹配具有 att 属性且值以 val 开头的 E 元素 ⭐️E [ att$=“val” ]匹配具有 att 属性且值以 val 结尾的 E 元素E [ att*=“val” ]匹配具有 att 属性且值中含有 val 的 E 元素

2.结构伪类选择器

结构伪类选择器主要根据 文档结构 选择元素 , 常用于根据父级选择器里面的子元素.

选择器简介E : first - child匹配父元素中的第一个子元素E : last - child匹配父元素中的最后一个子元素E : nth - child (n)匹配父元素中的第 n 个子元素 ⭐️E : first - of -type指定类型 E 的第一个E : last - of type指定类型 E 的最后一个E : nth - of -type ( n )指定类型 E 的第 n 个

E : nth - child (n) 选择某个父元素的一个或多个特定的子元素

• n 可以是数字 , 关键字和公式
• n 如果是数字, 就是选择第 n 个子元素 , 里面数字从几开始
• n 可以是关键字 : even 偶数 , odd 奇数
• n 可以是公式 : 常见的公式如下 ( 如果 n 是公式 , 则从 0 开始计算 ,但是第 0 个元素或者超出了元素的个数会被忽略 )

公式取值2n偶数2n+1奇数4n4 8 12 16 …n +4从第 4 个开始 ( 包含第 4 个 ) 到最后- n + 4前 4 个 , ( 包含第 4 个 )

注意 :⭐️ 属性选择器 , 伪类选择器 , 权重为 10

nth - child (n) 和 nth - of -type (n) 区别

1. nth - child (n) 对父元素里面所有的子孩子排序选择 , 先找到第 n 个孩子 , 然后看看是否和指定的元素 E 匹配 .
2. nth - of -type (n) 对父元素里面指定的子元素 E 进行排序选择 , 先去匹配 E ,然后再根据子元素 E 找第 n 个孩子 .

3.伪元素选择器

伪元素选择器可以帮助我们利用CSS 创建新标签元素 , 而不需要 HTML 标签 , 从而简化HTML结构

选择器简介::before在父元素内部的前面插入内容::after在父元素内部的后面插入内容

注意:

• befor 和 after 创建一个元素 , 但是属于行内元素
• 新创建的这个元素在文档树中是找不到的 , 所以我们称为伪元素
• before 和 after 必须有 content 属性
• before 父元素在父元素内部的前面插入内容 , after在父元素内部的后面插入内容
• 伪元素选择器和标签选择器一样 , 权重为 1 .

伪元素应用:

• 配合字体图标使用
• 土豆案列的遮罩层
• 清除伪元素

二 . CSS 3 盒子模型

计算盒子大小 , 可以分成两张情况

1. 盒子大小为 width + padding + border ( 默认的 )
2. 盒子大小为
   • 如果盒子模型我们改为了 , 那么 和 就不会撑大盒子 ( 前提 和不会超过 宽度)

三 . CSS 3 其他属性

css 3 滤镜 filter

filter : 函数 () ; 例如 : filter : blur ( 5px ) ; blur 模糊处理 数值越大越模糊 .需要加单位

css 3 calc 函数

括号里面可以使用 ( + - * / ) 来进行计算

注意 : 运算符的左右两边要有空格隔开

css 3 过渡 transition ( 重点 ) ⭐️

transition 经常和 一起搭配使用

: 变化的属性 花费时间 运动曲线 何时开始

变化的属性 : 宽高 背景颜色 内外边距 . 想要所有的属性都变化过渡写一个 all 就可以

花费时间 :　单位是秒 ( 必须加单位 ) .5s

运动曲线 : 默认是 ease ( 可以省略 )

何时开始 : 单位是秒 ( 必须加单位 ) 默认是 0 秒 , 可以设置延迟触发时间 ( 可以省略 )

口诀 : 谁做过渡给谁加

进度条练习 - 过渡

html 代码

css 代码

1. 项目下载到本地引入 推荐使用(直接访问本地项目速度快)
2. 直接引入线上链接 (阿里巴巴服务器挂掉就不能使用)

案例-购物车

1. 引入字体图标样式表
2. 购物车和箭头span调用字体图标类名

1. 移动 ( translate )
2. 旋转 ( rotate )
3. 缩放 ( scale )

1 . 位移 translate

语法 transform: translate(x,y)

• 值可以是百分比也可以是像素
• 只写一个值默认是 x 轴
• translate 中的百分比单位是相对自身元素的 translate : (50%,50%)

代码演示 :

重点 :

• 2d 转换中的移动 , 沿着 x 和 y 轴移动元素
• translate 最大优点 : 不会影响到其他元素的位置
• translate 中的百分比单位是相对自身元素的 translate : (50%,50%)
• 对行内元素没有效果

案例-双开门

知识点

1. 用伪元素存放两张图片
2. transform 移动图片位置

• 正数是瞬时针,负数是逆时针
• 默认旋转中心是元素的中心点

• 里面跟度数 单位 deg
• 角度为正 , 顺时针 , 反之
• 默认旋转中心点是元素的中心点

旋转小三角案列

• 大盒子里面用放一个小盒子 , 定位后设置宽高 , 给左和下边框
• 旋转小盒子 , 用hover 做一个鼠标经过 盒子里面三角旋转 ( 注意 这是旋转角度是相对于原来 0 度的三角)
• 给伪元素加一个过渡效果

• 旋转可以改变坐标轴方向
• 可以是像素和方位名词
• 后面的参数用空格隔开

旋转中心点案例

• 先把盒子 2 旋转 180 度到下面
• 给盒子 2 设置旋转中心点
• 给盒子 1 设置鼠标经过盒子 1 , 里面的盒子 2 旋转
• 给盒子 2 添加过度效果
• 给盒子 1 设置溢出隐藏

注意 :

• 其中的 x 和 y 用逗号隔开
• 宽和高都放大一倍 , 相当于没有放大
• 宽和高都放大两倍
• 只写一个参数
• 缩小
• 缩放最大优点 : 可以设置转换中心点缩放 , 默认以中心点缩放的 , 不影响其他盒子
• scale值大于1表示放大, scale值小于1表示缩小

放大图片案列-1

• 鼠标经过盒子 , 里面的图片放大
• 给图片设置一个 设置
• 给图片添加一个过渡
• 给盒子一个设置 图片变大后超出盒子的部分影藏

代码演示 :

• 鼠标经过 放大
• 给 设置 设置
• 给 设置过渡

代码演示 :

• 多个属性之间用空格隔开
• transform 层叠性
• 旋转会改变轴向

• 必须是两个颜色或以上才可以实现渐变
• 默认渐变方向是上到下 , 可以用 to 带方位词改变

综合案例-华为新闻

遮罩层建议用方位词撑开

• opacity: 0;透明 opacity: 1; 不透明 做显示和影藏效果

• 数字 . 百分比 cover | contain
• 有一个数字时是宽度 , 等比例缩放 ; 是百分比时是父盒子的倍数
• cover : 完全覆盖背景区域 , 可能有部分图片显示不全
• contain : 当宽度或高度拉伸到铺满盒子就不能再拉伸了 , 可能有部分空白区域

CSS3 动画

1 . 动画的基本使用

制作动画分为两步 :

1. 先定义动画
2. 再调用动画

用 定义动画

动画序列

• 0% 是动画开始 , 100% 动画结束 , 百分比指的是动画总时长的占比

• 和 等同于 0% 和 100%

• 可以做多个状态下的变化

• 调用动画必须写两个参数动画名称 和动画持续时间

代码演示

注意 :

• 简写属性里面不包含
• 暂停动画 ; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：
• 盒子动画结束后，停在结束位置：
• : 规定动画的速度曲线，默认是

常用动画简写 :

• 动画每次播放3S 一直重复播放
• } 动画播放完毕后保持结束位置
• 动画首次1S后播放，之后循环播放，每次播放时间3S

代码演示 :

4. 多组动画

animation可以添加多组动画，逗号隔开即可，动画之间互不影响。

4 . 大数据热点图案例

• 大盒子装背景图片
• 里面放一个 用来放效果 定位
• 里面放一个点三个波纹 小盒子
• 用定位保证小波纹在父盒子水平垂直居中 放大之后就会中心向四周发散 , 波纹效果用盒子阴影
• 定义动画 , 盒子越来越淡
• 调用动画 , 动画时长 , 动画运动曲线 , 动画循环
• 波纹二三 , 动画设置等待时间 ( 注意选择器权重问题 )
• 不要用 因为他会让影影变大
• 注意权重问题 和 是同级

代码演示

代码演示

代码

• : 规定动画的速度曲线，默认是

• • 准备一个大盒子小盒子 , 装背景图片
  • 定义动画 , 0 时背景图片位置不动 , 100 时背景图片跑完
  • 调用动画 , 选择步长
  • 给小盒子添加动画 , 0 时小盒子位置不动 , 100 时小盒子跑到盒子中间
  • 两个动画不能叠加 , 中间需要用逗号隔开
  • 盒子移动到中间位置停留
  • 大盒子插入白冰山背景图 , 用伪元素插入白冰山图
  • 黑冰山要降低层级 , 写个透明度
  • 背景图片移动的位置是小熊背景图的宽度

  代码演示 :

  • 近大远小
  • 物体和面遮挡不可见

  三维坐标系

  • x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
  • y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
  • z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

  1 . 空间位移 translate

  1 . 转换知识要点

  • 位移：
  • 旋转：
  • 透视：
  • 呈现

  2 . 空间位移

  语法

  • ：仅仅是在 x 轴上移动
  • ：仅仅是在 y 轴上移动
  • ：仅仅是在 z 轴上移动
  • ：其中x、y、z 分别指要移动的轴的方向的距离
  • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

  代码演示

  2 . 透视 perspective

  旋转

  语法

  • – 沿着 x 轴正方向旋转 45 度
  • – 沿着 y 轴正方向旋转 45 度
  • – 沿着 z 轴正方向旋转 45 度
  • – 沿着自定义轴旋转 45 deg 为角度

  左手准则

  • 左手的拇指指向 y 轴的正方向

  • 1. • – 沿着自定义轴旋转 deg 为角度
       • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
         • – 沿着对角线旋转 45deg
         • – 沿着 x 轴旋转 45deg

    代码演示

    4 . 3D呈现立体图形 transform-style ⭐️⭐️⭐️

    • 控制子元素是否开启三维立体环境
    • 代表子元素不开启 立体空间，默认的
    • 子元素开启立体空间
    • 代码写给父级，但是影响的是子盒子

    代码演示

    2. flex布局★★★

    • 设置主轴对齐方式为居中

    • 设置测轴对齐方式为居中

    • 优点: 未知宽高盒子水平垂直居中

    3 . 定位 (position)

    • 子盒子绝对定位 , 父盒子相对定位
    • 子盒子移动父盒子的 50% () , 然后反方向移动自身的一半 () .
    • 缺陷 : 必须知道子盒子的宽高

    4 . 定位+外边距 (margin)

    • 子盒子绝对定位 , 父盒子相对定位
    • 上下左右为 0 ,
    • 优点 : 无脑 , 且兼容性好

    5 . 块级盒子水平居中

    外边距可以让块级盒子水平居中 , 但必须满足两个条件

    1. 盒子必须指定了宽度
    2. 盒子左右的外边距都设置为 auto
    本文地址：http://ww.kub2b.com/quote/11713.html     企库往 http://ww.kub2b.com/ ,  查看更多