CSS进阶

第一章 基础知识

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不具有继承性。

                层叠性:重复定义了多个相同的属性,一般最后一个属性会覆盖前面的。

                优先级:

CSS进阶

3、CSS选择器:

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)        

CSS进阶

              层叠上下文是可以嵌套的。

              行内元素因为显示的内容,所以要比浮动元素和块元素的高。

              层叠级别相同,遵循"后来者居上"原则

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 来实现自适应左右两列布局  */

CSS进阶

上一篇:计算机网络(二):curl指令


下一篇:Https简单流程