Web前端程序员必须掌握的技巧

7个Web前端程序员必须会用CSS技巧

    1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

    2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。

    3、边框宽度不允许使用百分比值

    4、width：100%当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。5、line-height

    line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

    6、ex和 ch单位

    ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算；

    ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em；ex和 ch单位，类似于 em和 rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。ch单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。

    7、使用calc时运算符之间要有空格 ，否则可能无效。

    本文由培训无忧网达内教育课程顾问老师整理发布，更多课程信息可关注web前端培训或添加老师微信：15033336050

      注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-6554.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注web前端频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050