html+css一些面试题和诡异的问题

最新推荐文章于 2024-09-11 20:31:47 发布

qq_969152159

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量204

点赞数

文章标签： css 爬虫 html

本文链接：https://blog.csdn.net/qq_39999582/article/details/120046545

版权

1、标题Alt与title的区别：

相同的：都有利于SEO（搜索引擎的优化）
不同的：alt是当图片出现错误时显示的文字信息
Title是当鼠标放在图片上时显示的提示信息

2、get和post的区别：

1 get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议： 1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式； 2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

3、link和import导入外部样式的区别：

差别1：老祖宗的差别： link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等，@import就只能加载CSS
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别： @import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候,只能使用link标签，因为@import不是dom可以控制的

4、子选择器与后代选择器的区别

①写法不一样：后代选择器的标识为：空格如：ul li{width:150px;} 【ul和li之间用空格隔开】子选择器的标识为：>
如：ul>li{width:150px;}【ul和li之间用>隔开】
②功能不一样：后代选择器是选择ul包围的所有元素中的所有li元素，包括子元素、孙元素、曾孙元素等等等。子选择
器仅仅选择ul包围的子元素中的 li元素，不包括孙元素、曾孙元素等等等。
③兼容性不一样：后代选择器是所有浏览器都兼容的，都可使用。子选择器在IE6、IE7、IE8中则是不被支持的选择

5、块状元素与内联元素的区别：

块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高就是其内容。
块状元素自上而下独占一行，内联元素自左向右在一排显示，直到遇到边界换行
块状元素与内联元素都遵循盒模型设置（border、padding、margin）但是内联元素的某些属性不能正常显示
块状元素一般作为其他内联元素的盒子使用。

常见的块状元素：div h1-h6 p ul ol li dl dt dd table tr form hr
常见的内联元素：a span b strong i em u br img input textarea select option

7、相对定位和绝对定位的区别

相对定位不会脱离正常文档流，绝对会脱离，参照物不一样：相对定位的参照物是自身原来的位置，绝对定位参照离其最近的有定位的父元素进行定位，如果父元素都不存在定位，那么根据浏览器窗口去定位如果子元素想根据父元素去定位，那么父元素一定要有定位，且值不能为static，如果父元素存在margin:0 auto; 那么父元素的定位属性值最好用relative 父相子绝

8、哪些元素或属性能触发BFC

根元素；
float属性不为none；
position为absolute或fixed；
display为inlineblock, tablecell, tablecaption, flex, inlineflex；
overflow不为visible；

9、水平垂直居中

固定宽高居中：
定位四个方向清零margin：auto;top:0%;left:0%:bottom:0;right:0:
定位 top：50%; left:50%; margin-top:-高一半; margin-left:-宽一半
弹性盒display:flex; justify-content:center; align-items:center
不固定宽高居中：
定位四个方向清零margin：auto;top:0%;left:0%:bottom:0;right:0:
加一个空标签 display:inline-block; vertical-align:middle; height:100%
弹性盒display:flex; justify-content:center; align-items:center

10、什么是高度塌陷,并写出三种有效的解决方式分值5分

高度塌陷:父元素高度自适应(或没设置高)的情况下子元素设置浮动
1、给父元素添加overflow:hidden;属性
2、给子元素外加空div,并给div设置height : 0;overflow : hidden;clear:both;
3、万能清除法
,:after{content:"",display:block;clear:both;overflow:hidden;visibity:hidden;｝

11、margin-top的传递问题的触发条件和解决方法分别是什么？

包含结构中,给子元素设置了margin-top属性,但是浏览器解析到时候会将子元素的margin-top值传递给父元素,子元素关于父元素的相对位置没变,父元素相对于其他元素或浏览器的位置发生了子元素原本应该移动的margin-top的距离。
1、给父元素添加overflow:hidden;
2、父元素设置高度,子元素浮动;
3、父元素添加border-top;并设置为透明

12、什么是CSS的继承？哪些属性具有继承性？写出5个

父元素的特定的css属性继承给了子元素

list-style、font-size、font-style、font-weight、color

13、想要 a 和 span 等行内元素宽高生效？

1、转成行内块；
2、转成块级元素；
3、设置浮动，因为脱离文档流了，不受文档流限制，所以宽高生效了
4、定位，绝对和相对定位都能实现；
5、弹性盒子；

14、实现未知宽高的元素水平居中？

场景：假设父元素width:100%撑满屏幕，导航栏nav用ul去写，如果想要导航栏增加一个li内容，宽高固定的话就要去具体调代码。
具体实现：
父元素设置 text-align:center;
子元素设置 display:inline-block;
保证了ul的灵活度。
即 text-align:center;属性设置给父元素，除了可以让文本居中以外，还能让行内元素，行内块元素居中

15、元素水平垂直居中的方法有哪些？

1、利用行高，设置包在想要水平垂直居中的元素外面的盒子行高等于其盒子的高度，让图片或块级元素vertical-align：center；实现垂直居中，给包在外面的盒子设置 text-align：center；就可以实现元素水平垂直居中可应用于大小不同的图片或元素在盒子中的水平垂直居中，注意，如果应用这种方法让一个p水平垂直居中并且文字不溢出的话，一定要重置p的行高，因为p会继承外面div的行高。

<style>
        /* 需求:实现一个宽度是100px的p在一个宽高是30日的div中水平垂直居中 */
        *{margin: 0;padding: 0;}
        .testp{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border:1px solid black;
            text-align: center;
            line-height: 300px;
            margin-top: 100px;
        }
        .testp p{
            display: inline-block;
            width: 100px;
            color: brown;
            line-height: 1;/*关键：不写行高的话会继承外面那个div的行高*/
            /* vertical-align: bottom; */
            vertical-align: middle;/*父级给和高度相等行高，内部的行内元素设置这个属性就会垂直居中*/
            background-color: #00f;
        }
        /* ---------------------------------------------------------------------------------------------- */
        /* 需求：大小不同的图片垂直居中 */
    .picdiv{
        width: 900px;
        height: 100px;
        margin: 100px auto;
        /* border:2px solid black; */
    
    }    
    .picdiv div{
        width: 92px;
        height: 92px;
        /* background-color: #00f; */
        float: left;
        margin: 4px;
        line-height: 92px;
        text-align: center;
    }
    .picdiv img{
        vertical-align: middle;
    }
    .picdiv div:hover{
        background: url(/pracdemo/垂直居中/pic/bg.png)no-repeat;
    }
     /* ---------------------------------------------------------------------------------------------- */
    </style>
</head>
<body>

    <!-- 需求:实现一个宽度是100px的p在一个宽高是30日的div中水平垂直居中 -->
    <div class="testp">
        <p>萨格分厘卡即萨格分厘卡即萨格分厘卡即萨格分厘卡即</p>
    </div>
    <!-- 大小不同的图片垂直居中 -->
    <div class="picdiv">
        <div><img src="/pracdemo/垂直居中/pic/logo1.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo2.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo3.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo4.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo5.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo6.png" alt=""></div>
        <div><img src="/pracdemo/垂直居中/pic/logo7.png" alt=""></div>
    </div>
</body>

2、定位实现水平垂直居中，有两种方法
① 看情况设置相对或绝对定位

.div1{width: 300px;height: 300px;background-color: pink;position: absolute;top: 50%;right: 50%;margin-right: -150px（宽度的一半）;margin-top: -150px;（盒子高度的一半）}

② 看情况设置相对或者绝对定位

.div1{width: 300px;height: 300px;background-color: pink;position: absolute;top: 0;right: 0; bottom:0; left:0;  margin:auto;}

3、在外面的大盒子中写一个span在想要水平垂直居中的元素的边上，并设置span{display: inline-block; height: 100%;vertical-align: middle;}
设置图片vertical-align：middile;即可，同理1.

4、css3动画特性 transform：translate属性可以让元素偏移原本的位置；

16、一个宽度为300px的盒子，实现当其内部文字较多的时候水平居中，文字较多的时候水平靠左？

盒子设置 text-align:center; 这样盒子中的行内元素和行内块元素剧终了，文字外边包一个span，并且设置 display:inlin-block； text-align:left;这样就实现了，原理：当盒子中文字较多的时候，父元素的 text-align:center;会让所有文字都居中，而当文字少到站不满一行的时候， display:inlin-block；会让span变成行内块元素，独占一行，并且 text-align:left;靠左。

17、 BFC特性及应用

在这里插入图片描述

18、BFC触发条件

在这里插入图片描述

19、浏览器兼容问题

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商
出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要
麻烦。浏览器的兼容问题是我们必须去克服的。

20、浏览器兼容问题解决方案

css bug \ css Hack\Filter

CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
CSS Hack: CSS中, Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲. Filter是一种用来过滤不同浏览器的Hack类型。
Hack解决方式

1、如果是图片，要解决向下撑大三像素的问题；
2、IE浏览器解析a标签中套的图片，会出现一个蓝边框，
解决：将图片的边距设置成0 或 none；
IE6双编剧问题：浮动的元素最左边距body会双边距。
解决给浮动的元素添加display:inline;
3、百分比问题：IE6认为百分比会四舍五入，浮动评分100%的元素会上下显示。解决：给浮动到左侧的元素添加 clear：right；
4、鼠标指针问题，解决：换词！出了新的！
5、表单行高不一样，解决：Input写float属性
6、按钮大小在各个浏览器中显示不一致问题，按钮不存在盒子模型，想让他与其他文本框平齐只能设置其边框为1，css设置其高度，或者给按扭外嵌套一个其他标签例如span，设置span的边框为none，或者背景图片代替。
7、透明不生效问题，解决。三种解决方式：rgba；
opacity：value–>Fiter：alpha（opacty：value）
过滤器解决方式：
关键字过滤 !important
下划线过滤是一种写法，_height（IE6支持），*height（IE6\IE7支持），反斜杠 height:100px\9

21 CSS清除浮动的8种方法以及优缺点

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：

1，父级div定义 height

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

2，结尾处加空div标签 clear:both;

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both;height:0;overflow:hidden;} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="clearfloat"></div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3，父级div定义伪对象:after 和 zoom

 <style type="text/css"> 
.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;} 
.clearfloat{zoom:1} 
</style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

4，父级div定义 overflow:hidden

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5，父级div定义 overflow:auto

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6，父级div 也一起浮动

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。

7，父级div定义 display:table

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题。
建议：不推荐使用，只作了解。

8，结尾处加 br标签 clear:both

style type="text/css"> 
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.div2{background:#800080;border:1px solid red;height:100px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clearfloat{clear:both} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<br class="clearfloat" /> 
</div> 
<div class="div2"> 
div2 
</div>

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both
建议：不推荐使用，只作了解。

html重置代码

body,ul,li,p,h1, h2,h3, h4, h5,h6,img,br, hr,table,tr,td,dl,dt,dd,form, input, button, figure{
    margin: 0;
    padding: 0;
}
table{
    border-collapse: collapse;
    border: saddlebrown 1px solid;
    table-layout: fixed;
}
td{
    border: 1px #000 solid;
}
h1,h2,h3,h4,h5,h6{
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 6px;
}
br{
    display: none;
}
body {
    font-family: Arial,"微软雅黑";
    font-size: 12px;
    /* position: relative; */
}
ul,li {
    list-style: none;
}
img {
    border: none;
}
i{
    font-style: normal;
}
a {
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
a :hover {
    color: #3366ff;
}
input:focus{
    outline: none;
}

margin:0 auto;为什么不能让行内块元素水平居中？

qq_969152159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css一些面试题和诡异的问题

1、标题Alt与title的区别：相同的：都有利于SEO（搜索引擎的优化）不同的：alt是当图片出现错误时显示的文字信息Title是当鼠标放在图片上时显示的提示信息2、get和post的区别：1 get是从服务器上获取数据，post是向服务器传送数据。2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的U
复制链接

扫一扫