前端面试题 CSS之盒子模型

块状元素margin-bottom对下面元素的影响

<style> 
    #example {
        margin-bottom: -10px;
    }
</style>
<h1>World</h1>
<p id="example">Hello</p>
<h2>World</h2>

问题:增加了#example样式后,h2元素位置会发生改变吗? h2向上移动10px

  • 块状元素所占空间包含外边距(margin),margin设置为负值,将减少所占空间
  • 元素排列方向是上->下,左->右,如果p元素设置margin-top:-10px,自身将上移10px

网页中应该使用奇数的字体,还是偶数的字体

常用12px/14px,低版本的浏览器会将奇数字体渲染为偶数字体,某些字体对奇数字号支持不好,加粗的时候可能一大一小

为什么会出现浮动,如何清除浮动

父元素没有设置高度,子元素设置float,导致父元素被撑开,不能包含子元素,解决方法如下

  1. 子元素内添加一个clear:both 的div,
  2. 或者父元素设置overflow(auto:溢出自动显示滚动条,overlay溢出覆盖,hidden溢出隐藏,visible 溢出显示,scroll无论是否溢出显示滚动条)
  3. 或者添加after伪类

     ::after {clear: both; display: block; visibility: hidden; height: 0; content: '.'; }
    

如何让chrome支持小于12px字体

  1. 旧版本 –webkit-text-size-adjust:none
  2. 新版本 –webkit-transform:scale(0.8)

设置元素浮动后,display是什么

自动变为block

为使页面里的字体变得清晰,变细用css如何做?

-webkit-font-smoothing: antialiased;

font-style:oblique什么意思

italic是文字的斜体,oblique是文字的倾斜

display:inline-block什么时候会显示间隙

内联元素换行书写,中间留有换行符,且字号不为0,解决方法如下

  1. 2个内联块中间不留空格或换行符

     (1)</li><li>
     (2)</li><!--
         --><li
     (3)><li>
    
  2. 负margin margin-right:-4px;*margin-right:0;不建议使用,和字号有关

  3. 父元素font-size:0; 在inline-block元素重新设置字体

absolute的containing block计算方式和正常流有什么区别

fixed由viewport建立,absolute由祖先元素中最近的position非static的元素,relative和static是祖先元素中最近的block container box的content区域,例如两个相对定位的div将上下排列而不会重叠

居中div,居中浮动元素,居中绝对定位元素

  1. 普通div

     margin: 0 auto;
    
  2. 浮动div

     position:relative; top:50%; left:50%; width:500px; height:300px; margin:-150px 0 0 -250px;
    
  3. 绝对div:

     position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;
    

overflow:scroll时不能平滑滚动的问题怎么处理

overflow: auto; overflow-x: hidden,左右即使有文字超出也不会左右滑动

有一个高度自适应的div,里面有2个div,一个高度100px,另一个填满剩下高度。

div0 position:relative,div1固定高度,绝对定位,脱离文档流,div2高度100%

为什么要初始化CSS样式

因为不同的代理(浏览器)对HTML标签有默认的样式,而不同浏览器的默认样式有差别,为了让页面在不同的浏览器上有相同的显示效果,需要初始化CSS样式 最常见的初始化样式 * {margin:0; padding: 0},根据需要,可以对CSS样式进行不同程度的初始化。

gzdaijie            updated 2018-05-04 01:47:18

results matching ""

    No results matching ""