CSS属性12.06

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

text-align: center可以让父元素中的内容水平居中,作用在块元素上使行内内容水平居中。

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

IE 盒模型和W3C盒模型的区别在于计算盒模型宽高的方式不一样。给某一盒模型设置宽高:

  • 如果该盒模型是W3C盒模型:
    设置的宽度=内容的宽度
    设置的高度=内容的高度
  • 如果该盒模型是IE盒模型:
    设置的宽度=内容宽度+左右padding值+边框宽度
    设置的高度=内容高度+上下padding值+边框宽度
标准盒模型与IE盒模型

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

{ box-sizing: border-box;}的作用是让所有元素的盒模型宽高的计算方式都按照IE盒模型宽高的计算方式去计算。

4.写一个 btn 的class, 任何 a,span,div,button

代码
预览


)
添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21
, 鼠标按下背景色#e25f31

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

  • inline-block的特性有以下几点:
  • inline-block元素可以设置宽高和上下左右的padding和margin。
  • inline-block元素并排排列
  • inline-block元素默认宽高为内容宽高

方法一:标签连写(删除空格不换行)

方法一

方法二: 父级元素font-size 设为0,再重新给inline-block元素设置font-size
方法二

方法三:设置浮动
QQ截图20161208144028.png

高度不一样的inline-block元素顶端对齐

  • 通过设置vertical-align:top;样式对齐


    未对齐

![设置vertical-align:top;样式后]
](http://upload-images.jianshu.io/upload_images/3889793-c774050e34051562.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

6.CSS sprite

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片.
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

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

opacity: 0:元素透明度为0,还占有位置;
visibility: hidden:与opacity: 0类似;
display: none:元素消失,不占位置;
background-color: rgba(0,0,0,0.2):背景色透明。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,515评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,676评论 0 30
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,659评论 32 459
  • 曾经年少好畋驰,平等苍生老悟知。 从此不崇秦汉业,抚孤助弱念悲慈。
    蔚海山庄三六子阅读 391评论 3 8