zoukankan      html  css  js  c++  java
  • css 的包含块 、负外边距,字体,文本行高

    一、包含块
    目的:确定元素的位置和相对大小(%)

    1.正常文档流元素和浮动元素 ---- 父元素的 content-box
    2.绝对定位元素 ---- 父元素的 padding-box
    3.固定定位元素 ---- 视口

    二、负外边距

    document.documentElement.clientWidth; 视口宽度

    window.onresize 监控视口改变

    三、字体

    字体简写:
    当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值

    字体大小:
    默认是 16px
    在Chrome 最小字体只能设置到 12px

    字体族
    衬线字体 笔画起始位置有修饰,横竖宽度不同
    非衬线字体 笔画起始位置没有修饰,横竖宽度相同


    四、文本

    水平对齐(text-algin)
    设置在块元素中(指定宽度)

    让块元素中的文本,行内元素(内联元素 inline),行内块(inline-block ,img input)一行的水平方向对齐。


    行高

    设置在块元素中(指定宽度,高度)

    当 行高 = 元素高度时,让块元素中的文本,行内元素(内联元素 inline) 在一行中的的垂直方向对齐。

    行内块元素需要设置 垂直对齐 (vertical-align: middle )


    行高计算:
    当行高的值是 number(数字) 是基于元素的文本大小计算

    行高对父元素高度的影响:
    当父元素未指定高度,行高撑起父元素的高度。


    垂直对齐 (vertical-align)

    1、给行内块元素设置垂直对齐,设置在行内垂直方向的位置


    2、给行内元素设置垂直对齐,设置在行内垂直方向的位置


    3、给行<td>,或者 display: table-cell的元素设置垂直对齐,

    让其文本内容,后代元素在元素自身的垂直方向对齐。

    五、背景


    区别背景的使用场景: 不重要的网站信息,图标。

    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . ` . .
  • 相关阅读:
    LeetCode题解 | [简单-数组] 485.最大连续1的个数
    PAT乙级真题 | 1032 挖掘机技术哪家强
    [leetcode]两个列表的最小索引总和
    【leetCode】两个数组的交集
    手写hashMap(非红黑树)
    Redis 删除数据后不能自动释放内存的问题
    Spring @Async/@Transactional 失效的原因及解决方案
    完全平方数问题
    用队列实现栈
    memcached安装踩坑
  • 原文地址:https://www.cnblogs.com/wushanbao/p/6862757.html
Copyright © 2011-2022 走看看