HTML、CSS

最新推荐文章于 2024-06-28 22:28:59 发布

Leooooo~

最新推荐文章于 2024-06-28 22:28:59 发布

阅读量182

点赞数

分类专栏：面试文章标签： css html css3

本文链接：https://blog.csdn.net/m0_47907048/article/details/121347230

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML、CSS面试题

HTML和CSS面试题

HTML和CSS面试题

HTML

h5新增

HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API，地理(Geolocation) API
localStorage、sessionStorage
表单控件，calendar、date、time、email、url、search

行内元素、块元素、行内块元素

行内元素：span，em，a，label，textarea，b，select
块元素：div，ul，li，p，nav、aside、header、footer、section、article
行内块元素：img input

image标签上的title属性和alt属性的区别

alt如果无法显示图像，浏览器将显示替代文本

title（鼠标放在图片上显示信息）属性为设置该属性的元素提供建议性的信息

CSS

css3新属性

border-radius 圆角
border-shadow 盒子阴影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media

伪类和伪元素

css什么属性可以继承

字体系列属性

font-family：字体
font-weight；字体粗细
font-size；字体大小
font-style：字体风格

文本系列属性

text-indent：文本缩进
text-align：字体水平对齐方式
line-height：行高
word-spacing：！单词！之间的间距
letter-spacing：！中文或字母！之间的间距
text-transform：控制文本大小写capitalize每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase	定义无大写字母，仅有小写字母
color：颜色

css中的link和 @import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

css sprites原理以及优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字精确的定位出背景图片的位置。
优点

减少网页的http请求

缺点

在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

px、em、rem

px像素（Pixel)

相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

rem

rem是CSS3新增的一个相对单位（root em，根em）

这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

flex布局

flex 布局意为“弹性布局”，用来为盒模型提供最大的灵活性。任何一个元素都可以指定为 flex 布局。

注意，设为 flex 布局以后，子元素的 float、clear、vertical-align 属性将失效。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTXJvaX0-1636995848291)(HTML%E3%80%81CSS.assets/image-20211116004606123.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FLtgm56n-1636995848296)(HTML%E3%80%81CSS.assets/image-20211116004615595.png)]

css画三角形

div {
    width:0;
    height:0;
    border: 40px solid;
    border-color: transparent red transparent transparent;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfRwYI5w-1636995848301)(HTML%E3%80%81CSS.assets/image-20211116005234170.png)]

元素水平垂直居中方案

盒子模型

CSS盒模型包含了元素内容区域（content）、边框（border）、内边距（padding）、外边距（margin）

box-sizing: content-box：元素的height和width为元素content区域的宽高

box-sizing: border-box：元素的height和width为元素 content+padding+border的宽高，当设置padding或border时，内容content会自动缩小

box-sizing: inherit

margin塌陷及合并问题

外边距塌陷: 当嵌套的两个块元素,给子盒子加向上的外边距时, 父盒子会跟着掉下来,此时就是外边距塌陷.

解决方案:

给父盒子加padding
给父盒子加上边框
给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案

两个兄弟结构的元素在垂直方向上的 margin 是合并的（取两者的最大值）

给父亲上边框 border: 1px solid transparent
给父亲内边距 padding-top: 1px; 给父元素
添加 overflow: hidden
子元素添加 position:absolute/relative 或 float

清除浮动方法

额外空标签clear:both

在浮动元素末尾添加一个空的标签例如:

< div style="clear:both"></ div>

优点：通俗易懂，书写方便；

缺点：添加许多无意义的标签，结构化较差

父元素添加overflow属性方法

overflow：hidden/auto/scroll

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

after伪元素清除浮动：

:after方式为空元素额外标签法的升级版，好处是不用单独加标签

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6,7不支持：after，使用zoom：1触发haslaout

通过BFC的方式清除浮动

position:absolute/fixed，不为 static 或 relative
float:left/right
display:inline-block，table-cell
overflow:hidden，scroll，不为 visible

BFC

BFC 块级格式化上下文，就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

如何创建BFC
- position设为absolute或者fixed
- float不为none
- overflow设置为hidden
- display设置为inline-block或者inline-table或flex