CSS interview questions (reference)

1. Introduce the standard CSS box model? What are the differences between the box models of lower versions of IE?

The standard model consists of four parts:

• Content area: an area where elements such as text, images, etc. can be placed. Generally, the width and height indicators are set. is the width and height of the content
• Inner margin area: the distance between the content and the border
• Border area: border
• Outer border area: limited by the outer border , use the blank area to extend the border area and separate adjacent elements

Model distinction:
The standard phenotype refers to the box model that sets box-sizing to content-box, generally width, Height refers to the width and height of content. The IE box model refers to a box with box-sizing as border-box. The calculation of width and height is content padding border;

Special recommendation:Summary of CSS interview questions in 2020 (latest)

2. What are the CSS selectors? Which ones can be inherited?

• id selector (#myid)
• Class selector (.myclassName)
• Tag selector (p,h1,p)
• Descendant selector (ul>li)
• Descendant selector (li a)
• Wildcard selector (*)
• Attribute selector (a[rel=" external"])
• Pseudo class selector (a:hover,li:nth-child)

Inheritable styles: font-size font-family color
Not possible Inherited styles: border padding margin height width

3. How to calculate css priority?

• The principle of priority is the nearest. In the case of the same weight, the closest style definition is accurate
• The loading style is subject to the last loaded positioning

The priority is:

• Same weight: Inline style (inside the tag)> Embedded style Table (in the current file) >External style (in the external file)
• !important >id >class >tag
• !important has a higher priority than inline

4. What values ​​does display have? Explain their role

• block block type. The default width is the width of the parent element, the width and height can be set, and the line wrap display
• none element is not displayed and removed from the document flow
• inline Inline elements, the default width is the content width, cannot be set Width and height, displayed in the same row
• inline-block The default width is the content width, you can set the width and height, displayed in the same row
• list-item Like block type elements, you can set the width and height, displayed in the same row
• table This element will be displayed as an accounting table
• inherit stipulates that the value of the display attribute should be inherited from the parent element

5. The values ​​of position release and absolute are positioned far away The point is?

• absolute generates an absolutely positioned element, positioned relative to the first parent element with the value part static
• fixed generates an absolute element, positioned relative to the browser window
• relative Generates a relatively positioned element, positioned relative to its normal position
• static Default value. Without positioning, the element appears in the normal flow.
• inherit specifies that the value of the position attribute is inherited from the parent element

6. What are the characteristics of css?

• Transition

  transition-property:width
  transition-duration:1s
  transition-timing-function:linear
  transition-delay:2s

• Animation

animation: animation name, time spent in one cycle, cloud curve (default ease), animation delay (default 0), the number of animation playback times (default 1), whether to play the animation in reverse (default normal), whether to pause the animation (default running)

##Shape conversion

• transform: 使用于2D或3D转换的元素
  transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);

• Selector

• Shadow

##box-shadow: The position of the horizontal shadow The position of the vertical shadow Blur distance, size of shadow, color of shadow, starting direction of shadow (default is from inside to outside, setting inset is from outside to inside)

Border picture

border-image: Set the image path, set the dividing method of the border background image, set or retrieve the object's border thickness, set or retrieve the object's border background image, expand outward, set the tiling method of the border image

Border rounded corners

•   border-radius: n1 n2 n3 n4;
  /* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */

Reflection

box-reflect: Direction [above-up|below-down |right-right|left-left], offset, mask image

Word

Line break

word-break: normal (defaults to using the browser's default line breaking rules)|break-all (allows line breaks within words)|keep-all (can only break lines at half-width spaces or hyphens)
• Exceeds the ellipses

• overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;

Multi-line ellipses

• overflow:hiden;
  text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本
  display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
  -webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式

Text-shadow

• ##text-shadow: horizontal shadow vertical shadow Blur shadow shadow color

Color

• rgba(rgb color value, a is transparency)

Gradient

• Linear gradient and radial gradient
• filter(滤镜)

filter: 滤镜效果(透明度)

• 弹性布局

弹性布局就是flex布局

-栅格布局

栅格化布局。就是grid

• 盒模型
• border-box 边框和内边距包含在元素的宽高之内
• content-box 边框和内边距不包含在元素的宽高之内

7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景

一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间

8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么

• png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8
• 浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一
• IE6双边距bug；矿属性变迁float后，又有横向的margin情况下，在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。
• 设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度
• chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决

移动端

• 1px边框问题。解决方案采用微元素模拟的方式

 .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

• 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题
• 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
• ios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper

 .wrapper{
   position:relative;
   overflow:hidden;
 }

• ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;

9. 请解释一下为什么需要清浮动？清浮动的方式

清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示

• 父级p定义height
• 在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}
• 给父容器添加overflow:hidden或者auto样式
• 给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动

.clearfix{
    zoom:1;
}
.clear:after{
    content:'.';
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}

10. margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

11.什么是伪类，什么是伪元素，他们的区别？

• 伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
• 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
• 伪类使用的一个冒号，为元素使用两个冒号
• 伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

12. 什么是外边距合并

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

13. 实现水平垂直居中

示例：

<p class="md-warp">
    <span class="md-main"></span>
</p>
.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}

水平居中

• margin法
  需要满足三个条件
• 元素定宽
• 元素为块级元素或行内元素设置display:block
• 元素的margin:left或者margin-right都必须设置auto
  三个条件缺一不可

.md-main{
    margin: 0 auto
}

• 定位法
• 元素定宽
• 元素绝对定位，并设置left:50%;
  +元素负做边距margin-left为宽度的一半

.md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate

.md-warp{
    position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

• 文字水平居中

直接使用text-align:center即可

垂直居中

• 定位法

和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可

优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签

 .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 核心 */
    top: 50%;
    margin-top: -50px;
}

不确定高度的时候

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // 注意此时md-main不设置height为100px
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

• 单行文本垂直居中

需要满足两个条件：

• 元素内容是单行，并且其高度是固定不变的
• 将其line-height设置成height的值一样

p{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

视窗单位的解决办法

让元素在视窗中居中，使用vh实现

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

Flexbox的解决方案

完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto

.md-wrap{
    display:flex
}
.md-main{
    display:auto
}

Flexbox的实现文本的水平垂直居中同样很简单

 .md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}

绝对垂直居中

.md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0'
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

最好不要使用绝对定位，因为他对整体的布局影响相当的大

相关教程推荐：CSS视频教程

The above is the detailed content of CSS interview questions (reference). For more information, please follow other related articles on the PHP Chinese website!