css超出隐藏滚动条_前端三贱客——每个⼈都会碰到的问题
（html+css）
常见浏览器兼容性问题与解决⽅案？
参考答案css设置表格滚动条
(1)浏览器兼容问题⼀：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。
碰到频率:100%
解决⽅案：CSS⾥ {margin:0;padding:0;}
备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符来设置各个标签的内外补丁是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标签⽐较特殊)。在⽤floa
t布局并有横向的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)浏览器兼容问题七：透明度的兼容CSS设置
⼀般在ie中⽤的是filter:alpha(opacity=0)；这个属性来设置div或者是块级元素的透明度，⽽在firefox中，⼀般就是直接使⽤opacity:0，对于兼容的，⼀般的做法就是在书写css样式的将2个都写上就⾏，就能实现兼容
列出display的值并说明他们的作⽤？
参考答案
display： none | inline | block |
list-item | inline-block | table | inline-table |
table-caption | table-cell | table-row | table-row-group | table-column |
table-column-group | table-footer-group | table-header-group | run-in | box |
inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item：指定对象为列表项⽬。
inline-block： 指定对象为内联块元素。(CSS2)
table： 指定对象作为块元素级的表格。类同于html标签
inline-table：指定对象作为内联元素级的表格。类同于html标签
table-caption：指定对象作为表格标题。类同于html标签
(CSS2)
table-cell：指定对象作为表格单元格。类同于html标签
(CSS2)
table-row：指定对象作为表格⾏。类同于html标签
(CSS2)
table-row-group：指定对象作为表格⾏组。类同于html标签
(CSS2)
table-column：指定对象作为表格列。类同于html标签
(CSS2)
table-column-group： 指定对象作为表格列组显⽰。类同于html标签
(CSS2)
table-header-group： 指定对象作为表格标题组。类同于html标签(CSS2)
table-footer-group： 指定对象作为表格脚注组。类同于html标签
(CSS2)
run-in：根据上下⽂决定对象是内联对象还是块级对象。(CSS3)
box：将对象作为弹性伸缩盒显⽰。(伸缩盒最⽼版本)(CSS3)
inline-box：将对象作为内联块级弹性伸缩盒显⽰。(伸缩盒最⽼版本)(CSS3)
flexbox：将对象作为弹性伸缩盒显⽰。(伸缩盒过渡版本)(CSS3)
inline-flexbox：将对象作为内联块级弹性伸缩盒显⽰。(伸缩盒过渡版本)(CSS3)
flex：将对象作为弹性伸缩盒显⽰。(伸缩盒最新版本)(CSS3)
inline-flex：将对象作为内联块级弹性伸缩盒显⽰。(伸缩盒最新版本)(CSS3)
如何居中div, 如何居中⼀个浮动元素?
参考答案
(1)、⾮浮动元素居中：可以设置margin:0 auto 令其居中, 定位 ,⽗级元素text-algin:center等等
(2)、浮动元素居中:
⽅法⼀：设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px；其中的left是宽度的⼀半。⽅法⼆:⽗元素和⼦元素同时左浮动，然后⽗元素相对左移动50%，再然后⼦元素相对左移动-50%。
⽅法三:position定位等等。
CSS中link 和@import 的区别是？
参考答案
(1)、link属于HTML标签，⽽@import是CSS提供的;
(2)、页⾯被加载的时，link会同时被加载，⽽@import引⽤的CSS会等到页⾯被加载完再加载;
(3)、import只在IE5以上才能识别，⽽link是HTML标签，⽆兼容问题;
(4)、link⽅式的样式的权重⾼于@import的权重.
请列举⼏种清除浮动的⽅法(⾄少两种)?
参考答案
(1)、⽗级div定义 height
原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题。
优点：简单、代码少、容易掌握
缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级div不⼀样时，会产⽣问题
建议：不推荐使⽤，只建议⾼度固定的布局时使⽤
(2)、结尾处加空div标签 clear:both
原理：添加⼀个空div，利⽤css提⾼的clear:both清除浮动，让⽗级div能⾃动获取到⾼度
优点：简单、代码少、浏览器⽀持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页⾯浮动布局多，就要增加很多空div，让⼈感觉很不好
建议：不推荐使⽤，但此⽅法是以前主要使⽤的⼀种清除浮动⽅法
(3)、⽗级div定义
伪类:after 和 zoom
原理：IE8以上和⾮IE浏览器才⽀持:after，原理和⽅法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器⽀持好、不容易出现怪问题(⽬前：⼤型⽹站都有使⽤，如：腾迅，⽹易，新浪等等)
缺点：代码多、不少初学者不理解原理，要两句代码结合使⽤才能让主流浏览器都⽀持。
建议：推荐使⽤，建议定义公共类，以减少CSS代码。
(4)、⽗级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:hidden时，浏览器会⾃动检查浮动区域的⾼度
优点：简单、代码少、浏览器⽀持好
缺点：不能和position配合使⽤，因为超出的尺⼨的会被隐藏。
建议：只推荐没有使⽤position或对overflow:hidden理解⽐较深的朋友使⽤。
(5)、⽗级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:auto时，浏览器会⾃动检查浮动区域的⾼度
优点：简单、代码少、浏览器⽀持好
缺点：内部宽⾼超过⽗级div时，会出现滚动条。
建议：不推荐使⽤，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使⽤吧。
block，inline和inlinke-block细节对⽐？
参考答案
·
display:block
a、block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。默认情况下，block元素宽度⾃动填满其⽗元素宽度。
b、block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占⼀⾏。
c、block元素可以设置margin和padding属性。
· display:inline
a、inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。
b、inline元素设置width,height属性⽆效。
c、inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left,
margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top,
margin-bottom不会产⽣边距效果。
· display:inline-block
a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同⼀⾏内。⽐如我们可以给⼀个link(a元素)inline-block属性值，使其既具有block的宽度⾼度特性⼜具有inline的同⾏特性。
补充说明
a、⼀般我们会⽤display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不⽌这三种，仅仅是⽐较常⽤⽽已。
b、IE(低版本IE)本来是不⽀持inline-block的，所以在IE中对内联元素使⽤display:inline-block，理论上IE是不识别的，但使⽤
display:inline-block在IE下会触发layout，从⽽使内联元素拥有了display:inline-block属性的表象。
什么叫优雅降级和渐进增强？
参考答案
优雅降级： Web站点在所有新式浏览器中都能正常⼯作，如果⽤户使⽤的是⽼式浏览器，则代码会检查以确认它们是否能正常⼯作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些⽆法⽀持功能的浏览器增加候选⽅案，使之在旧式浏览器上以某种形式降级体验却不⾄于完全失效.
渐进增强： 从被所有浏览器⽀持的基本功能开始，逐步地添加那些只有新式浏览器才⽀持的功能，向页⾯增加⽆害于基础浏览器的额外样式和功能的。当浏览器⽀持时，它们会⾃动地呈现出来并发挥作⽤。
说说浮动元素会引起的问题和你的解决办法
参考答案
问题：
(1)⽗元素的⾼度⽆法被撑开，影响与⽗元素同级的元素
(2)与浮动元素同级的⾮浮动元素会跟随其后
(3)若⾮第⼀个元素浮动，则该元素之前的元素也需要浮动，否则会影响页⾯显⽰的结构
解决⽅法：
使⽤CSS中的clear:both；属性来清除元素的浮动可解决问题(2)、(3)，对于问题(1)，添加如下样式，给⽗元素添加clearfix样式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮动的⼏种⽅法：
(1)、额外标签法，
>
(缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
(2)、使⽤after伪类
parent:after{
content:" ";
height:0;
visibility:hidden;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。