大前端

前端学习之家-大前端

HTML、CSS

HTML、CSS面试题

  • HTML和CSS面试题
    • HTML
      • h5新增
      • 行内元素、块元素、行内块元素
      • image标签上的title属性和alt属性的区别
    • CSS
      • css3新属性
      • 伪类和伪元素
      • css什么属性可以继承
      • css中的link和 @import的区别
      • css sprites原理以及优缺点
      • px、em、rem
      • flex布局
      • css画三角形
      • 元素水平垂直居中方案
      • 盒子模型
      • margin塌陷及合并问题
      • 清除浮动方法
      • BFC

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是相对于显示器屏幕分辨率而言的。

em

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

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

rem

rem是CSS3新增的一个相对单位(root em,根em)

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

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

flex布局

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

注意,设为 flex 布局以后,子元素的 floatclearvertical-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塌陷及合并问题

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

解决方案:

  1. 给父盒子加padding

  2. 给父盒子加上边框

  3. 给父元素加overflow:hidden 属性

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

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

  1. 给父亲上边框 border: 1px solid transparent

  2. 给父亲内边距 padding-top: 1px; 给父元素

  3. 添加 overflow: hidden

  4. 子元素 添加 position:absolute/relative 或 float

清除浮动方法

  1. 额外空标签clear:both

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

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

优点:通俗易懂,书写方便;

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

  1. 父元素添加overflow属性方法

overflow:hidden/auto/scroll

优点:代码简洁

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

  1. after伪元素清除浮动:

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

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

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

  1. 通过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

发表评论:

Copyright Your WebSite.Some Rights Reserved.