• home > webfront > style > css3 >

    css一些易忽视的点—iCss问题个人汇总

    Author:zhoulujun@live.cn Date:

    这段时间把《谈谈一些有趣的CSS题目》系列全部看了一遍,发觉自己认为前端高手的我对css还是有很多不甚了解。今天也来总结下相关知识目录索引。

    层叠顺序(stacking level)与堆栈上下文(stacking context)

    在研究ie6的position:fixed;bug时候,顺带研究下了stacking level,了解如此规则:

    1、后面的代码模块会覆盖前面的代码模块。2、模块的z-index越大,越在上面。3、用fireFox查看层叠

    再之后就是张鑫旭的《深入理解CSS中的层叠上下文和层叠顺序


    层叠顺序(stacking level)与堆栈上下文(stacking context).png

     CSS默认属性与属性继承 initial、inherit 和 unset

    css默认被后代inherite的属性列表:

    1. 文字相关的

      1. 字体相关:font:font-style | font-variant | font-weight | font-size | line-height | font-family

      2. 排版相关:letter-spacing,line-height,text-align,text-indent,white-space,direction

      3. 文字设置:color,text-transform,

    2. 表格相关:border-collapse,border-spacing,caption-side,empty-cells

    3. 列表相关:list-style:list-style-type | list-style-position | list-style-image 

    4. 布局:z-index,cursor,visibility,quotes

    5. 听觉:azimuth richness,voice-family

    unset:  默认继承则继承,否则initial。个人觉得这个属性就是吃饱撑的


    CSS盒模型

    1265396-20171119143703656-1332857321.jpg

    这里容易忽视  box-size去影响布局。

    行内元素也是有盒模型的,但是有几点要注意:

    对于非替换元素,比如a,span标签等

            1、行内元素,margin,只有左右,没有上下。

            2、行内元素border,padding上下左右均可设置,但是border-top和padding-top到页面顶对于替换元素,比如input,img标签

            margin,padding,border都有效果

    盒模型的padding、marging 上下百分比计算:

    默认padding,margin上下百分比值是取取宽度,设置writing-mode:vertical-lr;改变计算

    具体查看《如何考察前端对css盒模型的熟悉度?

    推荐文章:《深入理解css盒子模型

    IFC、BFC、GFC 与 FFC 

    推荐两篇文章:

    IFC、BFC、GFC 与 FFC 知多少

    CSS深入理解流体特性和BFC特性下多栏自适应布局

    font字体设置

    字体分类:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)

    font-family不要设置中文,如:'宋体',而是simsun或者unicode编码:'\5b8b\4f53'

    兼顾中西、西文在前,中文在后、兼顾多操作系统、以字体族系列 serif 和 sans-serif 结尾

    字体渲染:

    Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;

    网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;

    假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;

    渲染时出现字符不在字体可渲染范围内,就会出现, fallback 机制,具体参看:《再探究字体的渲染规则及 fallback 机制



    转载本站文章《css一些易忽视的点—iCss问题个人汇总》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2016_0224_7641.html