第一章 基础知识
1、CSS单位:绝对单位:一般用于印刷
相对单位:px像素、%百分比、em当前元素字体大小、rem根元素字体大小//根元素是指html里的font-size
/*所有浏览器默认的font-size都是16px,1em默认=16px ,但是如果在CSS中提前声明body{font-size:62.5%;}
则可以使1em=10px。
2、CSS特性
继承性:padding、margin、border不具有继承性。
层叠性:重复定义了多个相同的属性,一般最后一个属性会覆盖前面的。
优先级:
3、CSS选择器:
第二章 CSS规范
1、命名规范
id和class命名一般使用驼峰命名法、中划线命名法、下划线命名法,尽量用英文而不是中文,一般不缩写,除非是一看就明白的比如nav(navigator),为了避免class命名的重复,一般取父元素的class作为前缀。
CSS属性书写的时候,把影响元素页面布局的样式排到前面,把不影响布局的样式排到后面。
2、利用webpack等工具压缩时,/*!注释内容 */ 注释要加感叹号,如果不加,在压缩的过程中,注释内容会被去掉。
3、CSS reset可以去除浏览器的默认样式。
第三章 盒子模型
从里到外分别是:content、padding、border、margin
1、border:0 和border:none区别,border:0浏览器会进行渲染,占用内存,虽然不显示。而none则不会进行渲染。
兼容性也有区别。none在IE6和IE7里不起作用,还会显示边框。
2、margin叠加,也叫外边距叠加。
A元素设置一个margin-bottom,B元素设置一个margin-top,则两者叠加并不是两者之和,而是两者中的最大值。
外边距叠加的三种情况,同级元素上下排、父子元素(一个元素包含在另一个元素中)如果没有padding和border就会合并、空元素和另一个元素的外边距也会发生合并。
3、负margin可以实现自适应两列布局
4、position结合margin可以实现元素垂直居中,position:absolute; margin-top:"height一般的负值";
margin-left:"width一半的数值"
5、margin-top:-1px可以解决选项卡下边框显示问题
6、overflow : 根据W3C标准,盒子里的内容一般是被限制在盒子的边框里面的,但有时候也会溢出,可以使用overflow来定义内容溢出边框发生的事。overflow四个属性:
visible:溢出内容可见
hidden:溢出内容隐藏
scroll:内容溢出显示滚动条
auto:和scroll类似,但是滚动条是在有需要的时候才显示
第四章 display属性
HTML中根据元素的表现形式,一般分为两类:块元素(block)和行内元素(inline),除此之外还有inline-block和table-cell
1、块元素单独占一行,排斥其他元素。块元素内部可以容纳其他元素和行内元素。
2、行内元素可以和其他行内元素同一行,行内元素内部可以容纳其他行元素,但不可以容纳块元素。
3、可以通过display属性来改变元素的类型。
常见属性:inline、block、inline-block、table、table-row、table-cell、none
inline-block元素具备block和inline元素的特点,常见的inline-block元素有两个img和input。
inline元素不能定义height和width,inline-block不存在兼容性问题。
4、CSS中隐藏一个元素可以使用display:none或者visibility:hidden但是他们之间有本质区别:
display:none :元素被隐藏之后不占据原来的位置
visibility:hidden :元素隐藏之后仍然占据原来的位置
5、display:table-cell 常用用途:
A:图片垂直居中于元素:display:table-cell 和 vertical-align:middle实现图片垂直居中效果
B: 水平居中可以使用text-align:center实现
C: 可以用在自适应等高布局中
D: 自动平均划分元素:父元素定义display:table,子元素定义display:table-cell,父元素定义一定的宽度,那么子元素就会根据子元素的个数平均划分
6、去除inline-block元素间距:可以在父元素中定义font-size:0
第五章 文本效果
1、text-indent
可以使用text-indent:2em;来实现段落的首行缩进,网页的logo部分可以使用text-indent:-9999px隐藏文本,最好不要用display:none来隐藏,因为后者会被搜索引擎当做垃圾信息忽略掉,影响网站排名。
2、text-align
定义对齐方式
对文本、inline元素和inline-block元素都会起作用,但对block不起作用,比如img元素就属于inline-block元素
div是block元素,要想水平居中div元素,可以先使用display:inline-block,再使用text-align:center
3、text-align:center和margin:0 auto;
前者实现的是文字、inline元素以及inline-block元素的水平居中,后者实现的是block元素的水平居中
前者在父元素中定义,后者在当前元素中定义
4、line-height行高
行高:一行的高度,两基线之间的垂直距离
行间距:两行文本之间的距离
正准确的定义是:两行文字基线之间的距离
vertical-align属性中的top、middle、baseline、bottom分别对应顶线、中线、基线、底线
如果子元素没有定义line-height,那么子元素会直接继承父元素的line-height
当line-height取值为无单位数字时,该无单位数字可以理解为一个系数。
5、vertical-align
允许负长度值和百分比值
用于定义周围文字、inline元素或者inline-block元素相对于该元素基线的垂直对齐方式
6、vertical-align属性应用
inline元素和inline-block元素
常见的inline-block元素有两个img和input
vertical-align属性对block元素无效,对inline、inline-block和table-cell有效
inline元素和inline-block元素的vertical-align是针对周围元素来说的,定义的是周围元素相对于当前元素的对齐方式,table-cell元素的vertical-align属性是针对自身而言的,vertical-align定义的是内部子元素相对于自身的对齐方式。
第六章 表单效果
1、深入radio和checkbox
radio是指单选框,checkbox是指复选框
单选框或复选框与文字垂直居中对齐:文字大小为12px时 vertical-align:-3px解决对齐问题
文字大小为14px时vertical-align:-2px解决对齐问题
其他文字大小也是类似,自己根据情况调整数值。
2、深入textarea
指的是多行文本框
textarea本身可以放大或缩小,但是前端在设计页面的时候,为了防止破坏布局,一般都固定大小,禁止拖动。
固定大小
可以定义宽度和高度范围min-width、min-height、max-width、max-height
禁止拖动
resize:none;
在Chrome和IE中实现相同外观
区别:Chrome和IE每行字数和文字的列数不同
默认情况下IE有滚动条,而Chrome没有滚动条
实现相同外观的方法:
用CSS的width和height定义textarea的大小
用overflow:auto来定义textarea的滚动条自适应
表单对齐
左边是文字右面是表单元素
左栏一般是一个label,右栏是若干文本框
左栏和右栏盒子都设置左浮动
左栏text-align属性定义为right,使文字右对齐
最重要的是左右栏盒子总长度等于行宽
第七章 浮动布局
1、正常文档流normal flow
div、p、hr都是块元素独占一行,span、i、img都是行内元素,两个行内元素相邻就会位于同一行
2、脱离文档流
指脱离正常的文档流,用浮动或定位改变了默认情况下的HTML文档结构。
浮动一般用来实现水平方向的布局
3、深入浮动
float属性有三个:left、right、none
一旦一个元素定义了float:left时,该元素会自动变成block型
4、浮动的影响
对自身的影响:只要设置了浮动,就会变成块元素即display属性:block
对父元素的影响:如果一个元素设置了浮动,就会脱离正常文档流,如果浮动元素的height大于父元素height,或者父元素没有定义height,浮动元素就会脱离父元素。
对兄弟元素的影响:
兄弟元素也是浮动元素:同向时,元素从左到右从上到下紧挨着排列,反方向的时候,这两个元素会移向两边。
兄弟元素不是浮动元素时:会影响到布局
对子元素的影响:如果一个元素是浮动钙元素,且它的子元素也是浮动元素,则这个浮动元素会自适应的包含该子元素。
浮动的副作用:
父元素高度塌陷,边框无法撑开,背景无法显示,页面布局错乱。
5、清除浮动
clear:both、overflow:hidden、::after伪元素
clear:both
这种方法不好,因为会增加多余的标签,而且破坏HTML的语义
overflow:hidden
与clear:both相比不会破坏HTML语义结构,也不会增加多余的标签,但是会隐藏超出父元素的部分
::after伪元素
最好的清除浮动的方案是使用::after伪元素结合clear:both来清除浮动
第八章 定位布局
缺乏灵活性但是可以对元素进行精准定位,定位布局有固定定位fixed、相对定位relative、绝对定位absolute、静态定位static。
position一般配合top、bottom、left、right
position:absolute会将元素转换为block元素
1、子元素相对父元素定位
给父元素定义position:relative,给子元素定义position:absolute,然后再去定位。
/* position:absolute会将元素转化为block元素 */
2、子元素相对祖先元素定位
和相对父元素定位类似,先给祖先元素定义position:relative,给后代元素定义position:absolute,然后再去定位。
/* 绝对定位元素是相对于外层第一个设置了position:relative(或absolute、fixed)的祖先元素来定位的。*/
3、z-index属性
网页是三维结构,并不是平面的。z-index属性可以决定谁显示在上面。
常见属性有两个auto:堆叠顺序与父元素相等(默认值)
number:可以为负整数、0以及正整数。
/* 如果没有指定position属性值(除了static),则z-index属性无效 */
第九章 CSS图形
一张图片会引发一次HTTP请求,一些图形效果用CSS实现比用图片实现加载速度快。
1、三角形:
盒子模型中,当一个盒子两条边在边角处相交的时候,浏览器会在交点处按照某个角度绘制一条结合线。
border-color属性四个值分别对应上、右、下、左。transparent(透明)
带边框的三角形:外层三角形的border-width比内层三角形的border-width大1px
2、圆角与圆
CSS3中可以用border-radius半径属性为元素添加圆角效果,取值是一个长度值,单位可以是px、em
border-radius的属性值可以设置四个值,分别对应左上、右上、右下、左下。也可以设置1、2、3个值
半圆:把height设为宽度width的一半,左上角和右上角半径定义与元素高度一致,右下角和左下角的圆角半径定义为0
圆:元素的宽度和高度定义为相同值,把四个角圆半径定义为宽度或高度的一半
border-radius属性可以分开,并为4个角设置相应的圆角值,分别是
border-top-right-radius;右上角 ,其他分别是(bottom-right、bottom-left、top-left)
3、椭圆
border-radius:x/y; x代表水平半径,y代表垂直半径
第十章 性能优化
五个方面的优化技巧:属性简写、语法压缩、压缩工具、图片压缩、高性能选择器
1、属性简写
盒模型简写:
border:1px solid red;
padding:长度值1 长度值2 长度值3 长度值4(可以只写一个或者两个长度值)
margin:长度值1 长度值2 长度值3 长度值4(和padding一样,可以只写一个或者两个长度值)
背景简写
背景常用属性有color、image、repeat、attachment、position
image、repeat、position可以简写成:background:url(images/flower.jpg)no-repeat 80px 40px
字体简写
常用属性family、size、weight、height
简写形式举例:font:bold 12px/1.5em "微软雅黑"
/*要指定family和size属性,其他属性没有指定自动用默认值。必须按照style|variant|weight|size|height|family的顺序,而且size和height值之间需要加入斜杠 */
颜色值简写
color:#336699简写成color:#369
2、语法压缩
七个方面优化:
空白符、结尾分号、url()的引号、属性值为0、属性值以0开头的小数、合并相同的定义、利用继承进行合并
空白符:实际开发时纵向书写,当站发布的时候,再使用工具压缩成横向书写。
结尾分号:每一个样式都是大括号{ }括起来的,最后一个属性后面的分号不必要,省略之后无影响。
url()的引号:在background-image。cursor等属性的url中路径不需要添加引号。
属性值为0:不需要添加单位
属性值以0开头的小数:可以把开头的0去掉,但是不建议这么做,压缩工具最后可以直接去掉0
合并相同的定义:群组选择器可以合并这些相同的样式
利用继承进行合并:把相同的属性定义在父元素上,精简代码
3、压缩工具
CSS压缩工具有3种:在线版、构建工具和编辑器插件
在线版常用压缩工具:CSS Compressor 和 YUI Compressor
4、图片压缩
色彩丰富高品质:JPEG格式 ;一般图片缩小体积用PNG ; 动画用GIF格式
tinypng在线压缩工具,可以压缩png和jpg图片50%甚至90%
5、高性能选择器
选择器在浏览器中的解析原理:浏览器是从右到左进行解析的
选择器匹配效率:
id>class>元素>相邻>子选择器>后代>通配符>属性>伪类
不要使用通配符(*),*{ }表示选取页面所有元素,效率非常低
不要再Id选择器和class选择器前面添加元素名
选择器不要超过3层,位置靠右选择条件尽可能精确
避免使用后代选择器,尽量少用子代选择器,因为后代选择器匹配量较大
第十一章 CSS技巧
1、水平居中
文本水平居中:text-align:center;
元素的水平居中:
margin:0 auto; /*上下margin都是0,左右margin都是auto ,想用这种方法一定要指定块元素的宽度*/
行内元素inline和复合行内元素inline-*(*代表block、table、flex等)
语法:父元素{ text-align:center; } /*img是inline-block元素 */
2、垂直居中
文本的垂直居中
单行文本:定义line-height和height两个属性的值相等,就可以实现垂直居中了。
多行文本垂直居中
语法:父元素{ display:table-cell; vertical-align:middle;} span{display:inline-block;}
/* 关键在于span元素把所有文本包含起来,然后定义span为inline-block类型 */
元素的垂直居中
/* 块元素垂直居中比价麻烦,高度已知时可以使用万能的position */
块元素:
父元素{position:relative;}
子元素{ position:absolute;
top:50%;
left:50%;
margin-top:"height值一半的负值";
margin-left:"width值得一半的负值"
}
/* 单独实现水平居中,去掉top和margin-top,单独实现垂直居中,去掉left和margin-left */
行内块元素(inline-block):
父元素{display:table-cell; vertical-align:middle;}
子元素{vertical-align:middle; }
3、CSS Sprite
/* 将零散的小背景图合成一张大背景图,减少HTTP请求 */
先用PS合成一张大背景图
再用background-image引入
/* 常用工具CSS Sprite Generator和Sprite Cow 雪碧图大小最好不要超过200KB*/
4、iconfont图标
阿里的图标库
下载的文件格式说明:
.eot 微软开发的嵌入网页的字体,IE专用字体
.woff W3C推荐的标准,Web字体最佳格式
.tff Mac OS和Windows最常见的字体格式
.svg W3C制定的开放标准的图形格式
关键语法:@font-face
使用iconfont图标的步骤:
下载字体文件放入网站目录
在CSS中,用@font-face自定义字体
在HTML中,元素添加class="iconfont"
在元素中添加图片对应字符串
国外最大的图标分享网站:IcoMoon
第十二章 重要概念
三方面:包含块(containing block)、BFC和IFC、层叠上下文
1、包含块(containing block)
a、一个元素的包含块是由离它最近的“块级祖先元素”的“内容边界”决定的。离它最近position:relative或者absolute祖先决定的,一个元素的CSS盒子为它的内部元素创建了包含块。
b、根元素:页面中顶端的元素,没有父元素,根元素所在的包含块是初始包含块
c、固定定位元素:如果元素的position属性为fixed,那么它的包含块是当前可视窗口,也就是当前浏览器窗口。
d、固定定位元素是相对于当前浏览器窗口而言的
e、元素的position属性为static或者relative时,它的包含块是由离它最近的块级祖先元素创建的,祖先元素必须是block、inline-block或者table-cell类型。
f、绝对定位元素
包含块是离最近的position不是static的祖先元素,如果找不到则包含块是body元素。
包含块的范围分两种情况:
祖先是块元素,则范围取决于祖先元素的padding edge
如果祖先是行内元素,则取决于祖先元素的direction属性
2、层叠上下文(stacking context)
z-index属性,层叠显示,z轴决定显示的顺序。
层叠级别(stacking level)
层叠上下文是可以嵌套的。
行内元素因为显示的内容,所以要比浮动元素和块元素的高。
层叠级别相同,遵循"后来者居上"原则
3、BFC和IFC
CSS中任何元素都可以看成一个盒子,一个盒子只能是块盒子或者行内盒子,不能是块盒子的同时又是行内盒子。其中块盒子参与BFC(块级格式上下文),行内盒子参与IFC(行级格式上下文)。
块盒子:block、table、list-item /*参与BFC而不是创建BFC */
行内盒子:inline、inline-block、inline-table
BFC是一个独立的渲染区域,只有块盒子参与
创建新的BFC:
/*以下任何条件都会创建一个新的BFC */
根元素
float属性除了none以外的值,也就是float:left和float:right
position除了static和relative以外的值,也就是absolute和fixed
overflow属性除了visible以外的值,也就是auto、hidden、scroll
元素类型(display属性)为block、caption、cell
/* BFC也会产生一些问题 比如overflow:hidden超出元素内容会隐藏等 */
BFC的特点:
内部盒子会在垂直方向上一个接一个排列
内部相邻的margin-top和margin-bottom会叠加
内部每一个元素左边界会紧贴着包含盒子的容器的左边,即使存在浮动也是如此
在BFC内部如果存在一个新的BFC,并且存在内部元素是浮动元素,则BFC不会与float元素区域重叠
BFC在页面上就是一个隔离的盒子,不影响外包元素
计算BFC高度时,其内部浮动元素的高度也会参加
BFC的用途:
避免垂直外边距叠加
将两个元素放在两个BFC中就不会产生margin-top和margin-bottom叠加的现象
/* 添加overflow:hidden */
创建BFC来清除浮动
BFC在计算自身高度的时候,会把浮动子元素的高度算进去,最终父元素高度=浮动子元素的高度
/* 添加overflow:hidden、display:inline-block、float:left 等都可以 */
BFC避免文字环绕
利用的就是在BFC内部如果存在一个新的BFC,并且存在内部元素是浮动元素,则BFC不会与float元素区域重叠
使用BFC创建自适应两列布局:
一个元素浮动之后,它的层叠级别比普通文档流的块级盒子级别更高,所以浮动元素会脱离普通文档流“浮”上去,再为剩下的#content元素添加overflow:hidden,此时#content变成了一个新的BFC,就创建了自适应两列布局。
/*之前可以采用 负margin 来实现自适应左右两列布局 */