美文网首页
CSS 单位理解

CSS 单位理解

作者: petertou | 来源:发表于2016-05-26 14:35 被阅读0次

    CSS 一共有四种引入方式

    • 外联式
      1.link
      2.@import url
    • 嵌入式
      style 标签一般放在head部分
      <style type="text/css">
      p {
      color:red;
      }
      </style>
    • 行内式
      <p style="color:red;">Hello,World</p>

    外联式两种方式的区别

    • 1.link属于XHTML标签 @import属于CSS2.1以后引进来的。
    • 2.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
    • 3.@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。

    文件路径../main.css、./main.css、main.css有什么区别

      1. ../main.css 是指的是main.css上一层文件夹的路径。
      1. ./main.css 与 main.css 没有什么本质区别,都是指的是和该文件同一层的路径。

    console.log是做什么用的

    • 用于调试JS的代码,相对于alert(),可以看见JS中对象的内容。

    text-align有几个值,分别有什么作用

    text-align这个属性主要控制文本对齐方式
    text-align 有三个值:left right center justify inherit
    left : 文本向左对齐
    center : 文本居中对齐
    right:文本向右对齐
    justify:文本两端对齐
    inherit:从父元素哪里继承对齐方式

    px、em、rem分别是什么?有什么区别?如何使用

    px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
    em:相对长度单位。相对于当前对象内文本的字体尺寸。
    rem:rem是新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

    • rem和 em单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

    • em单位基于使用他们的元素的字体大小。

    • rem 单位基于 html 元素的字体大小。

    • em 单位可能受任何继承的父元素字体大小影响。

    • rem 单位可以从浏览器字体设置中继承字体大小。

    • 使用 em单位应根据组件的字体大小而不是根元素的字体大小。

    • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

    • 使用rem单位,除非你确定你需要 em单位,包括对字体大小。

    • 媒体查询中使用 rem单位

    • 不要在多列布局中使用 em或 rem,改用%。

    • 不要使用 em或 rem,如果缩放会不可避免地导致要打破布局元素。

    参考了 rem em 彻底研究 彻底弄懂css中单位px和em,rem的区别

    Chrome 工具

    如下代码,设置 p为几 rem,让h1和p的字体大小相等?

    设置P为6

    相关文章

      网友评论

          本文标题:CSS 单位理解

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