zoukankan      html  css  js  c++  java
  • amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base

    一、总结

    1、盒子模型外margin,内padding,这里的内外指的边框

    2、border-boxAmaze UI 所有元素的盒模型设置为 border-box    -moz-box-sizing: border-box;

    3、em和px:根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px

    4、字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px 例如:font-size: 1.6rem; /* =16px */

    5、remrem 只跟基准设置关联,只要修改基准字号,所有使用 rem 作为单位的设置都会相应改变。 实例:html { font-size: 62.5%; }

    二、基础设置Base

    Amaze UI 定义的一些基础样式。

    CSS 盒模型

    曾几何时,IE 6 及更低版本的非标准盒模型被喷得体无完肤。IE 原来的盒模型真的不好么?最终,时间给了另外一个答案。 W3C 终认识到所谓标准盒模型在实际使用中的复杂性,于是在 CSS3 中增加 box-sizing 这一属性,允许用户自定义盒模型

    You tell me I'm wrong, Then you better prove you're right.

    King of Pop – Scream

    这就是 W3C 的证明。

    扯远了,Amaze UI 将所有元素的盒模型设置为 border-box。这下好了,妈妈再也不用担心你没计算好 paddingborder 而使布局破相了。咱来写样式,不是来学算术。

     Copy
     *,
     *:before,
     *:after {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }

    Box sizing

    参考链接:

    字号及单位

    Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便。然后在 body 上应用了 font-size: 1.6rem;,将页面字号设置为 16px

     Copy
    html {
      font-size: 62.5%;
    }
    
    body {
      font-size: 1.6rem; /* =16px */
    }

    与 em 根据上下文变化不同,rem 只跟基准设置关联,只要修改基准字号,所有使用 rem 作为单位的设置都会相应改变。

    当然,并非所有所有浏览器的默认字号都是 16px,所以在不同的浏览器上会有细微差异。

    另外,一些需要根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px

    参考资源:

  • 相关阅读:
    SRM 574 250 DIV2
    SRM 575 250 DIV2
    SRM 577 250 DIV2
    20181211-python1119作业郭恩赐
    20181207作业-郭恩赐
    python1119-20181206作业-郭恩赐提交
    python1119-20181205作业-郭恩赐提交
    python1119作业1-郭恩赐提交
    py1119_Linux学习_第二周总结
    小白都能看懂的block
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9006045.html
Copyright © 2011-2022 走看看