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;

}