CSS常见样式2

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

可以让在块级父容器中让行内元素居中,作用在块级元素上。
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

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


标准盒模型的width和height只表示content的大小,而ie盒模型包含content、padding和border的大小。
box-sizing: content-box:w3c标准盒模型
box-sizing: border-box:“IE盒模型”

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

line-height: 2 为本身文字的高度的2倍; line-height: 200%为父元素文字的高度的两倍;两个属性设置给具体的某一个元素时是没有区别的。而line-height在继承上是有区别的:

  • 当父元素设置line-height:200%时,其子元素的行高都是一个具体的值,即父元素字体的200%。
  • 当父元素设置line-height:2时,其子元素的行高都是本身字体大小的2倍。
    参考

inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?(布局时少用这个,多用float)

指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素。更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性。
去掉缝隙的方法:1.让行元素紧挨着 2.font-size: 0 ,3.设置float
4.父元素设置dispaly:flex,Flex是Flexible Box的缩写,意为"弹性布局"。注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

可以通过设置 vertical-align: top可以使高度不一样的 inline-block元素如何顶端对齐.

CSS sprite 是什么?

CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,在利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位。

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

  • opacity:0
  • visibility:hidden
  • display:none
  • position值为absolute,并将其移到不可见的区域。

使用 CSSsrpite 实现如下效果【效果范例344】. ps: 图片下载地址241

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

code1
code2

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 3,826评论 0 1
  • 一,text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 作用在块级元素上面,...
    DeeJay_Y阅读 1,748评论 0 0
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-alig...
    billa_8f6b阅读 3,118评论 0 0
  • 自己的一举一动,一言一行都在被别人看在眼里,为什么最后的结果往往事与愿违,就是因为,平日里太不注意了,日常里注意自...
    Janice1阅读 2,773评论 0 0