目录
三、布局:正常流、浮动float、定位position、显示display
1、position:relative 、 fixed 、 absolute 和 static 四种定位有什么区别?
2、请阐述 z-index 属性,并说明如何形成层叠上下文(stacking context)
2、CSS 隐藏元素的几种方法(显示display和可见性visibility区别)
6、有什么不同的方式可以隐藏内容(使其仅适用于屏幕阅读器)?
1、CSS 选择器有哪些?哪些属性可以继承?优先级算法如何计算?
1、transform translate transition 的区别
4、什么是 Css Hack?ie6, 7, 8 的 hack 分别是什么?
7、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
9、display:inline-block 什么时候不会显示间隙?
一、CSS3 有哪些新特性
1. 选择器
- E:last-child 匹配父元素的最后一个子元素 E。
- E:nth-child(n)匹配父元素的第 n 个子元素 E。
- E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
2. 过渡
CSS:
div {
width:100px;
height:100px;
background:blue;
transition: width 2s;//css属性 花费时间
}
div:hover{
width:300px;
}
html:
<div></div>
3. 形状转换
rotate()旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜
变换基点
3d 转换
4. 动画 animation属性
div{
width:100px;
height:100px;
background: red;
animation: abc 2s linear;/*执行一次abc动画,运动时间2秒,运动曲线为 linear*/
}
@keyframes abc {
from {
transform: rotate(0);
}
50% {
transform: rotate(90deg);
}
to {
transform: rotate(360deg);
}
}
5.边框
边框圆角
border-radius: 15px;
边框图片,border-image 属性
6. 盒阴影
/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */
7. 文字
文字阴影
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
文字换行
p.test {
word-wrap: break-word;//word-wrap 属性允许长单词或 URL 地址换行到下一行。
}
字体样式
@font-face 属性可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src: url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src: url(RUNICMT0.eot);
}
.border {
font-size: 35px;
color: black;
font-family: "BorderWeb";
}
.event {
font-size: 110px;
color: black;
font-family: "Runic";
}
/* 淘宝网字体使用 */
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}
8. 颜色
rgba
9. 盒模型box-sizing属性
box-sizing:border-box
box-sizing:content-box
10. 渐变效果
background-image: -webkit-gradient(linear,
0% 0%,
100% 0%,
from(#2a8bbe),
to(#fe280e));
11.媒体查询
@media 查询,监听屏幕尺寸的变化,在不同尺寸的时候显示不同的样式
12.布局
flex弹性布局、grid网格布局
/* 多栏布局 */
<div class="mul-col">
<div>
<h3>新手上路</h3>
<p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
</div>
<div>
<h3>付款方式</h3>
<p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
</div>
<div>
<h3>淘宝特色</h3>
<p>手机淘宝 旺信 大众评审 B格指南</p>
</div>
</div>
.mul-col {
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
}
参考: CSS3新特性
二、CSS的盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距 / 边界(margin)、边框(border)、内边距 / 填充(padding)、实际内容(content)四个属性。
标准盒模型(W3C盒子模型,box-sizing:content-box,默认 )
怪异盒模型(IE 盒子模型,box-sizing:border-box)
三、布局:正常流、浮动float、定位position、显示display
a、浮动float和清理clear
1、请阐述 float 定位的工作原理
浮动(float)是 CSS 定位属性。浮动元素从网页的正常流动中移出,但是保持了部分的流动性,会影响其他元素的定位(比如文字会围绕着浮动元素)。这一点与绝对定位不同,绝对定位的元素完全脱离文档流。浮动框向左或向右移动,直到它的外边缘碰到包含框或者另一个浮动框。浮动元素之前的元素将不会受到影响,浮动元素之后的元素将围绕它。
子元素因为浮动的关系,脱离了标准流,但是父盒子没有设置高度,认为没有任何内容,所以高度就不会被内容撑开,相当于父级的高度是0px,造成了页面的排布紊乱(也叫页面高度塌陷)。
2、CSS清除浮动的几种方法?
(1)使用额外标签(不推荐)
在浮动的盒子下面再放一个标签,使用 clear:both;来清除浮动
缺点:添加许多无意义的标签,结构化较差。
(2)使用overflow清除浮动(不推荐)
先找到浮动盒子的父元素,给父元素添加一个属性:overflow:auto;或overflow:hidden;就会清除子元素对页面的影响。把父元素属性设置为 overflow:auto; 或 overflow:hidden;,会使其内部的子元素形成块格式化上下文(Block Formatting Context),并且父元素会扩张自己,使其能够包围它的子元素。
缺点:内容增多时容易导致内容被隐藏掉,无法显示需要溢出的元素。
(3)使用伪元素清除浮动
//在页面的 clearfix 元素后面添加了一个空的块级元素,这个元素清除了浮动
.clearfix:after {
content:"";
//height:0;
clear:both;
display:block;
//visibility:hidden; /_将元素隐藏起来_/
}
.clearfix {
zoom:1;/_为了兼容 IE低版本_/
}
3、BFC
BFC(Block Formatting Context)块级格式化上下文,是一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素。
形成 BFC 的条件:
- 浮动元素,float 除 none 以外的值
- 定位元素,position(absolute,fixed)
- overflow 除 visible 以外的值(hidden,auto,scroll)
- display 为以下其中之一的值 inline-block,flex,table-cell,table-caption
BFC 的特性:
- 内部元素在垂直方向上一个接一个的放置。
- 垂直方向上的距离由 margin 决定,属于同一个BFC的两个相邻元素的margin会发生叠加
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
- bfc 的区域不会与 float 的元素区域重叠
- 计算 bfc 的高度时,浮动元素也参与计算
- bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
参考:BFC 神奇背后的原理
4、margin塌陷和margin负值
在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),margin直接接触,产生了合并,表现为较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin塌陷现象。
同级元素塌陷:上面的元素有下边距,下面的元素有上边距,两个边距相遇(外边距重叠 margin-collapse),真正盒子间距离是较大的那个值。这种合并外边距的方式被称为折叠,所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则:
(1)两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
(2) 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
(3) 两个外边距一正一负时,折叠结果是两者的相加的和。
解决方法:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分。
父子元素塌陷:父元素和子元素都设置了同方向的margin-top值,两个属性之间没有其他内容进行隔离,导致两个属性相遇,发生margin塌陷。
解决办法:让两个边距不要相遇,中间可以使用父元素border或padding将边距分隔开;父子盒模型之间的距离就不要用子元素的margin去设置,而是用父元素的padding挤出来;给父元素添加overflow:hidden;或position:absolute;或position:fixed或display:inline-block触发BFC
参考:css中常见margin塌陷问题之解决办法、margin塌陷及其解决
margin负值:margin-top和margin-left负值,元素向上、向左移动
margin-right负值,右侧元素左移,自身不受影响
margin-bottom负值,下方元素上移,自身不受影响
参考:浅谈margin负值
5、伪元素和伪类的区别?CSS3 新增伪类有那些?
伪类的效果可以通过添加实际的类来实现;伪元素的效果可以通过添加实际的元素来实现。所以它们的本质区别就是是否抽象创造了新元素;
伪类存在DOM文档中,逻辑上存在但在文档树中却无须标识。只能使用“:”,常见的有::hover,:link,:active,:target,:not(),:focus等。
伪元素不存在DOM文档中,是创建新的虚拟元素,代表某个元素的子元素,这个子元素虽然在逻辑上存在但却并不实际存在于文档树中。既可以使用“:”,也可以使用“::” ,因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾,常见的有:::before,::after,::first-line,::first-letter,::selection、::placeholder 等;
新增伪类:
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元素。
:enabled:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
b、定位position
1、position:relative
、 fixed
、 absolute
和 static
四种定位有什么区别?
- absolute 绝对定位,相对于最近的非 static父级元素的偏移,如果没有父级或者父级没有进行定位,则继续往上一级寻找直至。脱离文档流(不再占有原先位置)。
- relative 相对定位,相对于自己原来的位置进行上下左右的偏移,不脱离文档流(继续保留原来位置)。最典型的应用给绝对定位当爹。
- fixed 固定定位,通常相对于浏览器窗口或 frame 进行定位。
- static 静态定位,默认值。没有定位,元素出现在正常的流中。
- sticky 粘性定位,类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。(吸顶效果)
参考:浅谈static、relative、absolute、fixed四种定位的区别
2、请阐述 z-index
属性,并说明如何形成层叠上下文(stacking context)
CSS 中的 z-index 属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 z-index
只能影响 position
值不是 static
的元素。
没有定义 z-index
的值时,元素按照它们出现在 DOM 中的顺序堆叠(层级越低,出现位置越靠上)。非静态定位的元素(及其子元素)将始终覆盖静态定位(static)的元素,而不管 HTML 层次结构如何。
层叠上下文是包含一组图层的元素。 在一组层叠上下文中,其子元素的 z-index
值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上,则即使元素 A 的子元素 C 具有比元素 B 更高的 z-index
值,元素 C 也永远不会在元素 B 之上.
每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文,例如 opacity
小于 1, filter
不是 none
, transform
不是 none
。
3、translate 和 position的区别
相同点:两者都是相对于本身移动位置
区别: 1、当元素原来已经有position:absolute的时候,这时候你想相对于本身移动,可以使用translate
2、做动画的时候translate更适合,不会引起页面的重排/回流(reflow)和重绘(repaint)
3、translate()是transform的一个值。关于transform类的,可以使用GPU加速,提高浏览器的性能
c、显示display
1、行内元素与块级元素区别?
块级元素(display:block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、行高(line-height)、内边距(padding)和外边距(margin)都可控制;
常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等
内联元素(display:inline)特性:
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变(也就是 padding 和 margin 的 left 和 right 是可以设置的),可以设置行高(line-height)。
常见的行内元素有:<a>,<strong>,<b>,<em>,<span>等
inline-block可设置高和内外边距,但不会自动换行
<input>,<select>,<img>,<button>,<textarea>
转化:
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
2、display 有哪些值?说明他们的作用
display: none | inline | block | inline-block | list-item | table | flex ...
d、效果
1、几种常见的 CSS 布局效果
单列布局
两列自适应布局
overflow:hidden触发BFC
HTML:
<div class="parent">
<div class="left"><p>111</p></div>
<div class="right">
<p>222</p>
<p>333</p>
</div>
</div>
CSS:
<style>
.left{
float:left;
width: 200px;
height: 300px;
background: blue;
margin-right: 30px;
}
.right{
height: 300px;
background: green;
overflow: hidden;/*BFC,打破文字环绕*/
}
</style>
Flex布局
HTML:
<div class="parent">
<div class="left"><p>111</p></div>
<div class="right"><p>222</p></div>
</div>
CSS:
.parent{
display: flex;
}
.left{
width: 200px;
background: blue;
}
.right{
flex:1;/*flex:1 1 auto;flex-grow,flex-shrink,flow-basis*/
background: red;
}
Grid布局:
HTML:
<div class="parent">
<div class="left"><p>111</p></div>
<div class="right"><p>222</p></div>
</div>
CSS:
.parent{
display: grid;
grid-template-columns: 200px auto; /*每列列宽*/
}
.left{
width: 200px;
height: 450px;
background: blue;
}
.right{
height: 450px;
background: red;
}
三列布局
(1)圣杯布局和双飞翼布局
目的:
三栏布局,中间一栏最先加载和渲染
两侧内容固定,中间内容随宽度自适应
一般用于PC端
技术总结:
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding(圣杯),一个用margin(双飞翼)
圣杯布局
HTML:
<div class="parent">
<div class="mid"><p>222</p></div> <!--中间列写在前面-->
<div class="left"><p>111</p></div>
<div class="right"><p>333</p></div>
</div>
CSS:
.parent{
padding-left:300px;
padding-right:200px;
}
.left{
float:left;
width: 300px;
height: 450px;
background: blue;
margin-left: -100%; /*父元素内容长度。对象向左移动一段距离,这段距离等于父容器宽度*/
position: relative;
left:-300px;
}
.mid{
float:left;
width:100%;
height: 450px;
background: green;
}
.right{
float:left;
width: 200px;
height: 450px;
background: red;
/*margin-right:-200px;相当于下面三句的效果*/
margin-left: -200px;
position:relative;
right:-200px;
}
双飞翼布局
HTML:
<div class="parent">
<div class="mid">
<div class="inner">222</div> <!--添加层级-->
</div> <!--中间列写在前面-->
<div class="left"><p>111</p></div>
<div class="right"><p>333</p></div>
</div>
CSS:
.left{
float:left;
width: 300px;
height:450px;
background: blue;
margin-left: -100%;
}
.mid{
float:left;
width:100%;
height:450px;
background: green;
}
.inner{
margin: 0 200px 0 300px; /*新增*/
}
.right{
float:left;
width: 200px;
height:450px;
background: red;
margin-left: -200px;
}
(2)float和绝对定位
float:
HTML:
<header><p>头部</p></header>
<div class="parent">
<div class="left"><p>111</p></div>
<div class="right"><p>333</p></div>
<div class="mid"><p>222</p></div> <!--最后渲染-->
</div>
<footer><p>底部</p></footer>
CSS:
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
header{
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
}
footer{
clear: both;
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
margin-top:-50px;
}
.parent{
min-height: 100%;
padding-bottom: 50px;
}
.mid{
width: 100%;
height:400px;
background-color: orange;
}
.left{
float:left;
width:120px;
height:400px;
background-color: pink;
}
.right{
float:right;
width:300px;
height: 400px;
background-color: royalblue;
}
绝对定位:
HTML:
<header><p>头部</p></header>
<div class="parent">
<div class="left"><p>111</p></div>
<div class="mid"><p>222</p></div>
<div class="right"><p>333</p></div>
</div>
<footer><p>底部</p></footer>
CSS:
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
header{
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
}
footer{
clear: both;
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
margin-top:-50px;
}
.parent{
min-height: 100%;
padding-bottom: 50px;
}
.mid{
width: 100%;
height:400px;
background-color: orange;
margin: 0 300px 0 120px;
}
.left{
position: absolute;
top:50px;
left:0;
width:120px;
height:400px;
background-color: pink;
}
.right{
position: absolute;
top:50px;
right:0;
width:300px;
height: 400px;
background-color: royalblue;
}
(3)flex和grid
flex:
HTML:
<header><p>头部</p></header>
<div class="parent">
<div class="left"><p>111</p></div>
<div class="mid"><p>222</p></div>
<div class="right"><p>333</p></div>
</div>
<footer><p>底部</p></footer>
CSS:
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
header{
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
}
footer{
clear: both;
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
margin-top:-50px;
}
.parent{
min-height: 100%;
padding-bottom: 50px;
display: flex;
}
.mid{
flex:1;
height:400px;
background-color: orange;
}
.left{
width:120px;
height:400px;
background-color: pink;
}
.right{
width:300px;
height: 400px;
background-color: royalblue;
}
grid:
HTML:
<header><p>头部</p></header>
<div class="parent">
<div class="left"><p>111</p></div>
<div class="mid"><p>222</p></div>
<div class="right"><p>333</p></div>
</div>
<footer><p>底部</p></footer>
CSS:
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
header{
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
}
footer{
clear: both;
width: 100%;
height:50px;
background-color: gray;
line-height: 50px;
text-align: center;
margin-top:-50px;
}
.parent{
min-height: 100%;
padding-bottom: 50px;
display: grid;
grid-template-columns: 120px auto 300px;
grid-template-rows: 400px;
}
.mid{
background-color: orange;
}
.left{
background-color: pink;
}
.right{
background-color: royalblue;
}
伪等高布局
粘连布局(底端固定)
参考:几种常见的CSS布局
2、CSS Flex 弹性布局和 Grid网格布局
Flex弹性布局主要用于一维布局,而 Grid网格布局则用于二维布局。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。flex 容器中存在两条轴, 水平的主轴和垂直的交叉轴。
在容器上可以设置 6 个属性:
flex-direction //主轴方向
flex-wrap //如果一条轴线排不下,如何换行
flex-flow //flex-direction属性和flex-wrap属性的简写形式
justify-content //项目在主轴上的对齐方式
align-items //项目在交叉轴上如何对齐
align-content //定义了多根轴线的对齐方式
在项目上可设置6个属性:
order //项目的排列顺序
flex-grow //项目的放大比例
flex-shrink //项目的缩小比例
flex-basis //项目占据的主轴空间
flex //flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
align-self //允许单个项目有与其他项目不一样的对齐方式
注意:当设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。
例:画三点的骰子
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.box{
width:200px;
height:200px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;/*主轴两端对齐*/
}
.item{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
</style>
Grid网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。水平区域称为行,垂直区域称为列。
容器属性:
grid-template-columns //每一列的列宽
grid-template-rows //每一行的行高
......
项目属性:......
像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用 CSS 网格可能还是比 CSS 表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像 CSS 定位的元素一样,真正的有重叠和层次。
3、CSS响应式(多终端适配)
响应式网站设计(Responsive Web design
)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta
声明的viewport
。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
device-width指的是设备的物理宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
px、em 和rem的区别
rem是一个长度单位
px 是固定像素,一旦设置了就无法因为适应页面大小而改变。em 和rem是相对长度单位。
em(font size of the element)相对于父元素的字体大小的单位,不常用。rem(font size of the root element)是指相对于HTML根元素的字体大小的单位(根元素font-size由js设置),常用于响应式布局。
rem缺点阶梯性,通过vh/vm改进
window.screen.height //屏幕高度
window.innerHeight //网页适口高度(浏览器中可以显示网页内容的高度,去除工具栏)
document.body.clientHeight //body高度(网页内容少,高度低)
vw、vh
1vw 网页适口宽度的1%。
1vh 网页适口高度的1%。
vmax 取两者最大值;vmin取两者最小值
参考:Rem布局的原理解析、Rem 布局、媒体查询、百分比、rem和vw/vh等布局对比解析、CSS中各种长度单位总结
附带:
1、用 css 分别实现某个元素上下居中和左右居中
水平居中
1、行内元素水平居中
父元素设置text-align:center
2、块级元素水平居中
margin:0 auto;
<div class="box"></div>
.box{
width:100px;
height:100px;
background-color: brown;
margin:0 auto;
}
flex布局(不定宽)
<div class="container">
<div class="box">块级元素:水平居中flex</div>
</div>
.container{
display: flex;
justify-content: center;
}
.box{
background-color: brown;
}
position:absolute + left50% + 负margin
<div class="container">
<div class="box">块级元素:水平居中position + 负margin;</div>
</div>
.container{
position: relative;
}
.box{
position: absolute;
width: 100px;
height:100px;
background-color: darkorange;
left:50%;
margin-left: -50px;/*宽度/2*/
}
position:absolute + left50% + transform(不定宽)
<div class="container">
<div class="box">块级元素:水平居中position + transform;</div>
</div>
.container{
position: relative;
}
.box{
position: absolute;
height: 100px;
background-color: darkgray;
left:50%;
transform: translate(-50%,0);/*移动自己盒子宽度的一半*/
}
position:absolute + left/right=0 +margin:auto;(不定宽)
<div class="container">
<div class="box">块级元素:水平居中position + margin:auto;</div>
</div>
.container{
position: relative;
}
.box{
position: absolute;
width: 100px;
height:100px;
background-color: darkorange;
left:0px;
right: 0px;
margin: 0 auto;
}
垂直居中
1、单行文本垂直居中
line-height值=height值
<div class="box">文本垂直居中</div>
.box{
width: 200px;
height:200px;
background-color: red;
line-height: 200px;
}
2、多行文本垂直居中
<div class="container">
<div class="box">多行文本垂直居中!!!!!!!!!!</div>
</div>
.container{
width: 100px;
height:200px;
background-color: red;
display: table;
}
.box{
display: table-cell;
vertical-align: middle;
}
3、块级元素垂直居中
flex
<div class="container">
<div class="box">垂直居中</div>
</div>
.container{
width: 100px;
height:200px;
background-color: darkgray;
display: flex;
align-items: center;
}
position:absolute + top50%+负margin
position:absolute + top50% + transform(不定高,即子元素尺寸未知,transform是CSS3的属性,如果需要保证浏览器兼容性,使用最后一种方式)
position:absolute + top/bottom=0 + margin:auto;(不定高)
水平垂直居中
绝对定位+margin:auto
<div class="container">
<div class="box"></div>
</div>
.container{
position: relative;
width: 600px;
height: 600px;
background-color: darkgray;
}
.box{
position: absolute;
width: 200px;
height: 200px;
background-color: darkgreen;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
绝对定位+负margin
<div class="container">
<div class="box"></div>
</div>
.container{
position: relative;
width: 600px;
height: 600px;
background-color: darkgray;
}
.box{
position: absolute;
width: 200px;
height: 200px;
background-color: darkgreen;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
绝对定位+transform
<div class="container">
<div class="box"></div>
</div>
.container{
position: relative;
width: 600px;
height: 600px;
background-color: darkgray;
}
.box{
position: absolute;
width: 200px;
height: 200px;
background-color: darkgreen;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
flex布局
<div class="container">
<div class="box"></div>
</div>
.container{
height:600px;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background-color: darkgreen;
}
2、CSS 隐藏元素的几种方法(显示display和可见性visibility区别)
opacity: 0; 占据页面空间,自身绑定的事件可以被触发;
visibility: hidden; 占据页面空间,自身绑定的事件不能被触发;
display: none; 不占据页面空间,自身绑定的事件不能被触发。这种方式产生的效果就像元素完全不存在;
3、rgba()和 opacity 的透明效果有什么不同?
opacity会继承父元素的opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。
opacity作用于元素和元素的内容,RGBA一般作为背景色background-color 或者颜色color 的属性值,透明度由其中的alpha 值生效。
4、设备像素比?
物理像素(也叫设备像素),设备屏幕上的像素点个数,也就是我们经常看到的手机分辨率所描述的数字;
设备独立像素dips(逻辑像素),就是我们手机的实际的视窗口的大小。具体来说可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
devicePixelRatio(dpr)=物理像素/设备独立像素,代表一个屏幕是否是高清屏幕
5、rem 布局字体太大怎么处理?
getComputedStyle方法能够获取到计算后的样式、大小。
(function(doc, win) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var scale = 1.0;
var ratio = 1;
if (isIPhone) {
if (window.devicePixelRatio == 2) {
scale *= 0.5;
ratio *= 2;
}
if (window.devicePixelRatio == 3) {
scale *= (1 / 3);
ratio *= 3;
}
}
var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
document.write(text);
var docEl = doc.documentElement
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function() {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
// 解决部分rem特别大的问题
var docElFontSize = docEl.style.fontSize.replace(/px/gi, '')
var computedFontSize = win.getComputedStyle(docEl)['font-size'].replace(/px/gi, '')
docElFontSize != computedFontSize && (docEl.style.fontSize = docElFontSize * docElFontSize / computedFontSize + 'px')
}
if (!doc.addEventListener) return
recalc()
win.addEventListener(resizeEvt, recalc, false)
})(document, window);
6、line-height如何继承?
1)写具体数值,如30px,则继承该值
2)写比例,如2倍,则继承该比例
3)写百分比,如200%,则继承计算出来的值(易错)
<p>这是一行文字</p>
body{
font-size: 20px;
/*line-height: 50px; p的line-height:50px*/
/*line-height: 1.5; line-height为16*1.5=24px*/
/*line-height: 200%; line-height为20*200%=40px*/
}
p{
background-color: #ccc;
font-size:16px;
}
四、CSS 选择器及其优先级
1、CSS 选择器有哪些?哪些属性可以继承?优先级算法如何计算?
(1)id选择器( # myid)
(2)类选择器(.myclassname)
(3)标签选择器(div, h1, p)
(4)属性选择器(a[rel = "external"])
(5)通配符选择器( * )
(6)伪类选择器(a: hover, li: nth - child)
(7)后代选择器(li a)
(8)相邻选择器(h1 + p)
(9)子选择器(ul < li)
可继承:字体系列属性:font-size、font-family,文本系列属性:color、text-align、line-height, 元素可见性:visibility,表格布局属性:table-layout,列表属性:list-style;
不可继承 :border padding margin width height ;
2、优先级算法如何计算?
样式的引用方式对css优先级的影响:
外部样式 < 内部样式 < 内联样式,但是有!important的样式除外。
<!-- 内联样式 -->
<span style="color:red;">Hello</span>
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
选择器对css样式优先级的影响:
!important > id > class= 属性=伪类 > tag
如果同一个元素在没有其他样式的作用影响下,其Class定义了多个并以空格分开,其优先级顺序为:
一个元素同时应用多个class,后定义的优先(即近者优先),属性后插有 !important 的属性拥有最高优先级
五、纯 CSS 创建一个三角形、梯形、菱形、平行四边形
三角形 直角?等边?
<div class="container">
</div>
.container {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
梯形
.container {
width: 100px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid orange;
}
平行四边形 图形倾斜
.container {
margin: 100px auto auto 100px;
width: 100px;
height: 100px;
background-color: yellow;
transform: skew(-30deg);
}
菱形 图像旋转
.container {
margin: 100px auto auto 100px;
width: 100px;
height: 100px;
background-color: yellow;
transform: rotate(45deg);
}
圆形
.container {
margin: 100px auto auto 100px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50px;/*宽高一样,border-radius设为宽高的一半*/
}
椭圆
.container {
margin: 100px auto auto 100px;
width: 200px;
height: 100px;
background-color: yellow;
border-radius: 200px/100px;/*border-radius:水平半径/垂直半径*/
}
六、CSS 预处理
1、Sass、Less是什么?
CSS 预处理器, CSS 上的一种抽象层,是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言.。将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数。 LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node. js)。
参考:CSS预处理器SCSS
2、使用 CSS 预处理的优缺点分别是什么?
1)优点:
便于扩展,提高 CSS 可维护性。
引入变量,增添主题功能。可以在不同的项目中共享主题文件。
易于编写嵌套选择器。
通过混合(Mixins)避免生成重复的 CSS。
使用选择器继承来精简CSS
2)缺点:
将代码分割成多个文件。不进行预处理的 CSS,虽然也可以分割成多个文件,但需要建立多个 HTTP 请求加载这些文件。
完全兼容 CSS 代码,可以方便地应用到老项目中。
需要预处理工具。
重新编译的时间可能会很慢。
3、stylus/sass/less 区别
1、基本语法
Less标准的css语法 ,有花括号和冒号;Sass 同时也支持老的语法,就是不包含花括号和分号的方式;Stylus花括号和冒号都可以不写 比较自由
Sass 默认使用 . sass 扩展名,而 Less 使用 . less 扩展名,Stylus 默认使用 . styl 的文件扩展名
2、变量
Sass 变量必须是以$开头的,然后变量和值之间使用冒号(:)隔开,和 css 属性是一样的
Less css 中变量都是用@开头的,其余与 Sass 都是一样的
Stylus 对变量是没有任何设定的,可以是以$开头,或者任何的字符,而且与变量之间可以用冒号、空格隔开,但是在 Stylus 中不能用@开头
3、嵌套、运算符写法一致
4、继承
Sass可通过@extend来实现代码组合声明;Stylus同样也是通过@extend;而 Less里的继承更像是mixin写法
5、混合
Sass的混合需要通过@include来实现;Less和Stylus不需要
七、动画
1、transform translate transition 的区别
transform是css3的一个属性,变换、变形
translate是transform的属性值,指元素进行2D变换
transition是一组css属性变换到另一组属性的动画展示过程
2、过渡与动画的区别是什么
transition:
可以在一定的时间内实现元素的状态过渡为最终状态,用于模拟以一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果而动画属性
animation:
可以制作类似 Flash 动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。
3、简单动画的实现,如旋转等
让一个 div 元素旋转 360 度示例
1. div 的样式结构:
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
}
2. 设置旋转属性的类名:
div.rotate {
/* 旋转360度 */
transform: rotate(360deg);
/* all表示所有属性,1s表示在一秒的时间完成动画 */
transition: all 1s;
}
transition 有四个属性:
property: 规定应用过渡的 CSS 属性的名称。
duration: 定义过渡效果花费的时间。默认是 0,单位是 s。
timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。
delay: 规定过渡效果何时开始。默认是 0。单位 s。
可以连写: transition: property duration timing-function delay;
3. 给 div 元素设置鼠标移入时旋转, 也就是给它加上. rotate 类名. 鼠标移出时移除类名
$(function() {
$("div")
.mouseenter(function() {
$(this).addClass("rotate");
})
.mouseleave(function() {
$(this).removeClass("rotate");
});
});
八、图片
1、PNG, GIF, JPG 的区别
gif:无损压缩;支持boolean透明,即要么完全透明,要么完全不透明;适合简单动画
jpeg:有损压缩,可控制压缩质量;不支持透明;适合照片
png:无损压缩;支持alpha透明度;适合图标、背景、按钮
webp 谷歌开发的旨在加快图片加载速度的图片格式,图片压缩体积是 jpeg 的 2/3,有损压缩。高版本的 W3C 浏览器才支持,google39+,safari7+
2、精灵图和 base64 如何选择?
Css Sprites(雪碧图或 css 精灵),是网页图片处理的一种方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
原理: 将许多的小图片整合到一张大图片中,利用 css 中的 background-image 属性,background-position 属性定位某个图片位置,来达到在大图片中引用某个部位的小图片的效果。
优点: 减少网页的 http 请求,提升网页加载速度。 合并多张小图片成大图,能减少字节总数(大图大小<=多张小图大小).
缺点: 前期需要处理图片将小图合并,多些许工程量。 对于需要经常改变的图片维护起来麻烦。
base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一,要求把每三个 8Bit 的字节转换为四个 6Bit 的字节。 原则上,计算机中所有内容都是二进制形式存储的,所以所有内容(包括文本、影音、图片等)都可以用 base64 来表示。
优点: base64 的图片会随着 html 或者 css 一起下载到浏览器, 减少了请求,可避免跨域问题;对数据进行简单的加密,肉眼安全。
缺点: 低版本的 IE 浏览器不兼容。 体积会比原来的图片大一点。 css 中过多使用 base64 图片会使得 css 过大,不利于 css 的加载。
适用场景: 应用于小的图片几 k 的,太大的图片会转换后的大小太大,得不偿失。
九、其他
1、link和@import区别?
(1)link 属于 XHTML 标签,而@import 是 CSS 提供的;
(2)页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会等到页面被加载完再加载;
(3)import 只在 IE5 以上才能识别,而 link 是 XHTML 标签,无兼容问题;
(4)link 方式的样式的权重高于@import 的权重.
2、CSS 合并方法
@import url(css 文件地址)
3、偏移、卷曲、可视
偏移
offsetWidth width + padding + border
offsetHeight height + padding + border
offsetLeft
offsetTop
offsetParent
注意:没有offsetRight和offsetBottom
************************************************************************************************
卷曲
scrollWidth width + padding
scrollHeight 当内部的内容溢出盒子的时候, 顶边框的底部,计算到内容的底部;如果内容没有溢出盒子,计算方式为盒子内部的真实高度(边框到边框)
scrollLeft 这个scroll系列属性不是只读的
scrollTop
scroll()
此函数可以获取卷曲的高度和卷曲的宽度
function myScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
滚动滚动条的时候触发事件
box(window).onscroll = function () {}
************************************************************************************************
可视
clientWidth 获取的是元素内部的真实宽度 width + padding
clientHeight 边框之间的高度
clientLeft 相当于左边框的宽度 如果元素包含了滚动条,并且滚动条显示在元素的左侧。这时,clientLeft属性会包含滚动条的宽度17px
clientTop 相当于顶边框的宽度
client()
此函数可以获取浏览器可视区域的宽高
function myClient() {
return {
wid: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
----------------------------------------------------------------------------------------------
@offsetHeight和style.height的区别
demo.style.height只能获取行内样式,如果样式写到了其他地方,甚至根本就没写,便无法获取
style.height是字符串(而且带单位),offsetHeight是数值
demo.style.height可以设置行内样式,offsetHeight是只读属性
因此,一般用demo.offsetHeight来获取某元素的真实宽度/高度,用style.height来设置宽度/高度
----------------------------------------------------------------------------------------------
@offsetLeft和style.left的区别
一、style.left只能获取行内样式
二、offsetLeft只读,style.left可读可写
三、offsetLeft是数值,style.left是字符串并且有单位px
四、如果没有加定位,style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准,style.left以margin左上角为基准
----------------------------------------------------------------------------------------------
@scrollHeight和scrollWidth
标签内部实际内容的高度/宽度
不计算边框,如果内容不超出盒子,值为盒子的宽高(不带边框)
如果内容超出了盒子,就是从顶部或左部边框内侧一直到内容a的最外部分
----------------------------------------------------------------------------------------------
@scrollTop和scrollLeft
被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
4、什么是 Css Hack?ie6, 7, 8 的 hack 分别是什么?
不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
5、什么是 FOUC? 如何避免?
在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面在 windows 下的 ie 出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称为文档样式短暂失效(Flash Of Unstyled Content),简称 FOCU。
原因大致为:
其实原理很清楚:当样式表晚于结构性 html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用 link 标签将样式表放在文档 head 中。
6、文本超出部分显示省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
7、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向:line-height
水平方向:letter-spacing,还可以消除 inline-block 元素间的换行符空格间隙问题。
8、@media 属性
9、display:inline-block 什么时候不会显示间隙?
元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
1、父亲设置font-size=0
2、 删除空格,但是会不利于阅读
3、设置letter-spacing 设置字母之间的间隙为-4px 去抵消字母与字母之间的空格
4、设置word-spacing 单词之间的间隙
5、使用 margin 负值
10、设置元素浮动后,该元素的 display 值是多少?
float隐性的把内联元素转化为块元素,但是他不占据一行,对外是内联元素的属性,相当于:display:inline-block;
使用 import 方法导入样式表
将样式表放在页面底部
有几个样式表,放在 html 结构的不同位置。
all
适用于所有设备。
为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。
screen
主要适用于彩色的电脑屏幕
speech
speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.