渡一教育公开课重点笔记之css

1. 主流浏览器及内核

浏览器         内核

IE             trident

Firefox    Gecko

Google chrome    Webkit/blink(2014年上市)

Safari            Webkit

Opera presto

1. 引入css的三种方式

1）行间样式

2）页面css

3）外部css

1. 计算机语言中对同步与异步的解释

1）同步的：不同时执行，与生活中的同步相反

2）异步的：同时执行，与生活中的异步相反

1. 在一个元素上想要添加多个class，在class上写上class名，每个class名之间用空格隔开

如<div class=”demo demo1 demo2”></div>

1. *通配符选择器，可选中所有标签，包括body标签，head标签，html标签
2. 属性选择器：[属性名/属性名=”属性值”]
3. 行间样式与各个选择器的优先级：

!important > 行间样式 > id > class | 属性选择器 | 伪类选择器 > 标签选择器 | 伪元素选择器 > 通配符选择器

1. Css权重

!important    无穷大

行间样式 1000

Id 100

class | 属性选择器 | 伪类选择器 10

标签选择器 | 伪元素选择器 1

通配符选择器 0

1. 计算机中的无穷大是一个定量，即 Infinity + 2  >  Infinity
2. 各权重值之间的进制是256进制
3. Css复杂选择器

1）父子选择器/派生选择器   所用的选择器之间必须成上下一代的关系，比如父子，爷孙等等  div span em{}

2）直接子元素选择器  后一个选择器必须是前一个选择器的直接子元素，好比真正的父子关系  div > em{}

3）浏览器遍历父子选择器/派生选择器的顺序是自右向左的

4）并列选择器   用多个限制条件选中一个元素,这多个限制条件必须是一个元素上面的 div.demo{}  div和.demo中间不能有空格

5）并列选择器当中如果要用标签选择器和class选择器或id选择器并列时，标签选择器必须放在最前面

6）分组选择器  每个元素之间用逗号隔开 div,span,em{}  为了解决代码冗余

7）伪类选择器  选择器:hover{} 等

1. 浏览器默认字体大小是16px
2. 设置字体的大小等于设置字体的高度
3. font-weight的属性值有lighter(细体),normal(正常),bold(加粗),bolder(更粗),100-900;字体是否被加粗/变细，加粗/变细程度是多大，取决于字体包
4. font-style 的属性值有：italic(斜体)等
5. 互联网最常用的字体为arial
6. 颜色的三种表示方式

1） 颜色名，如red,green,blue

2） 颜色代码，十六进制颜色代码（从00---ff）只有当三种的两位数都重复时才可以简化，如：#000000  -->  #000     #00ff44  -->  #0f4

3） 颜色函数，rgb(0-255,0-255,0-255)

1. 特用颜色：transparent  透明色
2. css只有块注释（/**/）,没有行注释（//）
3. line-height  单行文本所占高度(行高); 让单行文本的行高等于你所设置的容器的高度，文本就会在容器内垂直居中，水平居中（text-align:center）
4. text-indent  首行缩进 text-indent:2em则可以缩进两个字符
5. 单位讲解：

1） px  一个像素只能代表一个颜色点，像素是一种相对单位

2） em  1em = 1 * font-size    它是一个相对单位，相对font-size来说

3） 文字的行高是1.2倍行高，就是文字的行高 = 1.2em

1. text-decoration 的属性值  none（默认），underline（定义文本下的一条线），overline（定义文本上的一条线），line-through（定义穿过文本下的一条线），blink（定义闪烁的文本），inherit（规定应该从父元素继承 text-decoration 属性的值）
2. cursor 光标 常用：pointer（小手）
3. css企业开发经验和习惯

1） 图片img在设置宽高时，只设置其中的一个，另一个就会自动拉伸

2） 块级元素（block），行级元素（Inline），行级块元素（inline-block）

元素	行级元素（内联元素） display:inline	块级元素 display:block	行级块元素 display:inline-block
特点	内容决定元素所占位置	独占一行	内容决定大小
	不可以通过css改变宽高	可以通过css改变宽高	可以改宽高
举例	Span strong em a del 伪元素	Div p ul li ol form address	img

3） 凡是带有Inline的元素（如inline,inline-block）都有文字特性，这也是当把四张图片并排放在一起时，中间会有间距的原因;要想去掉这一间距，可以把每个img标签之间的空格去掉（如：<img src="demo.jpg" alt=""><img src="demo.jpg" alt=""><img src="demo.jpg" alt="">）；

在测试时，可以使用margi-left设置负值来调，但是当把项目写完后，在上线前记得去掉margi-left，因为上线之后，代码会被压缩，代码之间的空格等会被去掉，如果设置了margin-left为负值，图片就会被挤压

4） 在企业开发中，可以先写css，再写html（先编写功能，再选配功能）

5） 在企业开发中，可以先对一些标签进行初始化，去掉系统对标签的样式，如可以写一个css文档，用标签选择器把ul li 前的小黑点去掉，把a标签系统的蓝色变成黑色，把em标签的斜体样式去掉（font-style:normal）；然后把这个css引入html文档

6） 一个html文档中可以引入多个css文档，Js文档

7） 在初始化所有标签时（比如让margin:0;padding:0），建议用通配符选择器（*），因为通配符选择器的权重值为0，不会对后续的选择器造成影响

1. 盒子模型

1） 图解盒子模型

2） 内边距（padding）和外边距（margin）margin/padding:上,右,下,左

3） 计算一个网页中的可视化盒子的真实高度和真实宽度时，不能把外边距（margin）算进去，因为外边距不是可视化的，给元素设置margin和padding值是%,它是相对于其父元素的宽度

4） body元素的默认的margin值是8像素

1. 定位（层模型）

1）绝对定位（position:absolute）

① 概念：脱离原来的位置进行定位；当一个元素被设置了绝对定位时，它会进入其他层并且该元素的原来位置会被释放掉，位于该元素下面的元素就会上去占据该元素原来的位置（层模型）

② 相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

2）相对定位（position:relative）

① 概念：保留原来位置进行定位；当一个元素被设置了相对定位时，它会进入其他层但是该元素依然会占据原来的位置，不会将其释放（层模型）

② 相对于它原来的位置进行定位

③ 相对定位最好不要给top和bottom设置百分值，因为浏览器的支持性有问题

3）一般在企业开发时，将相对定位设为参照物，用绝对定位进行定位

4）设置定位值时，一般是由它的上下左右的边线来说的

5）z-index属性只在position属性上有效

6）固定定位（position:fixed）

1. 让一个元素/容器在文档/可视区域正中间进行居中的方法

1）在文档正中间进行居中的代码

要设置元素的选择器{

Width:元素的宽度;

Height:元素的高度;

position: absolute;

top:50%;

left:50%;

margin-left:-(元素的宽度/2);

Margin-top:-(元素的高度/2);

}

2）在可视区域正中间进行居中的代码

要设置元素的选择器{

Width:元素的宽度;

Height:元素的高度;

position: fixed;

top:50%;

left:50%;

margin-left:-(元素的宽度/2);

Margin-top:-(元素的高度/2);

}

3）图解让元素居于正中间的步骤（以居中五环为例）

① position:定位（absolute/fixed）;top:50%;left:50%;

② margin-left:-(元素宽度/2);margin-top:-(元素高度/2);

1. 两栏布局：让两个div元素在同一行（让一个元素设置绝对定位，给另一个元素设置margin，让它被压住的部分出来；注意先写要被设置绝对定位的那个元素）
2. 两个经典bug

1） margin塌陷：对于父子嵌套的元素，垂直方向的margin两者会粘合在一起，两者之中取最大的那个margin，作用于两个元素

解决方法：①  给父元素的顶部设置一个边框（不能使用）

②  BFC（块级格式化上下文）可以改变盒子的语法规则

如何触发一个盒子的bfc：（给父级设）

① position:absolute;

② display:inline-block;

③ float:left/right;

④ overflow:hidden;

2） margin合并：对于兄弟元素来说，垂直方向上的margin值是合并的，两者之间取最大的margin值，两者相同取其中的一个

解决方法：BFC  （给两个元素设置一个父级，在父级的css里面写上触发bfc方法中的其中一种，然后把两个兄弟元素（或其中一个元素）放在父级里面，这样他们垂直方向上的margin值就变成累加的了）

不好处：为了解决这个bug，我们就要去改动html结构，这在企业开发中是绝对禁止的，所以这个bug可以不解决

1. 企业开发中严禁为了改一个bug而去改动html结构
2. 浮动模型

1）浮动元素产生了浮动流

① 所有产生了浮动流的元素，块级元素看不到他们（受影响）

② 产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素（不受影响）

2）清除浮动（clear:both/left/right）

① 要想让一个浮动元素下面的元素不受浮动流影响，可以给这个元素设置一个清除浮动

② 能清除浮动的元素必须是块级元素

③ 要想用一个盒子包住浮动元素，可以在所有浮动元素的最下面放一个p标签，给这个p标签设置一个清除浮动（开发中不能使用）

④ 要想解决②中的问题，可以给这些浮动元素的父级设置一个后面的伪元素，并且把这个伪元素改为块级元素（display:block）,再到里面进行清除浮动操作（clear:both）

⑤ 要想解决②中的问题，还可以给父级元素触发bfc

1. 伪元素

1）伪元素存在于任意一个元素当中

2）伪元素天生是一个行级元素，可以通过display将其改为块级元素或者行级块元素

3）伪元素示例代码

该元素::before/after{

content:”内容”;

}

1. 对一个元素设置了position:absolute或者float:left/right；系统会打内部把元素转换成inline-block
2. 文字溢出处理（溢出容器，要打点展示）

1）单行文本

处理方法：给要处理的文字设置三件套代码

white-space:nowrap;    不要让文字换行

overflow:hidden;     隐藏溢出文本

text-overflow:ellipsis;   对溢出的隐藏文本打点处理

2）多行文本

处理方法：对溢出部分做隐藏处理（overflow:hidden）

1. 背景图片处理

1）background-image:url(图片位置);    //引入图片

2）background-size: 图片宽度,图片高度;    //设置图片大小

3）background-repeat: no-repeat;    //设置图片是否平铺

4）background-position: x,y;     //设置图片位置（像素值,top,left,center,百分值）

1. 当网速很低时，浏览器会屏蔽掉css和js
2. 图片如何很好的去代替文字:

1）首先给元素加上被图片代替掉的文字；然后用css把图片引进，设置；接下来对该元素加上的文字设置css：首先设置首行缩进（text-indent）,让它的值超过元素的宽度；接下来，给文字设置（white-space:nowrap; ），让文字不要换行；最后，设置（overflow:hidden;）让溢出文字隐藏。这样的话，当网速不好时，css被屏蔽了，文字就会被显示出来，正常情况下文字不会出现，不会影响其基本功能。

2）首先给元素加上被图片代替掉的文字；然后用css把图片引进，设置；接下来对该元素加上的文字设置css：首先把容器的高度设置为0；接下来设置padding-top为容器原高度，这时文字就会被挤到下面去；最后，设置overflow:hidden;将文字隐藏就可以了

1. 企业开发相关规定

1）行级元素只能嵌套行级元素

2）块级元素可以嵌套任何元素，但是p标签里面绝对不能嵌套块级元素

3）a标签里面不能嵌套a标签

1. 文本类元素：inline,inline-block (凡是带有inline的元素都有文本的特性)
2. 一个行级块元素中如果有文字，那么外面的文字会与其文字底对齐
3. vertical-align 可以调整垂直方向的文字位置（设置文字垂直对齐方式）

持续更新中.........