美文网首页
CSS那些事儿

CSS那些事儿

作者: 阿伦的前端成长之路 | 来源:发表于2017-01-18 19:14 被阅读0次

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别

    • 1.块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
    • 2.行内元素:span, strong, em, br, img , input, label, select, textarea, cite
    • 区别
      1. 块级元素占据整行,行内元素不占据整行,可以填充进一行时水平排开
        2.块级元素内部可以包裹块级和行内元素,而行内元素内部只能包裹行内元素
        3.块级元素默认宽度与浏览器宽度一样,与内容无关;行内元素宽度只与内容有关;
        4.行内元素设置width,height无效(可以设置line-height)
        margin上下无效左右有效,padding上下无效左右有效。

    2.什么是 CSS 继承? 哪些属性能继承,哪些不能?

    • css继承:设置父级元素,子元素的样式自动和父元素样式一致。有些属性支持继承有些不支持
    • 可以继承属性:
    字体属性
    font、font-family:规定元素的字体系列、font-weight、font-size、font-style:定义字体的风格
    文本系列属性:
    text-indent:文本缩进、text-align:文本水平对齐、line-height:行高、word-spacing、letter-spacing、text-transform:控制文本大小写、direction:规定文本的书写方向
    color:文本颜色
    元素可见性:visibility
    表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
    列表布局属性:list-style-type、list-style-image、list-style-position、list-style
    生成内容属性:quotes
    光标属性:cursor
    
    • 不可以继承属性:
    display
    文本类:
    vertical-align:垂直文本对齐
    text-decoration:规定添加到文本的装饰
    text-shadow:文本阴影效果
    white-space:空白符的处理
    unicode-bidi:设置文本的方向
    盒子模型的属性:width、height、margin 、margin-XXX、border、border-XXX、。。。基本都不行
    背景属性:都不行
    定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
    声音样式属性
    

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

    元素类型 居中方法
    块级元素居中 margin: 0 auto;
    行内元素居中 text-align : center;

    4.单行文本溢出怎么办如何实现?

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    5.px em rem有什么区别?

    • . px 像素px是相对于显示器屏幕分辨率而言的
    • . em 相对于当前对象内文本的字体尺寸
    • . rem 相对于HTML根元素尺寸大小

    6.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

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

    设定字体大小和字体类型,因为有space如果没有引号,会按照两个元素处理
    数字和字母代表unicode-对应宋体字体和微软雅黑字体

    编码类题目:
    1.效果1
    2.效果2
    3.效果3
    4.关于画三角形

    屏幕快照 2017-01-18 下午6.39.34.png ![ ![ ![ ![屏幕快照 2017-01-18 下午6.45.55.png](https://img.haomeiwen.com/i4289237/d92daef57196606d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ] ](https://img.haomeiwen.com/i4289237/33adc878eb710a92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://img.haomeiwen.com/i4289237/209d979aca21103f.png?imageMogr2/auto- orient/strip%7CimageView2/2/w/1240)

    5.效果5

    相关文章

      网友评论

          本文标题:CSS那些事儿

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