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
Raw

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

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

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

设置元素浮动后，该元素的display值是多少？

自动变成

display:block;

absolute 和 float都会隐式改变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 代表斜体效果，你可以理解为显示效果上的倾斜，和字体本身是否有斜体字无关。