一 :CSS预处理器:
一种语言用来为 CSS 增加一些编程的的特性,可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让CSS 更见简洁,适应性更强
二:两种主要css预编译器:
两者共性:
● 混入(Mixins)——class中的class;
● 参数混入——可以传递参数的class,就像函数一样;
● 嵌套规则——Class中嵌套class,从而减少重复的代码;
● 运算——CSS中用上数学;
● 颜色功能——可以编辑颜色;
● 名字空间(namespace)——分组样式,从而可以被调用;
● 作用域——局部修改样式;
● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
两者区别:
(1)Less:1.引入less.js来处理less代码输出到浏览器;
也可开发环节中使用less,然后编译成css文件,直接放到项目中;
也有 Less.app、SimpleLess、CodeKit.app这样 的工具,也有在线编译地址
2.变量符不一样,LESS是@,变量的作用域与sass也不一样
3.LESS没有输出设置
4.LESS不支持条件语句
5.Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分 源码就是采用Less语法编写
(2)Sass:1.安装需要依赖于Ruby环境,是在服务端处理的
2.变量符是$
3.SASS提供4中输出选项:NESTED, COMPACT, COMPRESSED 和 EXPANDED。
输出样式的风格可以有四种选择,默认为nested
nested:嵌套缩进的css代码
expanded:展开的多行css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
4.SASS支持条件语句,可以使用IF{}ELSE{},FOR{}循环等等
5.scss引用的外部文件命名必须以_开头
文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件
6.Sass有工具库Compass
Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。 在它的基础上,封装了一系列有用的模块和模板,补充强化了Sass的功能
7.利用@mixin和@include来调用
三.npm 安装 sass 时 node-sass 包报错问题
在使用npm安装node-sass的时候,运行时可能会出现如下报错:
Module build failed: Error: ENOENT: no such file or directory, scandir
解决方法是:
1、在node_modules\node-sass\目录下,创建一个vendor目录,如果已经存在,可以忽略
2、运行以下命令:
npm rebuild node-sass
四.盒子模型:
1.标准盒(W3C)模型的宽度、高度只包括内容的宽度高度。
2.IE盒模型的宽度、高度,包括content + 宽度高度 + border
3.切换盒模型也很简单,需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型(默认)
box-sizing: border-box 是IE盒子模型
当内容区(content)域超过width时的区别:
当内容区超过width的范围时:
标准盒模型的内容区会扩大,始终与width保持一致。
怪异盒模型,会根据原有宽度(原来的width),优先保证border、padding,然后把剩下的区域分给content。并不会因为content变大,而width变大
怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示
4.补充内容:(1)对于行级元素,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效
(2)对于相邻的块级元素margin-bottom和margin-top 取值方式:
都是正数: 取最大值 距离=Math.max(margin-botton,margin-top)
都是负数: 取最小值 距离=Math.min(margin-botton,margin-top)
上面是正数,下面是负数或者 上面是负数,下面是正数: 正负相加 距离=margin-botton+margin-top
五.BFC布局(IFC为行级格式化上下文):
1.FC(Formatting context格式化上下文):它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用
2.BFC(Block Formatting Contexts块级格式化上下文)定义:
具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会再布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性
3.BFC 布局规则:
(1)内部的Box会在垂直方向,一个接一个地放置
(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
(3)每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
(4)BFC的区域不会与float box重叠
(5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
(6)计算BFC的高度时,浮动元素也参与计算
4.BFC特性及应用:
(1)同一个 BFC 下外边距会发生折叠,分属于不同的BFC时可以阻止margin重叠
(2)自适应两栏布局
(3)可以阻止元素被浮动元素覆盖
(4)可以包含浮动元素——清除内部浮动
5.哪些元素会生成BFC?
(1)根元素
(2)float属性不为none
(3)position为absolute或fixed
(4)display是inline-block,table-cell,table-caption,flex,inline-flex
(5)overflow不为visible
6.属于同一个BFC的两个相邻Box的margin会发生折叠
解决办法让两个box属于不同BFC,给class:father设置overflow:hidden就可以解决margin折叠了
父级设置overflow:hidden触发BFC就可以解决高度塌陷
7.IE中的Layout:Layout 和 BFC 基本是等价的
为了处理 IE 的兼容性,在需要触发 BFC 时,我们除了需要用触发条件中的 CSS 属性来触发 BFC,还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout
六.Iframe的优点和缺点:
(1)优点(目前框架的所有优点完全可以使用Ajax实现,因此已经没有必要使用框架了):
1.iframe能够原封不动的把嵌入的网页展现出来
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决
5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)
6.方便制作导航栏
(2)缺点:
1.会产生很多页面,不容易管理
2.不容易打印
3.浏览器的后退按钮无效
4.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化
5.多数小型的移动设备(PDA 手机)无法完全显示框架,设备兼容性差
6.多框架的页面会增加服务器的http请求,对于大型网站是不可取的
7.iframe会阻塞主页面的Onload事件
8.会影响页面的并行加载
(3)解决iframe缺点方法:
使用js动态给iframe的src加载页面内容,示例代码如下:
<iframe id="fram"></iframe>
document.getelementbyid("fram").src="a2.html"
七.元素定位有哪些(position):
-
absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位
-
fixed 固定定位(老IE6不支持):相对于浏览器窗口进行定位
-
relative相对定位:对于其正常(默认布局)位置进行定位
-
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)
补充:
1.所有的定位如果left、top、right、bottom属性都为默认值,则为默认定位
2.absolute定位会脱离文档,浮动起来,多个层重叠可以使用z-index属性改变层叠顺序
3.absolute定位忽略padding,相对位置为相对定位容器的左上角内边框
八.样式导入方式:
1.link的使用:
2.import的使用(推荐使用 @import url(index.css);):
3.不同点:
(1)link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件
(2)兼容性不同,link不存在兼容性的问题,import在IE5以上支持,是css2.1新增的
(3)在样式表文件可以使用import导入其它的样式表文件,而link不可以
(4)link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
(5)link支持使用Javascript控制DOM去改变样式;而@import不支持
九. ::before 和:before有什么区别?
1.相同点:
(1)都可以用来表示伪类对象,用来设置对象前的内容
(2):befor和::before写法是等效的
2.不同点:
(1):befor是Css2的写法,::before是Css3的写法
(2):before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好
3.补充:
(1)伪类对象要配合content属性一起使用
(2)伪类对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
(3)伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }
十. css样式的优先级:
1.优先级顺序为:!important(ES6以及没有该属性)>style(权重为1000)>权重值
2.如果权重相同,则最后定义的样式的起作用,应该避免这种情况出现
3.权重规则:
标签的权重为1;
class的权重为10;
id的权重为100
十一.如何居中一个元素(正常、绝对定位、浮动元素):
(一)元素水平居中的方式
1)行级元素水平居中对齐(父元素设置 text-align:center)
2) 块级元素水平居中对齐(margin: 0 auto)
3)浮动元素水平居中:
1.宽度不固定的浮动元素
2.宽度固定的浮动元素:
position:relative|absolute; left:50%;
4)让绝对定位的元素水平居中对齐(重点):
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略,且为0*/
right: 0; /*此处不能省略,且为0*/
}
(二)元素垂直居中对齐
1)对行级元素垂直居中(heiht与line-height的值一样)
如: height:300px; line-height:300px;
2)对块级元素垂直居中对齐:
2.1 父元素高度固定的情况
a.父元素的height与line-height值相同
b.需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
2.2 父元素高度不固定的情况:
父元素的padding-top和padding-bottom一样
十二. display有哪些作用:
(1)元素默认的display值的情况如下:
block(块级元素) <div>、<p> <ul> <ol> <form>
inline(内联元素) <span> <a> <img> <input> <select> <label>
list-item(项目列表) <li>
none(不显示) <head>(头部元素都是) <title> <br> <thead> <tbody> <tfoot>
(2)常见的属性值:
none:元素隐藏
block:块级元素
inline-block:内联块级元素
list-item:列表项目
表格系列方面的显示
table
table-row
(3)补充:
1.行级元素浮动之后,display为block
2.flex(弹性盒子)
不过要结合相关的属性一起,flex-flow和flex。在响应式开发中flex非常有用。
行式布局 flex-flow: row;
十三.一个满屏 品 字布局 如何设计:
需要用到的技术:
1.元素水平居中对齐
1)使用margin对齐(推荐)
2)使用left:50%
3)使用text-align
2. 元素对相对窗口定位
1)使用filxed(推荐)
2)使用absolute定位
3)使用html和body的width和height填这个窗口
3.元素左右定位
1)使用float左右浮动
2)使用绝对定位进行左右定位(推荐)
十四.用纯CSS创建一个三角形的原理:
1.采用的是均分原理:盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部分
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
代码 :
.square{
width:0;
height:0;
margin:0 auto;
border:6px solid transparent;
border-top: 6px solid red;
}
十五.如何清除元素浮动:
1.使用clear:both清除浮动
示例1:使用div
示例2:使用<br clear="all">
示例3:伪类对象::after+zoom:1(推荐使用)
2.使用overflow属性:overflow:auto;、overflow:hidden;都可以
3.使用display属性: 父元素不能水平居中,在父元素使用text-align:center解决
4.父级元素浮动: 父元素不能水平居中,可以使用定位解决
十六.CSS3新特性:
(1)1.CSS3的选择器:
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E
(2)@Font-face 特性:
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体
(3)圆角:
border-radius: 15px;
(4)多列布局 (multi-column layout):
兼容性不好,还不够成熟。还不能用在实际项目中
(5)阴影(Shadow):
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
(6)CSS3 的渐变效果:
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
(7)css弹性盒子模型:
(8)CSS3制作特效:
Transition
Animation动画特效
十七.重绘和回流:
render 树在创建完成时,并不包含位置和大小信息。计算这些值的过程称为布局或重排
(1)回流(Reflow):render 树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。
回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。
(2)重绘:render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响 render 树重新布局的,比如修改字体颜色
(3)什么情况下会产生回流呢
1. 改变 DOM 树结构,比如添加或者删除可见的元素、改变文本内容、改变位置
2. 改变元素几何尺寸:边距、填充、边框、宽度和高度
3. 改变浏览器窗口尺寸
4. 伪类激活,在用户交互过程中发生
(4)应该尽量减少回流和重绘,那么怎样优化浏览器渲染过程?
其实优化就是减少对render tree的操作,并减少对一些style信息的请求,尽量利用好浏览器的优化策略
1. 不要1个1个改变元素的样式属性,最好直接改变className,但className是预先定义好的样式,不是动态的,如果你要动态改变一些样式,则使用cssText来改变
2. 让操作元素离线处理
即使用documentFragment或div等元素进行缓存操作,先把所有要添加到元素添加到1个div,最后才把这个div append到body中
先display:none 隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。
3. 将引起回流的属性赋值给变量,进行缓存,需要用到的时候直接使用变量就行
4. 减少操作影响的节点,影响的节点越多,则越消耗性能。