CSS 单位理解

CSS 一共有四种引入方式

  • 外联式
    1.link
    2.@import url
  • 嵌入式
    style 标签一般放在head部分
  • 行内式

    Hello,World

外联式两种方式的区别

  • 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 工具

CSS 单位理解_第1张图片

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

CSS 单位理解_第2张图片

设置P为6

你可能感兴趣的:(CSS 单位理解)