美文网首页
CSS常见样式2

CSS常见样式2

作者: 饥人谷_whiskey | 来源:发表于2017-10-17 21:48 被阅读12次

1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

  • 给块级元素添加此属性,能让其后代行内元素相对于块级父元素水平居中(demo);
  • 作用在display:inlinedisplay:inline-block的元素上

2. IE 盒模型和W3C盒模型有什么区别?

image.png image.png

区别是IE盒模型中元素的width把padding和border计算在内,即:
标准盒模型: 宽度=内容宽度;
IE盒模型: 宽度=内容宽度+padding+border

3. *{ box-sizing: border-box;}的作用是什么?

指定所有元素使用IE盒模型

4. line-height: 2和line-height: 200%有什么区别?

  • line-height: 2 表示行高是当前元素字体大小的两倍;
  • line-height: 200% 表示行高是父元素字体大小的两倍。
  • 二者在继承上也存在区别:
    • 父元素设置 line-height:2 会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
    • 父元素设置 line-height:200% 是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

5. inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • inline-block特性: 即呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可设置宽高,内外边距)
  • 去除缝隙:
    1. 去掉两个元素之间的空白字符;
    2. 用div包裹一层,并把div的font-size设置为0,然后在显示文本的元素上设置具体的字体大小;
  • 添加属性vertical-align: top;

6. CSS sprite 是什么?

指将不同的图片/图标合并到一张图片上。使用css sprite可以减少网络请求,提高网页加载性能,缺点是无法缩放 、不好修改

7. 让一个元素"看不见"有几种方式?有什么区别?

  • opacity: 0; 透明度为0,占用位置
  • visibility: hidden; 效果和opacity: 0;类似
  • display: none; 消失,不占用位置
  • background-color: rgba(0,0,0,0) 设置背景色透明

8. 代码

  1. 使用 CSSsrpite 实现如下效果【效果范例615】. ps: 图片下载地址414
    实现代码链接

  2. 在iconfont上搜索"饥人谷"460, 使用字体图标实现代码1中的效果
    实现代码链接

相关文章

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • CSS常见样式2

    1- text-align:center的作用是实现元素内部文字的居中。 text-align:center的意思...

  • CSS常见样式2

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align 属...

  • CSS常见样式2

    1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • css常见样式2

    1.text-align:center的作用 text-align属性规定元素中的文本等的水平对齐方式。text-...

  • CSS常见样式2

    问答 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-a...

  • css常见样式2

    一、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 在父元素中写入,可以...

  • CSS常见样式 2

    一、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • CSS常见样式2

    1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • CSS常见样式2

    一.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...

网友评论

      本文标题:CSS常见样式2

      本文链接:https://www.haomeiwen.com/subject/kqiduxtx.html