第2章 第5节 CSS(二)

推荐给朋友

● CSS盒模型

参考回答:

当对一个文档进行布局时候,浏览器渲染引擎会根据CSS-box模型,将所有元素表示为一个矩形盒子,CSS决定这些盒子的大小,位置,属性,如图:



content包含元素真实内容的区域,由width,height,控制内容大小,
内边距padding,边框区域border,外边距margin,用空白区域扩展边框区域,已分开相邻的元素,

● 如果想要改变一个DOM元素的字体颜色,不在它本身上进行操作?

参考回答:

可以更改父元素的color

● 对CSS的新属性有了解过的吗?

参考回答:

CSS3的新特性中,在布局方面新增了flex布局,在选择器方面新增了例如first-of-type,nth-child等选择器,在盒模型方面添加了box-sizing来改变盒模型,在动画方面增加了animation,2d变换,3d变换等,在颜色方面添加透明,rbga等,在字体方面允许嵌入字体和设置字体阴影,最后还有媒体查讯等

● 用的最多的css属性是啥?

参考回答:

用的目前来说最多的是flex属性,灵活但是兼容性方面不强,

● line-height和height的区别

参考回答:

line-height一般是指布局里面一段文字上下行之间的高度,是针对字体来设置的,height一般是指容器的整体高度,

● 设置一个元素的背景颜色,背景颜色会填充哪些区域?

参考回答:

background-color设置的背景颜色会填充元素的content、padding、border区域,

● 知道属性选择器和伪类选择器的优先级吗

参考回答:

属性选择器和伪类选择器优先级相同

● inline-block、inline和block的区别;为什么img是inline还可以设置宽高

参考回答:

Block是块级元素,其前后都会有换行符,能设置宽度,高度,margin/padding水平垂直方向都有效。

Inline:设置width和height无效,margin在竖直方向上无效,padding在水平方向垂直方向都有效,前后无换行符

Inline-block:能设置宽度高度,margin/padding水平垂直方向 都有效,前后无换行符

● 用css实现一个硬币旋转的效果

参考回答:

虽然不认为很多人能在面试中写出来
#euro {
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spin 2.5s linear infinite;
}
.back {
background-image: url("/uploads/160101/backeuro.png");
width: 150px;
height: 150px;
}
.middle {
background-image: url("/uploads/160101/faceeuro.png");
width: 150px;
height: 150px;
transform: translateZ(1px);
position: absolute;
top: 0;
}
.front {
background-image: url("/uploads/160101/faceeuro.png");
height: 150px;
position: absolute;
top: 0;
transform: translateZ(10px);
width: 150px;
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

● 了解重绘和重排吗,知道怎么去减少重绘和重排吗,让文档脱离文档流有哪些方法

参考回答:

DOM的变化影响到了预算内宿的几何属性比如宽高,浏览器重新计算元素的几何属性,其他元素的几何属性也会受到影响,浏览器需要重新构造渲染书,这个过程称之为重排,浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘,引起重排重绘的原因有:

添加或者删除可见的DOM元素,

元素尺寸位置的改变

浏览器页面初始化,

浏览器窗口大小发生改变,重排一定导致重绘,重绘不一定导致重排,

减少重绘重排的方法有:

不在布局信息改变时做DOM查询,

使用csstext,className一次性改变属性

使用fragment

对于多次重排的元素,比如说动画。使用绝对定位脱离文档流,使其不影响其他元素

● CSS画正方体,三角形

参考回答:

画三角形
#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}

画正方体:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<div class="wrapper w2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>

● overflow的原理

参考回答:

要讲清楚这个解决方案的原理,首先需要了解块格式化上下文,A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻译过来就是块格式化上下文是CSS可视化渲染的一部分,它是一块区域,规定了内部块盒 的渲染方式,以及浮动相互之间的影响关系

当元素设置了overflow样式且值部位visible时,该元素就构建了一个BFC,BFC在计算高度时,内部浮动元素的高度也要计算在内,也就是说技术BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,所以达到了清除浮动的目的,

● 清除浮动的方法

参考回答:

给要清除浮动的元素添加样式clear,\

父元素结束标签钱插入清除浮动的块级元素,给该元素添加样式clear

添加伪元素,在父级元素的最后,添加一个伪元素,通过清除伪元素的浮动,注意该伪元素的display为block,

父元素添加样式overflow清除浮动,overflow设置除visible以外的任何位置

● box-sizing的语法和基本用处

参考回答:

box-sizing规定两个并排的带边框的框,语法为box-sizing:content-box/border-box/inherit

content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框

border-box:为元素设定的宽度和高度决定了元素的边框盒,

inherit:继承父元素的box-sizing

● 使元素消失的方法有哪些?

参考回答:

1. opacity:0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的

2. visibility:hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件

3. display:none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉。

● 两个嵌套的div,position都是absolute,子div设置top属性,那么这个top是相对于父元素的哪个位置定位的。

参考回答:

margin的外边缘

● 说说盒子模型

参考回答:

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

标准盒模型:一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异盒模型:一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)

如何设置:box-sizing:border-box

● display

参考回答:

主要取值有none,block,inline-block,inline,flex等。具体可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

● 怎么隐藏一个元素

参考回答:

1. opacity:0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的

2. visibility:hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件

3. display:none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉。

● display:none和visibilty:hidden的区别

参考回答:

1. visibility:hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件

2. display:none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉。

● 相对布局和绝对布局,position:relative和obsolute。

参考回答:

相对定位relative:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

● flex布局

参考回答:

flex 是 Flexible Box 的缩写,意为"弹性布局"。指定容器display: flex即可。

容器有以下属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content。

flex-direction属性决定主轴的方向;

flex-wrap属性定义,如果一条轴线排不下,如何换行;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目(子元素)也有一些属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

● block、inline、inline-block的区别。

参考回答:

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。


inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。


inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

● css的常用选择器

参考回答:

id选择器,类选择器,伪类选择器等

● css布局

参考回答:

六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

圣杯布局是指布局从上到下分为header、container、footer,然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的,因此宽度小的时候会出现混乱。

双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。

Flex布局是由CSS3提供的一种方便的布局方式。

绝对定位布局是给container 设置position: relative和overflow: hidden,因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动,right 向右浮动。center 使用绝对定位,通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。

表格布局的好处是能使三栏的高度统一。

网格布局可能是最强大的布局方式了,使用起来极其方便,但目前而言,兼容性并不好。网格布局,可以将页面分割成多个区域,或者用来定义内部元素的大小,位置,图层关系。

● css定位

参考回答:

固定定位fixed:

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky:

元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

默认定位Static:

默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。

inherit:

规定应该从父元素继承position 属性的值。

● relative定位规则

参考回答:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

● 垂直居中

参考回答:

父元素固定宽高,利用定位及设置子元素margin值为自身的一半。

父元素固定宽高,子元素设置position: absolute,margin:auto平均分配margin

css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。

将父元素设置成display: table, 子元素设置为单元格 display: table-cell。

弹性布局display: flex。设置align-items: center; justify-content: center;

● css预处理器有什么

参考回答:

less,sass等