CSS面试题总结

最新推荐文章于 2024-09-26 17:57:52 发布

xiaojia119

最新推荐文章于 2024-09-26 17:57:52 发布

阅读量17

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/xiaojia119/article/details/130832030

版权

HTML语义化

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

块状元素&内联元素

display:block/table;有div,h1,h2,p,table等；（独占一行）
display:inline/inline-block;有span,img,input。（不独占一行，排成一行，直到换行为止）

盒模型宽度计算

offsetWidth =（内容宽度+内边距+边框），无外边距
box-sizing：border-box；width=offsetWidth，width生效于border-box

margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠，重叠后以margin-bottom为主
空白内容的<p></p>也会重叠

margin负值问题

margin-top和margin-left负值，元素向上、向左移动；
margin-right负值，右侧元素左移，自身不受影响；
margin-bottom负值，下方元素上移，自身不受影响。

BFC理解与应用

Block format context，块级格式化上下文
一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

float不是none
position是absolute或fixed；
overflow不是visible；
display是flex，inline-block等。

常见应用：清除浮动

float布局

如何实现圣杯布局和双飞翼布局
手写clearfix

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）；
两侧内容固定，中间内容随着宽度自适应；
一般用于PC网页。

圣杯布局和双飞翼布局的技术总结：

使用float布局；
两侧使用margin负值，以便和中间内容横向重叠；
防止中间内容被两侧覆盖，一个用padding一个用margin。

手写clearfix

/**手写clearfix**/ .clearfix:after{ content:''; display:table; clear:both; }

flex实现一个三点的色子

常用语法回顾：

flex-direction //页面方向
justify-content //横向对齐
align-items //纵向对齐
flex-wrap //是否换行
align-self //子元素纵向对齐

/*flex画三个点的色子*/ .box{ display:flex; /*flex布局*/ justify-content:space-btween; /*两端对齐*/ } .item{ /*背景色、大小、边框等*/ } .item:nth-child(2){ algin-self:center; /*第二项居中对齐*/ } .item:nth-child(3){ algin-self:flex-end; /*第三项尾对齐*/ } <div class="box"> <span class="item"></span> </div>

css-定位

absolute和relative分别依据什么定位

relative依据自身定位 absolute依据最近一层的定位元素定位定位元素：absolute，relative，fixed，body

居中对齐有哪些实现方式

水平居中： inline元素：text-align：center； block元素：margin：auto； absolute元素：left：50% + margin-left负值垂直居中： inline元素：line-height的值等于height值； absolute元素：top：50% + margin-top负值； absolute元素：transform（-50%，-50%）； absolute元素：top，left，bottom，right=0 + margin：auto；

css-图文样式

line-height如何继承

写具体数值，如20px，则继承该值；（比较好理解）
写比列，如2/1.5，则继承该比例；（比较好理解）--直接继承父元素的line-height，标签本身的font-size*line-height
写百分比，如200%，则继承计算出来的值。（考点）

/*如下代码，p标签的行高将会是多少？*/ <style> body{ font-size:20px; line-height:200%; } p{ font-size:16px; } </style> <body> <p>AAA</p> </body> 答：行高是40px，它会用body的font-size*line-height，然后继承

css-响应式

rem是什么？

rem是一个长度单位