Skip to content

Latest commit

 

History

History
116 lines (79 loc) · 3.59 KB

属性.md

File metadata and controls

116 lines (79 loc) · 3.59 KB

内容较多,建议配合 Chrome 插件 Smart TOC 查阅

CSS中定位的方式有哪些?position属性的值有哪些?

  • 默认值:initial(浏览器默认值)
  • 继承父级元素的定位机制:inherit
  • 默认:static
  • 相对定位:relative
  • 绝对定位:absolute(注意 z-index
  • 固定定位:fixed
  • 粘性定位:sticky 该定位基于用户滚动的位置。

设置元素浮动后,该元素的display值是多少?

自动变成

display:block;

absolutefloat都会隐式改变display;

清除浮动的几种方式以及优缺点

  • 父级 div 定义 height

    实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化

  • 最后一个子元素处加空 div 标签 clear:both

    父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度。

  • 父级 div 定义伪类 :after 和 zoom⭐常用

    <div id="wrap" class="clearfix">
      <div id="inner"></div>
    </div>
    #wrap {
      border: 1px solid;
    }
    
    #inner {
      float: left;
      width: 200px;
      height: 200px;
      background: pink;
    }
    
    /*开启haslayout 只有IE6,7识别 */
    .clearfix {
      *zoom: 1;
    }
    
    /*ie6 7 不支持伪元素*/
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
      height: 0;
      visibility: hidden; 
    }
  • 父级 div 定义 overflow:hidden

    触发 BFC ,但是多余部分会剪裁掉

  • 父级 div 也浮动,需要定义宽度

  • 结尾处加 br 标签 clear:both

    <div id="wrap">
      <div id="inner"></div>
      <br clear="all" />
    </div>

display:none和visibility:hidden的区别?

  1. 空间占据

    display:none 隐藏后的元素不占据任何空间它各边的元素会合拢,就当他从来不存在,而 visibility:hidden 隐藏的元素空间依旧存在。

  2. 回流与渲染

    display:none 隐藏产生 reflow 和 repaint (回流与重绘),而 visibility:hidden 只会触发重绘;

  3. 株连性

    所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。display:none 就是“株连性”明显的声明:一旦父节点元素应用了 display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。

    何时隐藏“失效”?很简单,如果子孙元素应用了 visibility:visible,那么这个子孙元素可以显现出来。

CSS中link和@import的区别是?

  • link 属于 HTML 标签,而 @import 是 CSS 提供的;
  • 页面被加载的时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载;
  • import 只在 IE5 以上才能识别,而 link 是 HTML 标签,无兼容问题;
  • link 方式的样式的权重 高于 @import 的权重.

margin和padding分别适合什么场景使用?

  • 需要背景色:padding,不需要:margin
  • 上下相连盒子需要抵消空白,用 margin (margin 塌陷)
  • 考虑兼容性:IE 5.6,float 的盒子设置 margin 会出现两倍宽度问题,通过改用 padding 或指定盒子为 display:inline 可以解决。

font-style属性可以让它赋值为“oblique” oblique是什么意思?

Italic 代表斜体字,是字体自带的属性,假设一个字体本身没有斜体字,那么 Italic 就会失效。

Oblique 代表斜体效果,你可以理解为显示效果上的倾斜,和字体本身是否有斜体字无关。