美文网首页
HTML5布局之路 文本与特殊布局

HTML5布局之路 文本与特殊布局

作者: scoyzhao | 来源:发表于2018-03-16 14:34 被阅读0次

    一、文本:
    背景:background,复合写法,类似于border,可以同时设置颜色、图片、重复、定位、关联(滚动)等。
    默认情况下背景会横纵重复。

    透明:兼容写法:
    {
    filter: alpha(opacity = 50);
    opacity: 0.5;
    }
    透明度会影响后代。可以通过z-index来解决。
    还可以通过rgba控制透明度。

    段落:
    line-height: 行间距
    text-decoration:文本修饰,如underline下划线
    text-indent:首行文本缩进,用em好一点
    text-align:水平对齐方式
    vertical-align:垂直(有bug,不建议使用)
    那么如何居中呢? 用定位。

    word/letter-spacing:间距,单词和字母
    word-break:自动换行,break-all允许单词内换行

    字体样式:
    color
    font-family:字体系列
    font-size:大小
    font-style:倾斜
    font-weight:粗细
    font复合样式,一般不使用

    网络字体:用@font-face,先字体系列,然后src


    二、定位布局

    当页面中出现多个元素层叠状态的时候,用定位布局。

    定位:position
    static 默认值
    fixed 相对于浏览器布局
    relative 相对于自己本来的位置进行定位,通常用来作为绝对定位的容器
    absolu 绝对定位,父元素有定位过的就以最近的去定位,否则以html标签进行定位,会收到父元素padding的影响

    都需要left top right bottom进行激活。

    相对定位的元素不会脱离文档流。绝对定位的元素会脱离文档流。当元素脱离文档流就可以为元素设置盒模型属性,但是margin属性中的auto会失效。

    z-index越大,越在上面。

    界限控制:max/min-height/width
    伪元素:::before,::after,内容可以用content属性。

    相关文章

      网友评论

          本文标题:HTML5布局之路 文本与特殊布局

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