CSS基本单位

相对单位:

px  2.54cm = 96px

em  假定默认字体尺寸为14px,nem = n * 14px,若找不到当前对象,找父级对象,没有父级对象找body

.outer,.inner{

  font-size:2em;

}

<div class="outer">

  <div class="inner">

    我是inner     结果为2 * 2 * 16px

  </div>

</div>

rem  只找到html的根对象

.outer,.inner{

  font-size:2rem;

}

<div class="outer">

  <div class="inner">

    我是inner     结果为2 * 16px

  </div>

</div>

时间: 2024-10-16 12:06:31

CSS基本单位的相关文章

ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once,Run Anywhere

ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNative本省的局限性,比如不支持CSS,不支持DOM操作,不支持选择器等等,而没有办法实现Js代码的全平台统一,现在通过全新的ReactMix框架,你可以让你的代码不仅可以在ReactNative上跑起来,实现安卓和iOS代码的统一,而且同样一份代码也可以在PC,H5上跑起来,到底有多神气?让我们来

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

CSS 高级

1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内容.边框.内边距 和 外边距 的方式. CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:外填充也叫外边距(margin),边框(border),内填充也叫内边距(padding)和实际内容(content).盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 如下 CSS

如鹏网学习笔记(八)CSS

CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性,比如color.font-size等.如果希望html内容显示某个效果,就应用对应的CSS样式属性即可 3,CSS对样式的控制是非常精确和精细的 二.CSS语法 1,CSS语言的基本单位是样式声明:proppertyName:value; 2,CSS语言的使用方式: 1,把CSS样式声明作为HTM

html/css随笔

那个,,,由于上一篇发的那个,在前端哪里搜索不到,我感觉是我上一篇弄的标题不对了,所以现在在发一篇,应该在前端哪里就能直接找到 声明下,本人小白,望大神看了勿喷,多多指点,下面咱们进入正题. 为了界面好看点,先在WPS编写了一遍,弄了几个框架图片,会添加一些色彩,更容易让大家看明白,过一段时间就会发Java的,大概也就是一周一 篇,,或者是一周两篇博客,因为现在正在学,只能一边学,然后在星期的时候把学到的总结一下,发出来学到的东西,给大家分享,希望大家喜欢... 1.HTML的基础 HTML是用

css layout入门(转)

元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为none的元素则不生成盒. 除了元素之外,HTML中的文本节点也可能会生成盒. 盒模型 一个盒包括了内容(content).边框(border).内边距(padding).外边距(margin).下图展示了盒模型的直观意义: 盒的尺寸(width与height)定义受到box-sizing属性的影响

CSS layout入门

元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为none的元素则不生成盒. 除了元素之外,HTML中的文本节点也可能会生成盒. 盒模型 一个盒包括了内容(content).边框(border).内边距(padding).外边距(margin).下图展示了盒模型的直观意义: 盒的尺寸(width与height)定义受到box-sizing属性的影响

CSS Why

前面的话 在CSS学习目录中,已经详细地介绍了CSS如何使用.知其然,还要知其所以然.本文将介绍CSS各部分出现的原因,仅限个人理解,如有不妥,欢迎交流 Why CSS 早期的大多数网站标记几乎完全由表格和font元素组成,且对于所要表现的内容不能传达任何实际含义,使文档可用性降低,且不易于维护.于是1995年,W3C发布了CSS草案,试图解决结构与样式混杂的问题 1.如果考虑结构与样式彻底分离,且样式表可能用于多个HTML文件,使用外部样式表 2.如果样式表仅用于当前页面,且减少HTTP请求数

CSS规范中的BFC

一.什么是BFC 1.Formatting context:页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系和相互作用. 2.Box:css布局的基本单位.元素的类型和display属性决定了这个box的类型.不同类型的box,会参与不同的Formatting Context(决定如何渲染文档). block-level box:display属性是block.list-item,table的元素,参与block Formatting context in