zoukankan      html  css  js  c++  java
  • 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不具有继承性。

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

                    优先级:

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

  • 相关阅读:
    Java.io.outputstream.PrintStream:打印流
    Codeforces 732F. Tourist Reform (Tarjan缩点)
    退役了
    POJ 3281 Dining (最大流)
    Light oj 1233
    Light oj 1125
    HDU 5521 Meeting (最短路)
    Light oj 1095
    Light oj 1044
    HDU 3549 Flow Problem (dinic模版 && isap模版)
  • 原文地址:https://www.cnblogs.com/oaoa/p/14323117.html
Copyright © 2011-2022 走看看