知识点积累,有转载。
- CSS Sprite(CSS 精灵)是什么,有什么优缺点?
CSS Sprites:是一种网页图片应用处理方式。将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是加速的关键,不是降低质量,而是减少个数。
- 优点
- 减少HTTP请求数,极大地提高页面加载速度
- 增加图片信息重复度,提高压缩比,减少图片大小
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现
- 缺点
- 图片合并麻烦
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式
- display: none;与visibility: hidden;的区别
它们都能让元素不可见
区别:
display: none; | visibility: hidden; |
---|---|
会让元素完全从渲染树中消失,渲染的时候不占据任何空间; | 不会让元素从渲染树消失,渲染时元素继续占据空间,只是内容不可见 |
是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示 | 是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式 |
修改常规流中元素的display通常会造成文档重排 | 修改visibility属性只会造成本元素的重绘 |
读屏器不会读取display: none;元素内容 | 读屏器 会读取visibility: hidden;元素内容 |
- 什么是FOUC?如何避免?
Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成的页面闪烁。
- @import过多嵌套导致串行下载,造成FOUC(文档样式短暂失效)。
- 解决方法:把样式表放到文档的< head>
- BFC?如何创建BFC(block formatting context,块级格式化上下文),BFC有什么用?
BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
-
怎么触发BFC?
- 浮动元素:float 除 none 以外的值。
- 绝对定位元素:position (absolute、fixed)。
- display 为 inline-block、table-cells、flex。
- overflow 除了 visible 以外的值 (hidden、auto、scroll)。
-
BFC布局与普通文档流布局区别:
- 普通文档流布局规则:
- 浮动的元素是不会被父级计算高度
- 非浮动元素会覆盖浮动元素的位置
- margin会传递给父级元素
- 两个相邻元素上下的margin会重叠
- BFC布局规则:
- 浮动的元素会被父级计算高度(父级元素触发了BFC)
- 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
- margin不会传递给父级(父级触发BFC)
- 属于同一个BFC的两个相邻元素上下margin会重叠
- 普通文档流布局规则:
-
遇到哪些问题需要用到BFC?
-
1 阻止margin重叠
重叠时:
<style type="text/css"> .demo1 { width: 200px; height: 200px; background-color: red; margin-bottom: 20px; } .demo2 { width: 200px; height: 200px; background-color: black; margin-top: 30px; } </style> <div class="demo1"></div> <div class="demo2"></div>
浏览器解析的时候会使外边距叠加在一起。
BFC解决重叠后:
<style type="text/css">
.demo1 {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.box {
position :absolute;
/* overflow: hidden; 这块用这两个都可以*/
}
.demo2 {
width: 200px;
height: 200px;
background-color: black;
margin-top: 30px;
}
</style>
<div class="demo1"></div>
<div class="box">
<div class="demo2"></div>
</div>
- 2 解决高度塌陷
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-color: black;
}
.demo {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
</style>
<div class="box">
<div class="demo"></div>
</div>
红色div左右外边距并没有重叠,但是上外边距和父级重叠在了一起。
BFC解决后:
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-color: black;
overflow: hidden;
}
.demo {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
</style>
<div class="box">
<div class="demo"></div>
</div>
- 3 自适应两栏布局
- 4 可以阻止元素被浮动元素覆盖
- display、float、position的关系
原文出处:http://www.cnblogs.com/jackyWHJ/p/3756087.html & https://www.cnblogs.com/adventureofraindrop/p/6215411.html
- display:规定元素生成框的类型。较为常见的有:
- none-缺省值(用于隐藏元素,元素会消失于视界和文档流中)
- block-块级元素
- inline-block-行内块级元素
- list-item列表样式块级元素
- …
- float:定义一个元素浮动方向,最初用于图像使文本环绕,现在是一种布局方式。不论浮动元素本身是何种框类型,浮动后会生成一个块级框。
- position:规定元素的定位类型,常用于布局。
- static-默认值,没有定位,元素出现在正常文档流中(此时不受top、left、right、bottom、z-index等属性影响)
- absolute-绝对定位,脱离文档流,相对于 static 定位以外的第一个父元素进行定位
- fixed-固定定位,相对于浏览器窗口进行定位
- relative生成相对定位的元素,相对于其正常位置进行定位
- inherit 规定从父元素继承 position 属性的值
三者关系图:
display转换对应表:
设定值 | 转换后 |
---|---|
inline-table | table |
inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption | block |
其他 | 保持设定值 |
下面分情况讨论:
- 1.display值为none
当元素display值为none时,元素不产生框,float和position都不起作用。 - 2.position是absolute或fixed
当元素display值不为none,而position是absolute或者fixed时,此时float不起作用,计算值也为none(原文中有计算方法,这里略去),display值会按上表设置。元素框的位置由top、left、right、bottom值和其父元素决定。 - 3.float值不为none
当元素有了浮动属性(float不为none,是left或right)后,该框浮动且display值会按上表转换。例如,span是行内元素,设置浮动后会变为块级元素。 - 4.元素为根元素
如果元素是根元素,设置的display也会按上表进行转换。否则,元素的display值为指定值或默认值。
-
display:inline-block 什么时候不会显示间隙?
- 移除空格
- 使用margin负值
- 使用font-size:0
- letter-spacing
- word-spacing
-
清除浮动
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
浮动元素引起的问题:- 父元素的高度无法被撑开,影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
清除之前:
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px; width: 98% } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
清除之后效果图:
-
父级div定义 height
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; /*解决代码*/ height: 200px; } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用 -
结尾处加空div标签 clear:both
<style type="text/css"> .div1 { background: #000080; border: 1px solid red } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } /*清除浮动代码*/ .clearfloat { clear: both } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2"> div2 </div>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 -
父级div定义 伪类:after 和 zoom
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } /*清除浮动代码*/ .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clearfloat { zoom: 1 } </style> <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。
-
利用overflow清除浮动
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; /*解决代码*/ width: 98%; overflow: hidden; } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px; width: 98% } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
-
为什么要初始化CSS样式?
- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化
- css3新特性
- 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
- 弹性盒模型 display: flex;
- 多列布局 column-count: 5;
- 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
- 颜色透明度 color: rgba(255, 0, 0, 0.75);
- 圆角 border-radius: 5px;
- 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
- 文字溢出 text-overflow:ellipsis;
- 背景效果 background-size: 100px 100px;
- 边框效果 border-image:url(bt_blue.png) 0 10;
- 转换 transform
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);
- CSS3新增伪类
- p:first-of-type 选择属于其父元素的首个< p>元素的每个< p> 元素
- p:last-of-type 选择属于其父元素的最后 < p> 元素的每个< p> 元素
- p:only-of-type 选择属于其父元素唯一的 < p>元素的每个 < p> 元素
- p:only-child 选择属于其父元素的唯一子元素的每个 < p> 元素
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个 < p> 元素
- :after 在元素之前添加内容,也可以用来做清除浮动
- :before 在元素之后添加内容
- :enabled 已启用的表单元素
- :disabled 已禁用的表单元素
- :checked 单选框或复选框被选中
- a标签上四个伪类的执行顺序是怎么样的?
link > visited > hover > active
L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆
- display有哪些值?说明他们的作用
- block 转换成块状元素。
- inline 转换成行内元素。
- none 设置元素不可见。(完全从渲染树中消失,渲染的时候不占据任何空间)
- inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。
- list-item 像块类型元素一样显示,并添加样式列表标记。
- table 此元素会作为块级表格来显示
- inherit 规定应该从父元素继承 display 属性的值
- CSS盒子模型
- W3C标准盒子模型:margin + border + padding + width(content)
- IE怪异盒子模型:margin + width(border + padding + content)
- PNG\GIF\JPG的区别及如何选
GIF | JPEG | PNG |
---|---|---|
8位像素,256色 | 颜色限于256 | 有PNG8和truecolor PNG。PNG8类似GIF颜色上限为256 |
无损压缩 | 有损压缩 | |
支持简单动画 | 无动画 | |
支持boolean透明 | 可控制压缩质量,不支持透明 | 文件小,支持alpha透明度 |
适合简单动画 | 适合照片 | 适合图标、背景、按钮 |
-
行内元素float:left后是否变为块级元素?
行内元素设置成浮动之后变得更加像是inline-block(行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%),这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的。 -
为什么在网页中的应该使用偶数的字体
偶数字号相对更容易和 web 设计的其他部分构成比例关系 -
::before 和 :after中双冒号和单冒号 有什么区别?
- 在 CSS 中伪类一直用 : 表示,如 :hover, :active 等
- 伪元素在CSS1中已存在,当时语法是用 : 表示,如 :before 和 :after
- 后来在CSS3中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类
- 由于低版本IE对双冒号不兼容,开发者为了兼容性各浏览器,继续使使用 :after 这种老语法表示伪元素
- 综上所述:::before 是 CSS3 中写伪元素的新语法; :after 是 CSS1 中存在的、兼容IE的老语法。:before 与 ::before 是等效的。:after 与 ::after 是等效的。
- 伪类和伪元素?
-
: 伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素,这个状态是根据用户行为而动态变化的,伪类表状态。
例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。a:hover {color: #FF00FF} p:first-child {color: red}
-
:: 伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。
例如,我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。p::before {content:"第一章:";} p::after {content:"Hot!";} p::first-line {background:red;} p::first-letter {font-size:30px;}
伪类和伪元素的根本区别在于:它们是否创造了新的元素。
- 知道css有个content属性吗?有什么作用?有什么应用?
css的content属性专门应用在 before/after伪元素上,用于来插入生成内容。最常见的应用是利用伪类清除浮动。
/**一种常见利用伪类清除浮动的代码**/
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
- 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms - CSS合并方法
避免使用@import引入多个css文件,可以使用CSS工具将CSS合并为一个CSS文件,例如使用Sass\Compass等。 - CSS不同选择器的权重(CSS层叠的规则)
-
!important规则最重要,大于其它规则
-
行内样式规则,加1000
-
对于选择器中给定的各个id属性值,加100
-
对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加10
-
对于选择其中给定的各个元素标签选择器(div / p 等),加1
-
如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则
/*权重为1*/ div{ } /*权重为10*/ .class1{ } /*权重为100*/ #id1{ } /*权重为100+1=101*/ #id1 div{ } /*权重为10+1=11*/ .class1 div{ } /*权重为10+10+1=21*/ .class1 .class2 div{ }
-
列出你所知道可以改变页面布局的属性
position、display、float、width、height、margin、padding、top、left、right -
CSS 动画
- transition
transition属性是一个简写属性,用于设置四个过渡属性:- transition-property:规定设置过渡效果的 CSS 属性的名称。
- transition-duration:规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function: 规定速度效果的速度曲线。
- transition-delay:定义过渡效果何时开始。
- transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。- rotate:定义 2D 旋转,在参数中规定角度。
- scale:定义 2D 缩放转换。
- skew:定义沿着 X 和 Y 轴的 2D 倾斜转换。
- translate:定义 2D 转换。
- animation
animation 属性是一个简写属性,用于设置六个动画属性:- animation-name:规定需要绑定到选择器的 keyframe 名称。
- animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
- animation-timing-function:规定动画的速度曲线。
- animation-delay:规定在动画开始之前的延迟。
- animation-iteration-count:规定动画应该播放的次数。
- animation-direction:规定是否应该轮流反向播放动画。
- base64的原理及优缺点
-
适用于小图片
-
base64编码的字符串,更适合不同平台、不同语言的传输;
优点:
- 可以加密,减少了HTTTP请求
- base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;
- 网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。
缺点:
- 需要消耗CPU进行编解码
- 存储在数据库中增大了数据库服务器的压力
- base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css
- CSS常见的集中布局
圣杯布局 / 双飞翼布局 等
- CSS与预处理器(以及less、sass、stylus的区别),为什么使用预处理器?
- CSS拥有对网页对象和模型样式编辑能力。
- CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
- SASS
现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。 - LESS
LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码。类似CSS的书写功能。 - Stylus
主要用来给Node项目进行CSS预处理支持。在广泛的意义上人气还完全不如Sass和LESS。提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
- SASS
- Sass、LESS和Stylus源文件(除了LESS源文件在客户端下运行之外)都不能直接被浏览器直接识别,这样一来,要正常的使用这些源文件,就需要将其源文件转译成浏览器可以识别的CSS样式文件
- 混合(Mixins)
Mixins是CSS预处理器中语言中最强大的特性,简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。平时你在写样式时肯定有碰到过,某段CSS样式经常要用到多个元素中,这样你就需要重复的写多次。在CSS预处理器语言中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性,Mixins被当作一个公认的选择器,还可以在Mixins中定义变量或者默认参数。
为什么使用预处理器?
- 结构清晰,便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。
- 可以轻松实现多重继承。
- 完全兼容 CSS 代码。
- postcss的作用
可以直观的理解为:它就是一个平台。如果让一些插件在它上面跑,那么将会很强大:
- PostCSS 提供了一个解析器,它能够将 CSS 解析成抽象语法树
- 通过在 PostCSS 这个平台上,我们能够开发一些插件,来处理我们的CSS,比如热门的:autoprefixer
- postcss可以对sass处理过后的css再处理,最常见的就是autoprefixer(autoprefixer是一款自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里,使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss,使用Browserslist库,可以对浏览器的版本做精确设置)
- rgba()和opacity的透明效果有什么不同?
rgba()和opacity都能实现透明效果。不同在于:
- opacity:作用于元素,以及元素内的所有内容的透明度,
- rgba():只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
- css中可以让文字在垂直和水平方向上重叠的两个属性是什么
- line-height :设置大小比字体大小 小 ,即可实现垂直方向上重叠
- letter-spacing : 设置成负值,即可实现水平方向上重叠
- 垂直居中一个浮动元素
/**方法一:已知元素的高宽**/
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
/**方法二:**/
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
// 垂直居中一个<img>
#container /**<img>的容器设置如下**/
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
- px和em的区别
px和em都是长度单位。区别是:
- px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小
- 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
- px 相对于显示器屏幕分辨率,无法用浏览器字体放大功能
- em 值并不是固定的,会继承父级的字体大小: em = 像素值 / 父级font-size
- 重绘和回流(重排)是什么,如何避免?
- 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘
- 回流(重排):当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生回流。JS获取Layout属性值(如:offsetLeft、scrollTop、getComputedStyle等)也会引起回流。因为浏览器需要通过回流计算最新值
- 回流(重排)必将引起重绘,而重绘不一定会引起回流(重排)
- 如何最小化重绘(repaint)和回流(reflow):
- 需要要对元素进行复杂的操作时,可以先隐藏(display:“none”),操作完成后再显示
- 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document
- 缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流
- 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
- 避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)
- 尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color
- 批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx
- 实现左边宽度固定,右边自适应
-
html
<div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div>
-
左侧div设置成浮动:float: left,右侧div宽度会自拉升适应
.outer { width: 100%; height: 500px; background-color: yellow; } .left { width: 200px; height: 200px; background-color: red; float: left; } .right { height: 200px; background-color: blue; }
-
对右侧:div进行绝对定位,然后再设置right=0,即可以实现宽度自适应
绝对定位元素的第一个高级特性就是其具有自动伸缩的功能,当我们将 width设置为 auto 的时候(或者不设置,默认为 auto ),绝对定位元素会根据其 left 和 right 自动伸缩其大小
.outer { width: 100%; height: 500px; background-color: yellow; position: relative; } .left { width: 200px; height: 200px; background-color: red; } .right { height: 200px; background-color: blue; position: absolute; left: 200px; top:0; right: 0; }
-
将左侧div进行绝对定位,然后右侧div设置margin-left: 200px
.outer { width: 100%; height: 500px; background-color: yellow; position: relative; } .left { width: 200px; height: 200px; background-color: red; position: absolute; } .right { height: 200px; background-color: blue; margin-left: 200px; }
-
使用flex布局
.outer { width: 100%; height: 500px; background-color: yellow; display: flex; flex-direction: row; } .left { width: 200px; height: 200px; background-color: red; } .right { height: 200px; background-color: blue; flex: 1; }
- 实现已知或者未知宽度的垂直水平居中
-
transform: translate(-50%, -50%);
元素会以自身的左上角为原点,往上往左分别移动自身长宽的50%,以使其居于中心位置。与负的margin-left和margin-top实现居中不同,margin-left和margin-top必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中/** 1 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } } /** 2 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } /** 3 **/ .wraper { .box { display: flex; justify-content:center; align-items: center; height: 100px; } } /** 4 **/ .wraper { display: table; .box { display: table-cell; vertical-align: middle; } }
- 如何实现小于12px的字体效果
设置font-size小于12px的时候,显示都为12px,怎么用CSS实现小于12px的字体呢?
-
移动端
.font{ // 10px / 12px = 0.83 transform: scale(0.83); }
-
PC端
避免不支持 CSS3 浏览器的情况,我们也可以通过降级处理,将字体变回12px;最后兼容 IE:*font-size:10px;.font{ font-size: 12px; transform: scale(0.83,0.83) ; *font-size: 10px; }
- CSS Hack?
针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS Hack。
CSS Hack大致有3种表现形式:
-
CSS属性前缀法
.hack{ /*demo1 */ /*demo1 注意顺序,否则IE6/7下可能无法正确显示,导致结果显示为白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ *+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */ background-color:orange; /* all - for Firefox/Chrome */ background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue\9\0; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */
-
选择器前缀法
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10
-
IE条件注释法
IE浏览器专有的Hack方式。只在IE下生效 <!--[if IE]> 这段文字只在IE浏览器显示 <![endif]--> 只在IE6下生效 <!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]--> 只在IE6以上版本生效 <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]--> 只在IE8上不生效 <!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]--> 非IE浏览器生效 <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
36.CSS选择符有哪些? CSS哪些属性可以继承?哪些属性不可以继承
- 选择器
- id选择器( # myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器( * )
- 属性选择器(a[rel = “external”])
- 伪类选择器(a:hover, li:nth-child)
- 可继承的样式:
- font
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
- font-size
- font-family
- line-height
- color
- visibility
- cursor
- font
- 不可继承的样式:
- border
- padding
- margin
- width
- height
-
collapsing margins(外边距折叠)
毗邻的两个或多个 margin 会合并成一个margin,叫做外边距折叠。规则如下:- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠
- 元素自身的margin-bottom和margin-top相邻时也会折
-
如何居中div?
给div设置一个宽度,然后添加margin:0 auto属性div{ width:200px; margin:0 auto; }
-
如何居中一个浮动元素?
.div { width:500px ; height:300px; //高度可以不设 margin: -150px 0 0 -250px; position:relative; //相对定位 background-color:pink; //方便看效果 left:50%; top:50%; }
-
如何让绝对定位的div居中?
.div{ position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0; }
39.用纯CSS创建一个三角形
把上、左、右三条边隐藏掉(颜色设为 transparent)
.demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
- 一个满屏 品 字布局 如何设计
- 1
.top{
width: 50%;
height: 100px;
margin: auto;
background-color:rgb(226, 171, 171);
}
.bottom-left{
width: 50%;
height: 100px;
float: left;
background-color: rgb(239, 245, 153);
}
.bottom-right{
width: 50%;
height: 100px;
float: left;
background-color: rgb(179, 235, 230);
}
<div class="top"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
- 2
<style type="text/css">
.top {
width: 50%;
height: 100px;
margin: auto;
background-color: rgb(226, 171, 171);
}
.bottom {
height: 100px;
position: relative;
}
.bottom-left {
width: 50%;
height: 100px;
position: absolute;
left: 0;
background-color: rgb(239, 245, 153);
}
.bottom-right {
width: 50%;
height: 100px;
position: absolute;
right: 0;
background-color: rgb(179, 235, 230);
}
<div class="top"></div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
-
li与li之间看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了 -
列举几种隐藏元素的方法
- visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。
- opacity: 0; CSS3属性,设置0可以使一个元素完全透明。
- position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外。
- display: none; 元素会变得不可见,并且不会再占用文档的空间。
- transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留。
- height: 0; 将元素高度设为 0 ,并消除边框。
-
HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态。
- filter: blue(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
- CSS3 的 Flexbox(弹性盒布局模型)以及适用场景
- 经常遇到的浏览器的JS兼容性有哪些?解决方法是什么
JS兼容性 | 第一种 | 第二种 |
---|---|---|
当前样式 | getComputedStyle(el, null) | el.currentStyle |
事件对象 | e | window.event |
鼠标坐标 | e.pageX, e.pageY | window.event.x, window.event.y |
按键码 | e.which | event.keyCode |
文本节点 | el.textContent | el.innerText |
-
浏览器是怎样解析CSS选择器的
浏览器解析 CSS 选择器的方式是从右到左。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。 -
元素竖向的百分比设定是相对于容器的高度还是宽度?
元素竖向的百分比设定是相对于容器的宽度,而不是高度。- 对于竖直方向的margin和padding,参照父元素的宽度。
- 对于水平方向的margin和padding,也是参照父元素的宽度。
-
全屏滚动的原理是什么? 用到了CSS的哪些属性
- 原理类似图片轮播原理,超出隐藏部分,滚动时显示
- 可能用到的CSS属性:overflow:hidden; transform:translate(100%, 100%); display:none;
- 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE
- 响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本
- 基本原理是利用CSS3媒体查询,为不同尺寸的设备适配不同样式
- 对于低版本的IE,可采用JS获取屏幕宽度,然后通过resize方法来实现兼容
- 什么是视差滚动效果,如何给每页做不同的动画?
- 视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,具有非常出色的视觉体验。
- 一般把网页解剖为:背景层、内容层和悬浮层。当滚动鼠标滚轮时,各图层以不同速度移动,形成视差的。
- 实现原理
- 以 “页面滚动条” 作为 “视差动画进度条”
- 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
- 监听 mousewheel 事件,事件被触发即播放动画,实现“翻页”效果
- 网站图片文件,如何点击下载?而非点击预览?
<a href="logo.jpg" download>下载</a>
<a href="logo.jpg" download="网站LOGO" >下载</a>
- 你对 line-height 是如何理解的
- line-height 指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线距离
- 如果一个标签没有定义 height 属性,那么其最终表现的高度是由 line-height 决定的
- 一个容器没有设置高度,那么撑开容器高度的是 line-height 而不是容器内的文字内容
- 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
- line-height 和 height 都能撑开一个高度,height 会触发 haslayout,而 line-height 不会
- line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)
- 带单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身的行高
- 纯数字:会把比例传递给后代。例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px
- 百分比:将计算后的值传递给后代
-
设置元素浮动后,该元素的 display 值会如何变化?
设置元素浮动后,该元素的 display 值自动变成 block -
让页面里的字体变清晰,变细用CSS怎么做?(IOS手机浏览器字体齿轮设置)
-webkit-font-smoothing: antialiased;
-
font-style 属性 oblique 是什么意思
font-style: oblique; 使没有 italic 属性的文字实现倾斜 -
display:inline-block 什么时候会显示间隙
- 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
- 非 inline-block 水平元素设置为 inline-block 也会有水平间距
- 可以借助 vertical-align:top; 消除垂直间隙
- 可以在父级加 font-size:0; 在子元素里设置需要的字体大小,消除垂直间隙
- 把 li 标签写到同一行可以消除垂直间隙,但代码可读性差
- 一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
- 方案1:
.sub { height: calc(100%-100px); } - 方案2:
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; } - 方案3:
.container { display:flex; flex-direction:column; }
.sub { flex:1; }
- px / em / rem
- px
固定的像素。一旦设置了就无法因为适应页面大小而改变。 - em
相对于父元素来设置字体大小的。一般都是以< body>的font-size为基准(em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便。) - rem
相对于根元素< html>来设置字体大小的。任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合1rem = 16px