美文网首页
css学习之任务九

css学习之任务九

作者: IsGirl | 来源:发表于2017-08-12 22:35 被阅读0次

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

text-align 属性规定元素中的文本的水平对齐方式。它作用在块级元素上,让块级元素中的行内元素居中。

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

IE盒模型的宽度和高度是指border+padding+content的宽度和高度
W3C 标准盒子模型的宽度和高度是指content的宽度和高度

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

这个是css3的新样式。
box-sizing: border-box表示的是使用 IE 盒模型。
box-sizing: content-box表示的是使用W3C盒模型。

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

line-height: 2:是它本身文字高度的两倍
line-height: 200%:是其父元素的两倍,指自己的content是父容器content的两倍。

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

inline-block可以让元素具有块级元素的属性,可以设置宽高和margin以及padding,同时也具有行内元素的属性只占据内容本身的宽度。
存在缝隙是因为HTML书写时的换行和回车导致的,因为本身换行符也是一个字符,也会占用一个字符的空间,所以看上去就会有一个缝隙,解决方法就是先将有缝隙的两个子元素的父元素的font-size设置为0,然后在给对应的子元素设置自身的字体大小。
高度不一样的两个inline-block的元素默认是按照文字的底部对齐。
可以通过vertical-align来设置对齐方式;下面举例说明

举例说明

6 CSS sprite 是什么?

CSS Sprites(css精灵图)其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置

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

opacity:0;透明度为0
visibility:hidden;看不见但本身是存在的
display:none;消失,不占用位置
background-color:rgba(0,0,0,0.2)0.2是设置背景的透明度

相关文章

  • css学习之任务九

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

  • web前端笔记2:CSS入门

    学习和完成任务二的笔记任务二:零基础HTML及CSS编码(一) 学习的资料 MDN HTML入门 [MDN CSS...

  • 任务九-CSS盒模型

    1.盒模型包括哪些属性? 答:css和模型主要包括外边距(margin),内边距(padding),边框(bord...

  • 任务九~CSS常见技巧

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...

  • 任务202 CSS

    任务地址 CSS 完成时间 2016-12-8 任务要求的作业 CSS练习——美化试卷 学习过程中我写的其它博客 ...

  • 任务九(2)-CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 答:因为每一个url都会发送一次网络请求,然而ic...

  • 任务九 CSS常见样式二

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

  • 前端学习任务九

    盒模型包括哪些属性? 盒子模型包括content,margin,border,padding属性。 text-al...

  • CSS基础之任务六

    1.CSS的全称是什么? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM...

  • CSS任务

    1、代码:

网友评论

      本文标题:css学习之任务九

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