html css面试题

  1. 说一说标签的分类,以及常用的标签

   标签的分类有块元素,行内块元素,行内元素

块元素的特点:独占一行,从上到下排列,可以设置宽度和高度,不设置宽度,宽度是父元素的100%,高度由内容撑开,里面可以放块元素,行内元素,行内块元素。

常见的块元素标签:div  h1-h6  ol  ul  li p等

行内块元素的特点:和相邻的行内块元素或者行内元素可以显示在一行上,宽度和高度可以设置,默认是被内容撑开

常见的行内块元素:img  input  td

行内元素的特点:从左到右显示,一行装满切换到下一行,不能设置宽度和高度,宽度和高度被内容撑开

常见的行内元素有:a  span em strong  del等

 2.说一说BFC

 页面元素中的隐含属性,即块格式化上下文,简称BFC,开启BFC的元素相当于一个独立的区域,不会影响到页面的布局,那么开启BFC属性可以解决哪些问题呢?

 可以解决父元素和子元素外边距重叠的问题,可以解决页面中高度塌陷的问题。那么如何开启BFC呢?

有下列4种方法:

设置浮动

将元素转成行内块元素(display:inline-block)

设置overflow的属性值为非visible的值(副作用最小)

开启绝对定位

3.说一说样式优先级的规则是什么

样式优先级(权重)由大到小的顺序是 !Important;>内联样式>id选择器>class选择器、属性选择器>元素选择器>通配符选择器>继承的权重

如果选择器的权重一样大,则采用靠下的选择器样式,因为浏览器是从上到下来运行代码的

如果使用的是交集选择器,那么将他们的权重相加,相加之后的结果才是他们的权重

但是选择器的无论怎么相加都不会超过它的上一级权重

如果使用的是并集选择器,则不相加,而是看并集选择器中谁的权重大就是多大

4.说一下浮动

   在我们的页面布局当中,我们会经常使用浮动,浮动是很重要的,因为在布局中我们经常使用块元素,而块元素的特点是独占一行 ,所以我们在水平布局上无法布局,那么浮动就可以解决无法在水平方向上的布局的困扰,设置浮动的元素会脱离文档流。

浮动的属性名是float

它的可选值有  

none  页面该怎么样就是怎么样,相当于不浮动

left   设置浮动的元素靠左浮动

right   设置浮动的元素靠右浮动                  

 

5说一下html语义化;

Html语义化就是从意思上来定义代码的结构,能够清晰的表示出代码的结构层次

例如:header 头部  Main 主体  footer 底部  nav 导航 title 标题 aside 侧边栏等

6.说一说css尺寸设置的单位

  CSS的尺寸单位有很多,常见的有px,em,%百分比,rem等;那他们的区别是什么呢?

  px:px是固定单位,1px就相当于1个物理像素。

  em:em是相对单位,他是相对于当前字体大小来定义的单位,如果当前字体大小是20px;那么1em=20px,2em=40px;如果不设置字体大小,那么就是1em就等于默认字体大小16px;

  %:百分比也是相对单位,他是相对于父元素的宽和高来定义的,如果父元素的width和height是200px和100px,那么我们给子元素的宽和高设置为50%,50%,那他 对应的width和height是100px和50px。

  rem:rem也是一个相对单位,他是相对于根标签(root)来定义的,取决与根标签的字体大小,跟标签的字体大小是多少,那么1rem就是多少。

7.说几个元素水平居中方法

水平居中要分为什么居中,如果块元素要在页面中居中的话,我们可以设置margin:0 auto;来进行页面布局中的居中;如果内容要在父盒子里面剧中的话我们有一个属性:text-align:center;这样就会实现内容水平居中;

绝对定位也是可以实现水平居中的,通过绝对定位,设置left:50%和margin-left:-(元素宽度的一半),这样也可以实现水平居中

弹性盒子中如果主轴是X轴,那么 justify-content:center也可以实现水平居中

绝对定位和transform也可以实现居中,元素开启绝对定位后,top:0;left:0;然后transform:translate(-50%,-50%);

8.说一说盒子模型

   盒子模型在我们的布局当中是最常见的,盒子模型有四个部分组成,外边距(margin),边框(border),内边距(padding),内容区(content);

外边距是调整盒子在页面中的位置的,它的属性有:margin-left,margin-top,margin-right,margin-bottom,分别对应的是左,上,右,下,例如margin-left:50px; 就是元素离左边的值增加了50px,如果后跟的是负值,就是想相反的方向移动。简写margin:后面可以跟4个值,3个值,2个值,1个值。

4个值,顺序对应的是上,右,下,左

3个值,对应的是上,左右,下

2个值,对应的是上下,左右

1个值就是4个方向都是这个值

边框就是给盒子加一个边框,它的属性有border-width,border-color;border-style;分别指的是边框的大小,颜色,样式 当然他也有简写border:后面跟的是大小,颜色,样式,没有固定顺序。

内边距指的是边框到内容区的距离,它的属性是padding,它的规则跟margin的规则一样

我们一般设置宽高都是给内容区设置的,所以边框,内边距,内容区的大小都会影响到盒子的大小,想要设置的宽和高是把内边距,边款,内容区包含在内的话,我们有一个属性叫:box-sizing:border-box;

9.说一说图片三像素问题

三像素问题是由于img是行内块元素,在页面中会留有空白,这就是三像素问题

解决图片三像素问题有下列解决办法:

  1. 将图片转成块元素
  2. 脱离文档流
  3. 设置父元素font-size为0  
  4. 设置vertical-align属性,设置一个非visible的样式值

10.如何优化解决高度塌陷问题

   我们一般不设置父元素的高度,由子元素撑开,但是设置子元素浮动,会导致父元素的高度丢失,称之为高度塌陷

解决高度塌陷有下列方法:

1. 给父元素设置固定高度

2.开启BFC

3.可以直接在高度塌陷的父元素的后面,添加一个空白的块元素,在对其清除浮动。

4.可以通过after伪类给元素的最后加上一个块级元素,然后对其清除浮动.

猜你喜欢

转载自blog.csdn.net/weixin_65607135/article/details/126663658