2019.4.18 HTML + CSS相关整理

@

目录

• 标签
  • 块标签
  • 行标签
  • 行块转化
• 嵌套规则
  • css引入方式
    • 行间样式
    • 内部引入
    • 外部引入
• 选择器
  • 基础选择器
  • 组合选择器
• 盒模型
• css样式
  • 字体属性
    • 设置字体的大小
    • 设置字体的粗细
    • 设置字体的风格
    • 设置不同类型的字体
    • font简写
    • 文字的对齐 缩进 下划线 水平对齐
    • 间距
    • 设置圆角
  • 鼠标样式和链接点击样式
    • 调整鼠标样式为链接点击样式(小手)
    • 链接没有被访问时的颜色
    • 链接被访问过之后的颜色
    • 鼠标悬停时链接的颜色
    • 鼠标点击时链接的颜色
  • 背景
    • 背景颜色
    • 背景图片
    • 背景平铺
    • 背景是否滚动
    • 背景绘制的区域
    • 背景位置
    • 背景的简写
    • img和背景图片的区别：
  • 隐藏
  • 锚点
  • 滑动门
  • 精灵图
  • css的三大特性
    • 继承性
    • 层叠性
    • 优先级（权重）
    • 权重叠加
    • CSS特殊性（Specificity）
• 浮动
  • 正常浮动(一旦浮动后脱离标准流)
  • 清除浮动
  • 浮动多类名
• 定位
  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 四种定位总结
• z-index

标签

块标签

• div 无语义标签 分块
• p 段落标签 只能嵌套行标签
• h1~h6 标题
• hr 分割线
• br 换行符
• ul,ol,li 列表

行标签

• img 图片 src alt title
• span 无语义标签
• input type value:默认值 placeholder
• a 超链接 href target

行块转化

display:行标签/块标签/行块标签;

1.inline 行标签 display：inline —— 块标签转换行标签
2.block 块标签 display：block —— 行标签转换块标签
3.inline-block 行块标签 —— 既有行标签属性 又有块标签属性

绝对地址:网址

相对地址:相对于某个文件的地址 ../:返回上一层目录 如果同一级直接写文件名即可

---

嵌套规则

css引入方式

行间样式

	<a href="" style="color: black;">新闻</a>

内部引入

• 在head中添加style标签,在style标签中写选择器

外部引入

• 创建css文件
• 在html文件的head标签中,使用link标签将css文件引入

<link rel="stylesheet" type="text/css" href="css/index.css" />

行间样式优先级最高,内部引入和外部引入在选择器的优先级相同时,看执行顺序

---

选择器

基础选择器

• 通配符选择器

  匹配页面上所有的标签

  	*{
    	color: red;
     }
  

• 标签选择器

  用标签名即可

• 类选择器

  可以同时给多个标签设置

  语法:

  选择器: . + 类名

  .name{
  	color: yellow;
  }
  

  标签上进行绑定: class="类名"

  <p class="name">mini</p>
  
  

• id选择器

  只能给页面中一个标签设置

  语法:

  选择器: # + id名

  #name{
  	color: yellow;
  }
  

  标签上进行绑定: id="id名"

  <p id="name">mini</p>
  
  

选择器优先级

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

组合选择器

由基础选择器组成(通配符除外)

• 后代选择器

  注意优先级问题(使用检查帮助查找问题)

  div a ...{
  	color: lightblue;
  }
  

• 群组选择器

  a,p{
  	color: red;
  }
  

---

盒模型

父子关系用padding,兄弟关系用margin

• border

  边框:

  语法: border:宽度 样式 颜色; -> 四个方向

  样式: solid dashed dotted

  某个方向: border-top/bottom/left/right

• margin

  外边距

  语法: margin:距离;

  某个方向:margin-top/bottom/left/right

  注意:行标签垂直方向不可设置

• padding

  内边距

  语法: padding:距离;

  某个方向: padding-top/bottom/left/right

  注意:行标签垂直方向不可设置

---

css样式

• width
• height
• background-color
• color
• font-size
• text-align
• margin/padding/border

字体属性

设置字体的大小

font-size  设置字体的大小
​取值：font-size: 12px;
注意：在css大多数数值都需要添加单位
字体大小默认16px，最小12px，更小的要用lighter调

设置字体的粗细

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

用数字设置的时候，只有400和700会产生变化，是因为字体在初始设计的时候就没有设置太多的粗细标准，一般就是两种，默认的和加粗的

所以 在实际工作中 用的最多的就是normal（400） bold（700）

设置字体的风格

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

设置不同类型的字体

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

• 1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。
• 2.字体可以写多组，中间用逗号隔开.
• 3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号.
  
  了解：http://code.ciaoca.com/style/cssfont2unicode/

font简写

font: font-style  font-weight  font-size/line-height  font-family;

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

文字的对齐 缩进 下划线 水平对齐

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

首行缩进

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

字体下划线和删除线

text-decoration:值;

1.underline 下划线
2.line-through 删除线
3.none 去掉多余的样式（比如去掉链接的下划线）

间距

中文字符间距:letter-spacing:数值;

英文单词间距:word-spacing:数值;

行间距(行高):line-height:数值;

设置圆角

border-radius:值;
设置圆角 值是和画圆有关的

---

鼠标样式和链接点击样式

调整鼠标样式为链接点击样式(小手)

cursor: pointer;

链接没有被访问时的颜色

a:link{
       color: gray;
   }

链接被访问过之后的颜色

a:visited{
        color: red;
    }

鼠标悬停时链接的颜色

    a:hover{
        /*鼠标悬停*/
        color: deeppink;
    }

鼠标点击时链接的颜色

    a:active{
        /*鼠标点击*/
        color: gold;
    }

背景

背景颜色

background-color: red; 

颜色可以设置成十六进制 或者 rgb 或者 rgba 

rgba:(数值1,数值2,数值3,数值4)
数值1,数值2,数值3 的取值范围为0-255,是RGB色彩表示法的颜色
数值4 取值范围0(完全透明)-1(完全不透明),是用来调节透明度的
和opacity一样

背景图片

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

背景平铺

background-repeat: 背景平铺;

- 1.repeat 平铺  默认的
- 2.no-repeat 不平铺
- 3.repeat-x 水平平铺
- 4.repeat-y 垂直平铺

背景是否滚动

background-attachment: 背景是否滚动;

1.scroll  默认值 图片跟随盒子一起滚动
2.fixed	  图片不跟随盒子一起滚动

背景绘制的区域

background-clip: 背景绘制的区域;
1.border-box  默认
2.content-box  以内容为区域(盒模型的蓝色部分)
3.padding-box  以内边距为区域(盒模型的蓝色 + 绿色部分)

背景位置

background-position: 背景位置;

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

背景的简写

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

如：background: #fff url() no-repeat scroll center center;

img和背景图片的区别：

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

隐藏

1.display:none;

隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）

2.overflow:hidden;

让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉

我们都知道每个浏览器对代码的解析都不同，所以我们在做页面的时候会遇到很多bug，在IE里面如果内容的高度超过了该层的高度他会自动地撑开，但火狐等里面的高度是多高这层就只有这么大，内容的高即使超出了也不会影响你设置的高，在这个时候我们有的问题就可以用overflow：hidden；来解决，这是第一点，还有就是我们可以利用它做出很多hover效果

3.visibility:hidden;

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到）

锚点

使用id选择器
a标签中的地址填#id

滑动门

做气泡时候用到的 1px的竖线 用来撑开内容

精灵图

雪碧牛网站 http://www.spritecow.com/

用来定位精灵图的

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

权重叠加

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右

，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	正无穷

权重是可以叠加的

比如的例子：

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   

---

浮动

行标签被浮动后可以设置宽高当成块标签使用

正常浮动(一旦浮动后脱离标准流)

如果某个标签A是浮动的 假如A标签的上一个标签也是浮动的 那么A就会跟在上一个标签后面

如果一行放不下两个标签 A就会被挤到下一行

如果上一个元素是标准流元素 那么A相对的垂直位置不会改变

div的顺序是由HTML代码顺序决定

清除浮动

在父类中使用overflow和浮动哪个就在哪个里写的clear

• 对于父标签
  • 在父类标签中添加overflow:hidden
  • 为了让父标签能包住子元素的浮动标签
• 对于兄弟标签
  • 在标签中添加clear
  • 清除浮动可以让浮动标签复原成块标签的状态

浮动最早是用来做文字环绕效果的

浮动多类名

在style中写三个单独的样式分别左浮动,右浮动和清除浮动
在使用时给要浮动的块(或要清除浮动的块)使用多类名增加浮动(或清除浮动)

---

定位

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

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值越大，层级越高

思考：上大盒子压住下大盒子 下大盒子里面的子元素压住上盒子

1. 如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的