网站程序h5,滁州seo,网站建设模板的,湖北人工智能建站系统软件面试题目录 前言1.讲一下盒模型#xff0c;普通盒模型和怪异盒模型有什么区别2.CSS如何实现居中3.讲一下flex弹性盒布局4.CSS常见的选择器有哪些#xff1f;优先级5.长度单位px 、em、rem的区别6.position属性的值有哪些7.display属性的值有哪些#xff0c;分别有什么作用8.… 面试题目录 前言1.讲一下盒模型普通盒模型和怪异盒模型有什么区别2.CSS如何实现居中3.讲一下flex弹性盒布局4.CSS常见的选择器有哪些优先级5.长度单位px 、em、rem的区别6.position属性的值有哪些7.display属性的值有哪些分别有什么作用8.HTML语义化标签9.三栏布局的实现方式10.让页面里的字体变清晰变细用CSS如何实现11. 清浮动的方法12.如何让超出宽度的文字显示为省略号 前言
技术面通常第一个问题都是CSS中相关知识这是基础问题答错很影响面试分。这里记录面试高频的题目。 1.讲一下盒模型普通盒模型和怪异盒模型有什么区别
盒模型分为两类一是标准盒模型二是怪异盒模型。一般我们的盒子默认是标准盒模型。 两者区别是: 标准盒模型的实际宽高会把padding和border计算在内而怪异盒模型不会。形成怪异盒模型的条件是box-sizing:border-box形成标准盒模型的条件box-sizing:content-box。 2.CSS如何实现居中
flex布局display:flex; justify-content:center; align-items:center;position margin: auto父容器相对定位子容器绝对定位text-align:center 父级加文本或行级元素水平居中line-height元素高度文本内容垂直居中position transform 子绝父相top、left 设置50%transformtranslate-50%-50%
3.讲一下flex弹性盒布局
4.CSS常见的选择器有哪些优先级 常见的选择器 id 选择器 #header类选择器 .header标签选择器 div伪类选择器 :hover、:focus、active伪元素选择器 ::after 、::before属性选择器a[target]后代选择器组合选择器div p通配符选择器* 选取所有标签元素 优先级 !importantstyleidclass、伪类标签继承、* 5.长度单位px 、em、rem的区别 CSS尺寸设置单位 px rem em vw vh px :绝对长度表示固定的像素设置无法自适应页面em :相当于当前元素em 是根据font-size大小计算的改变font-size大小实现弹性变化自适应rem相当于根元素htmlvh、vw相对长度相对于页面视口来计算100vh 视口高度100% 6.position属性的值有哪些 static默认无定位 relative相对定位相对自身所在位置定位 absolute绝对定位相对于最近父级定位 fixed固定定位相对于浏览器窗口定位 sticky黏性定位根据用户滚动位置进行定位 flex:弹性盒 display:none 与 visiblity: hidden 的区别 visibility:hidden 隐藏元素但仍占据布局中的空间。 display:none 从文档中删除元素。它不会占据任何空间 7.display属性的值有哪些分别有什么作用 display:控制布局重要css属性 inline默认内联元素不从新行开始仅占用所需的宽度。block块级元素默认独占一行none隐藏元素 8.HTML语义化标签
使用HTML构建页面尽可能使用具有语义的标签。利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读。 header定义文档或节的页眉main定义文档的主体内容footer定义文档或节的页尾aside、acticle、section 9.三栏布局的实现方式
10.让页面里的字体变清晰变细用CSS如何实现
11. 清浮动的方法 解决浮动元素后面有非浮动元素非浮动元素会被遮挡。 为父元素设置固定高度为父元素设置overflow:hidden 清除浮动为最后一个子元素设置clear:both 清除浮动 12.如何让超出宽度的文字显示为省略号
p{display:inline-block; //设置为行内块元素width:100%; //固定宽度white-space:nowrap; //设置为不换行overflow:hidden; //超出隐藏text-overflow:ellipsis;//省略显示...
}
