入门任务9

作者: 饥人谷_zhangfan | 来源:发表于2017-05-19 12:36 被阅读0次

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

    text-align作为HTML元素属性其主要是用来文本水平居中的。text-align属性定义行内内容(例如文字)如何相对它的块父元素对齐,它并不控制块元素自身的对齐,只控制块元素行内内容的对齐。

    • text-align:center的意思是块级元素中的行内内容居中。
    • 作用在block-level元素上(包括了block和inline-block);
    • 能让block-level的元素中的行内元素,替换元素和inline-block元素居中。

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

    W3C盒模型中的padding,border所占的空间不在widthheight计算范围之内,而IE盒模型width包含content尺寸+padding+border

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

    此元素的内边距和边框不再会增加它的宽度,宽度、高度=content尺寸+padding+border,实现类似于IE盒模型的功能。

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

    line-height: 2表示行高是其本身文字高度的2倍;
    line-height: 200%表示其父元素文字高度的2倍;
    line-height:2 在继承关系中页面所有元素都会以自身文字高度2倍进行继承;
    line-height:200% 在继承关系中会先计算具体的行高,页面元素继承计算后得到的行高;

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

    特性
    既呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可以设置宽高,内外边距),可以设置他text-align属性,可以用vertical-align设置垂直对齐。
    去除缝隙
    在源代码中删除空白字符
    在其父元素或祖先元素中设置font-size:0;然后再设置其自己需要的字号
    顶端对齐
    样式设置为vertical-align:top;

    CSS sprite 是什么?##

    CSS Sprites,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,再利用CSS的“background-image”“background- repeat”“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。CSS Sprites能减少图片的字节,能很好地减少网页的http请求,从而大大的提高页面的性能。缺点就是无法缩放,不好修改。

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

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

    代码##

    css sprites 示例
    iconfont 示例

    相关文章

      网友评论

        本文标题:入门任务9

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