html和css面试总结

2020-01-21 17:04:53 阅读：228 来源： 互联网

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

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 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）
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;
}

<div class="box"><div>

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;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

在这里插入图片描述
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;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9