美文网首页
css样式1

css样式1

作者: LeeoZz | 来源:发表于2017-05-05 16:03 被阅读0次
    • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。

    块级元素:div,p,h1~h6,form,table,ul,ol,li,blockquote等;
    行内元素:em,span,img,a,q,textarea,input等。

    特性区别;
    1.块级元素无论大小,都会占据一整行的空间,而行内元素则占据其自身大小的空间。从表现上看,块级元素内容前后有换行,行内元素内容与其包含元素的其余内容放在一起;
    2.width和height对行内元素不起作用;
    3.块级元素可嵌套块级元素和行内元素,而行内元素不能嵌套块级元素;
    4.块级元素可以设置margin和padding,行内元素只能设置左右margin和padding。

    • 什么是css继承? 哪些属性能继承,哪些不能?

    文档树和家族树一样,有父代和子代。css继承指的是特定的css属性从父代向下传递到子孙后代的现象。
    能被继承的属性:font,color,font-family,font-size,font-style,font-weight,line-height,text-decoration,text-transform等。
    不能被继承的属性:margin,padding,border,background,bottom,float,clear,display等。

    • 如何让块级元素水平居中?如何让行内元素水平居中?

    块级元素水平居中可以使用下面的属性:

    .box {
        margin: 0,auto;
    }
    

    实际上是下面属性的合并:

    .box {
       margin-left: auto;
       margin-right: auto;
    }
    

    行内元素的居中可以用下面属性:

    .box {
        text-align: center;
    }
    
    • 单行文本溢出加“...”如何实现?

    可使用下面的属性

    .card > h3{
      white-space: nowrap; /*文本不转行*/
      overflow: hidden; /*当内容溢出元素框时,溢出部分被修剪,且不可见*/
      text-overflow: ellipsis; /*当内容溢出元素框时,显示省略符号来代表被修剪的文本*/
    }
    

    具体表现为:


    • px, em, rem 有什么区别?

    px:pixel,像素的缩写,对元素进行大小设置时的常用单位:

    .box {
        width: 200px;
        height:100px;
    }  /*对box设置其宽度为200px,高度为100px*/
    

    em:相对度量单位,使用时要指定一个比例因子:

    font-size: 1.2em; /*字体大小为父元素字体的1.2倍*/
    

    rem:与em类似,不过其相对于根元素对字体进行设置:

    font-size: 1.2rem; /*字体大小为根元素字体的1.2倍*/
    
    • 解释下面代码的作用?为什么要加引号?字体里\5b8b\4f53代表什么?

    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    } 
    

    对body进行设置,字体高度12px,行高为字体高度的1.5倍;后面则是对body进行字体的选择,选择优先度从左到右依次下降;
    加引号是因为字体名称里有空格,去掉引号有可能会误成为另一属性,导致出错;
    \5b8b\4f53是Unicode编码,代表的是宋体。

    相关文章

      网友评论

          本文标题:css样式1

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