HTML和CSS面试问题总结,html和css面试总结

html和css

w3c 规范

结构化标准语言

样式标准语言

行为标准语言

1) 盒模型

常见的盒模型有w3c盒模型(又名标准盒模型)box-sizing:content-box和IE盒模型(又名怪异盒模型)box-sizing:border-box。

标准盒子模型：宽度=内容的宽度(content)+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度(content+border+padding)+ margin

2)css3 新特性

常问：

word-wrap 文字换行

text-overflow 超过指定容器的边界时如何显示

text-decoration 文字渲染

text-shadow文字阴影

gradient渐变效果

transition过渡效果 transition-duration：过渡的持续时间

transform拉伸，压缩，旋转，偏移等变换

animation动画

audio音频

vadio视频

RGBA和透明度

css3 边框

border-radius 圆角

box-shadow 盒子阴影

border-image 边框图片

css3 背景

background-image 背景图片

background-size 背景大小

background-origin 背景图像的位置区域

background-clip 背景剪裁属性是从指定位置开始绘制

css选择器及优先级

!important

内联样式

ID选择器

类选择器 属性选择器 伪类选择器

元素选择器 关系选择器 伪元素选择器

通配选择器

CSS选择器有哪些？哪些属性可以继承？

CSS选择符：

id选择器(#myid)、

类选择器(.myclassname)、

标签选择器(div, h1, p)、

相邻选择器(h1 + p)

子选择器(ul > li)、

后代选择器(li a)、

通配符选择器(*)、

属性选择器(a[rel=”external”])、

伪类选择器(a:hover, li:nth-child)

可继承的属性：

font-size,

font-family,

color

不可继承的样式：

border,

padding,

margin,

width,

height

BFC

BFC是块级格式化上下文。

BFC应用:

防止margin重叠

清除内部浮动

自适应两栏布局

防止字体环绕

BFC的生成条件：

根元素

float值不为none

overflow的值不为visible

display的值为inline-block,table-cell,table-caption

position的值为absolute，fixed

图片整合技术的优势

减少对服务器的请求次数

减少图片体积，提高加载速度

元素垂直水平居中

1。不需要知道宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

2。 需要知道宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

3。弹性盒

display:flex;

align-items:center;

justify-conter:center;

4.。 元素水平居中

margin:0 auto;

css定位方式

position：static;//默认定位

position：relative;//相对定位 (参照物是自身,不脱离文档流)

position:absolute;//绝对定位 (参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素进行定位。)

position:fixed;//固定定位 (参照物是可视区窗口，脱离文档流)

position:sticky;

rem和em的区别

总而言之，就是浏览器把谁转化成“px”

rem 依据的是html的font-size值。1rem=16px

em 依据的是父元素的font-size值。

清除浮动

方法一:clear:both

clear:both;

方法二:万能清除浮动

.clean{

content:'.';

height:0;

display:block;

clear:both;

overflow:hiddden;

visibility:hidden;

}

浏览器内核

Trident IE浏览器

Gecko Firefox浏览器

Webkit Chrome Safari

Blink Chrome Opera

移动端1像素问题

一般来说，在pc端浏览器中，设备像素比dpr等于1,1个css像素就等于1个物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1个css像素不在等于一个物理像素，因此在实际设计稿中粗不少。

伪元素+scale

.box{

width:100%;

height:1px;

margin:20px 0;

position:relative;

}

.box::after{

content:'';

position:absolute;

bottom:0;

width:100%;

height:1px;

transform:scaleY(0.5);

transform-origin:0 0;

background:red;

}

border-image

div{

border-width:1px 0px;

-webkit-border-image:url(xxx.png) 2 0 stretch;

border-image:url(xxx.png) 2 0 stretch;

}

常见的布局方式

圣杯布局

body{

min-width: 550px;

}

#container{

padding-left: 200px;

padding-right: 150px;

}

#container .column{

float: left;

}

#center{

width: 100%;

}

#left{

width: 200px;

margin-left: -100%;

position: relative;

right: 200px;

}

#right{

width: 150px;

margin-right: -150px;

}

center

left

right

2. 双飞翼布局

body {

min-width: 500px;

}

#container {

width: 100%;

}

.column {

float: left;

}

#center {

margin-left: 200px;

margin-right: 150px;

}

#left {

width: 200px;

margin-left: -100%;

}

#right {

width: 150px;

margin-left: -150px;

}

center

left

right

link 与 @import 的区别

a.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

b.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

c.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

d.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

qb扛把子

发布了23 篇原创文章 · 获赞 2 · 访问量 1039

私信

关注

标签：width,border,面试,html,position,margin,选择器,css,left

来源： https://blog.csdn.net/qq_45927123/article/details/104044533