我碰到的那些面试题html+css

1、html5中新增的标签有哪些?
/*1、header元素
表示页面中一个内容区块或真个页面的标题。
2、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
3、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
4、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
5、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。6、nav>定义导航链接。
HTML5新规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求(比如 Flash),更优秀的错误处理,更多取代脚本的标记,HTML5 应该独立于设备开发进程应对公众透明 ;HTML5 新特性:
新的特殊内容元素,比如 article、footer等,新的表单控件,比如 calendar、date、time、email、url、search;用于媒介回放的 video 和 audio 元素;用于绘画的 canvas 元素 对本地离线存储的更好的支持。*/

更多资料

http://www.sohu.com/a/330231789_120174705

2、css3中新增的内容
    /*CSS3选择器有哪些?
答:属性选择器、伪类选择器、伪元素选择器。
CSS3新特性有哪些?
答:1.颜色:新增RGBA,HSLA模式
文字阴影(text-shadow、)
边框:圆角(border-radius)边框阴影:box-shadow
盒子模型:box-sizing
背景:background-size设置背景图片的尺寸background-origin设置背景图片的原点background-clip设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局渐变:linear-gradient、radial-gradient
过渡:transition,可实现动画
自定义动画
在CSS3中唯一引入的伪元素是 :selection.
媒体查询,多栏布局
border-image
2D转换:transform:translate(x,y)rotate(x,y) skew(x,y) scale(x,y)3D转换
CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个<p> 元素。p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。:enabled、:disabled 控制表单控件的禁用状态。:checked,单选框或复选框被选中。html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性:
拖拽释放(Drag and drop) API
语义化更好的内容标签(header,nav,footer,aside,article,section)音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除
表单控件,calendar、date、time、email、url、search新的技术webworker, websocket, Geolocation支持HTML5新标签:*/
3、flex弹性盒局是什么?属性以及属性的意思?

属性 值 描述

display flex 定义一个盒子为弹性盒子

flex-direction row 子盒子水平排列,从左到右

row-reserve 子盒子水平反向排列

column 子盒子垂直排列,从上到下

column-reserve 子盒子垂直反向排列

flex-wrap no-wrap 子盒子不换行,默认

wrap 子盒子不换行

wrap-reverse 换行并改变顺序

justify-content flex-start flex子元素在最左边

flex-end flex子元素在最右边

center flex子元素在正中间

space-between 平分flex容器

space-around 平分flex容器,但是每个子元素两边是子元素间距的一半

align-content flex-start flex子元素在最上边

flex-end flex子元素在最下边

center flex子元素在纵向正中间

space-between 纵向平分flex容器

space-around 纵向平分flex容器,但是每个子元素两边是子元素间距的一半

stretch 默认:li将ul划分

align-items flex-start flex子元素在最上边

flex-end flex子元素在最下边

center flex子元素在纵向正中间

baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐

stretch 高度100%,宽度自动

align-self flex-start flex子元素在最上边

flex-end flex子元素在最下边

center flex子元素在纵向正中间

baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐

stretch 高度100%,宽度自动

order 1(number) 改变顺序

flex 1(number) 该元素占子元素剩余位置的比例

https://blog.csdn.net/u014607184/article/details/52650446

4、常见的定位方式有哪些?
/*absolute生成绝对定位的元素,相对于 static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(
忽略 top, bottom, left, right 或者 z-index 声明)。
这个熟悉了就知道用哪个了,比如有些div悬浮在上方,可能就需要fixed,也就是滚动条移动时不会改变与浏览器的位子,
relative可能就要相对于父结点进行定位了一般都是相对定位的*/
5、浏览器兼容性
/*
html5这块尽量不使用html5中新增的一些语义化标签;
css方面不要使用css3新增内容
js这块,引用jquery1.0系列版本
针对360浏览器(兼容模式,极速模式)
html hack 的方式针对不同版本的ie设置不同的样式
<!-- lt ie8 -->

1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:

可以使用Normalize来清除默认样式,具体可参考文章:来,让我们谈一谈 Normalize.css

也可以使用如下代码:

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

2,浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

3,浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

4,浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设置的间距

碰到几率:20%

解决方案:在display:block;后面加入display:inline;display:table;

备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

5,浏览器兼容问题五:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。

碰到几率:20%

解决方案:使用float属性为img布局

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(也可使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以尽量不要使用)

6,浏览器兼容问题六:标签最低高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

碰到几率:5%

解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注:在B/S系统前端开发时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

7,浏览器兼容问题七:各种特殊样式的兼容,比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大,所以,只能现查资料通过给不同浏览器写不同的代码来解决。

8,清除浮动:

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }

9,盒模型

Element {
        box-sizing: border-box;
        /*box-sizing: content-box;*/
    }

/* CSS hack*/

我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置:

div { height: 300px; *height: 200px; _height:100px; }

IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

实战是解决问题的最佳途径,也是遇到问题的唯一途径,大家多多亲自制作才能更快更好的成长,另外多去借鉴别人的经验也是进步的捷径。

https://www.jianshu.com/p/f971aae86f4d

6、css常见的元素选择器
    /*标签选择器
class类选择器
id选择器
伪类选择器,主要为伪类选择器主要应用在<a>标签上,
它由四种状态:未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)
或者在父元素下选择子元素nth-child nth-of-type 偶数/奇数
!important //设置最高优先级
css遵循一个原则后面的会覆盖掉前面,按照从右向左的方法进行解析
*/

https://blog.csdn.net/weixin_30912051/article/details/99052973

7、标准盒模型和怪异盒模型
 /*内容区域的计算方式不一样,当设置为box-sizing:border-box时,将采用怪异模式解析计算*/

盒模型一共有两种模式:W3C标准模式和IE怪异模式

一、标准盒子模型

可以看到,在标准盒模型下,width和height是内容区域即content的width和height。

在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

二、IE盒子模型

而IE盒模型或怪异盒模型显而易见的区别就是,width和height除了content区域外,还包含padding和border。

一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

1、如何运用

只要在文档首部加了doctype申明,即使用了标准盒模型,而不加,则会由浏览器自己决定,比如,ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”。

当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签,不定义DOCTYPE,会触发怪异模式

2、怪异盒模型

CSS3的box-sizing

box-sizing语法: box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式; 当设置为box-sizing:border-box时,将采用怪异模式解析计算;

8、rem,em,vw 之间的区别

/*.px

px就是 pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率;

2.em

参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,

整个页面内1em不是一个固定的值;

字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,

我们可以计算下:class为id1的div字体大小继承自父元素body:

16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:

24px*1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px

3.rem

rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只

修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

4.%

%百分比,相对长度单位,相对于父元素的百分比值

元素款到与字体大小使用区别:

(1)尽量使用相对尺寸单位

使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部

DOM结构,重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页

面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置;

(2)字体尺寸尽量使用em,rem

为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层

以上的字体相对尺寸的设置,可以考虑使用em;

5.vh和vw

vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度,1vw等于1/100

的视口宽度,比如:浏览器高度900px,宽度为750px,

1vh=900px/100=9px,1vw = 750px/100=7.5px;很容易实现与同屏幕等高的框。

*/

https://www.cnblogs.com/leaf930814/p/9059340.html

10、css中常见的颜色表示方式有哪些?如何设置透明度?
    /*十六进制
英文名
rgb
rgba
opacity
*/
 11、如何实现一个鼠标移上之后图片旋转360度的效果
/* :hover{
   transform: rotate(360deg);
 }*/
 /*
   .box:hover {
   -webkit-transform: rotateZ(360deg);
   -moz-transform: rotateZ(360deg);
   -o-transform: rotateZ(360deg);
   -ms-transform: rotateZ(360deg);
   transform: rotateZ(360deg); }*/
12、怎么实现一个选项卡的功能
13、怎么实现一个模态窗?

https://blog.csdn.net/weixin_33877092/article/details/94269015

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #son {
            background-color: green;
        }
        .showMask{
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background: red;
        }
        #father:hover .showMask{
            display: block;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son">我是块级元素</div>
    <!--遮罩层-->
    <div class="showMask">
        我是遮罩层
    </div>
</div>
</body>
</html>

原文发布于微信公众号 - 李才哥(liqi13695515224)

原文发表时间:2019-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券