深入理解CSS中的长度单位

前面的话本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识绝对长度单位绝对长度单位代表一个物理测量像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终,他们被按照像素处理英寸in(inches) 1in = 2.54cm = 96px 厘米cm(centimeters) 1cm = 10mm = 96px/2.54 = 37.8px 毫米mm(millimeters) 1mm = 0.1cm = 3.78px 1/4毫米…

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时…

深入理解css中的margin属性

深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况第一部分:margin--基础知识要介绍margin的基础知识,我们不可回…

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t…

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什…

如何理解CSS中的浮动：其实他就像乘坐扶梯一样

只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想的位置,而且像个磁铁一样紧紧的靠在div旁边. 为了理解浮动这个概念,我个人曾经花费了很长的时间.有一次,我读到了一篇有关浮动的文章,觉得它说的很有道理,于是去尝试文章中的方法.但是写完代码之后,还是失败了--我也只好从头再来. 如今我已经成功的理解了这个概念,我也想要尽我最大的努力让其他人少走弯路…

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显…

CSS中的长度单位及颜色表示

CSS中的长度单位及颜色表示长度单位: px:像素,绝对单位 em:相对单位,如果用于font-size属性本身,则是相对于父元素的font-size.若用于其他属性(width,height),则是相对于本身元素的font-size.所有未经调整的浏览器都符合: 1em=16px. rem:相对字体长度单位,只相对根元素即html元素字体大小. fr:自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配. 颜色表示: 十…

理解css中的position属性

理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定方式移动元素 position: relative position: absolute position: fixed static类型定位是每个元素默认的position,让元素定位在正常的文档流中 relative类型定位设置的relative.absolute.fixed值都叫做rela…

深入理解CSS中的margin

1.css margin可以改变容器的尺寸元素尺寸可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo…

深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

深入理解css中position属性及z-index属性请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute,sticky.最后将会介绍和position属性密切相关的z-index属性. 第一部分:po…

CSS中各种长度单位总结

在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; background-color: red; } </style> <div class="parent"> <div class="child">&l…

[翻译]解读CSS中的长度单位

测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小了.这个教程中,我们将看看在CSS中,使用单位的不同,在什么情况下使用什么样的单位,以及如何去使用它们. 绝对长度单位绝对单位在物理世界真实测量的数字表示.这些单位不依赖于屏幕大小和分辨率.结果就是,绝对长度单位不能很好地在数字设备上使用,或分辨率未知的情况下使用.这种单位更适合,为物理媒介设计时…

深入理解CSS中的空白符和换行

前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: nowrap;到底它们还有些什么属性值,以及有什么对应的用法呢?本文就空白符和换行的内容做详细介绍和梳理空白符定义空白符是指空格.制表符和回车:HTML默认已经把所有空白符合并成一个空格 white-space 值: normal | nowrap | pre | pre-wrap | pre…

理解css中的line-height

在css中,line-height有下面五种可能的值:我们来看看w3c中列出如下可能值: normal:默认,设置合理的行间距. number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length: 设置固定的行间距. %: 基于当前字体尺寸的百分比行间距. inherit:规定应该从父元素继承line-height属性的值. 下面我们分别来看看上面五种具体介绍: 一:百分比(%): 比如如下HTML代码: <h1>我是龙恩</h1> <p>我是中国人&l…

真正的能理解CSS中的line-height，height与line-height

https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别. 基本概念行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font…

理解CSS中的数学表达式calc()

前面的话数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容定义数学表达式calc()是calculate计算的缩写,它允许使用+.-.*./这四种运算符,可以混合使用%.px.em.rem等单位进行计算兼容性: IE8-.safari5.1-.ios5.1-.android4.3-不支持,android4.4-4.4.4只支持加法和减法.IE9不支持用于backround-position [注意…

如何理解css中的float

最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动. 上述这就是我们对于CSS中的浮动的最初步的认识了.下面我就对float进行了一些简单的研究. 有几点需要注意: 1. 浮动元素会被自动设置成块级元素,相当于给元素…

理解css中min-width和max-width，width与它们之间的区别联系

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适用于网站的自适应.下面将具体介绍下关于min-,max-的区别和联系: 1.min-width,max-width的权重高当元素设置了这2个属性的时候,即使在width后面使用了!important,如果元素实际宽度没在min-width,max-width的范围内,也不会显示width中的值,例…

理解css中Grid布局，在项目中如何实现grid页面布局

简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块. 使用Gird的好处 1.布局清晰明了,摆脱了模板中使用不同标签下基于浮动,定位的手动计算过程. 2.类似于talbe布局,不同点在于Gird在css中实现,而table在html中实…

理解css中的 content：" " 是什么意思

css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 !DOCTYPE,那么 IE8 及更高版本才支持 content 属性.…

理解CSS中BFC

BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-blocks , table-cells , table-captions ,和overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文 . 上面的引述几乎总结了一个 BFC 是怎样形成的.但是让我们以另一种方式来重新定义以便能更好的去理解.一个…

深入理解css中vertical-align属性

一.为什么要写这篇文章今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <meta charset="utf-8"/> <style> div{ width: 100px; height: 100px; border:1px solid red; display: inline-block; } .align{ /* vertical-align…

深入理解CSS中的margin负值

前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单,实际上却蛮复杂,本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 […

深入理解 CSS 中的行高与基线

1.基本概念 1. 基线.底线.顶线.中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高.一般情况下,也可以认为是相邻文…

理解css 中的position五个属性

在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). fixed :生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom&q…

《转载》深入理解 CSS 中的行高与基线

这篇文章总结的很好,故转载收藏. 1.基本概念 1. 基线.底线.顶线.中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行…

理解 CSS 中的伪元素 :before 和 :after

CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定听说过这个词,尤其是当你一直关注着我们的教程.点此浏览原作者的其他文章事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after.但是,就本文而言,我们将把我们探讨的范…

理解CSS中的BFC(块级可视化上下文)[译]

开篇一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素.它们将会建立一个新的块级格式化上下文. 上述定义已经非常具体的描写叙述了块级格式化上下文(Block Formatting Context)是怎样形成的,为了方便起见.文中均用BFC取代. 如今,让我们用一种简单的方式对其进行又一次定义: BFC也是HTML中的一个盒子(看不见而已),仅仅有满足…

理解css中的position-static\relative\fixed\absolute

position属性有四个值: static(静态定位):是默认值,不会被特殊的定位,遵循正常的文档流对象,对象占用文档空间,该方式下,top.right.bottom.left.z-index等属性无效. relative(相对定位):不添加额外属性的情况下,和static表现一样,当使用top.bottom.left.right的的时候,会使其偏离正常位置.而其他的元素不会调整位置来弥补它偏离后剩下的空隙.当元素设置了margin\padding属性后,会占据文档空间,影响其他元素. .di…

【深入理解CSS中的长度单位】的更多相关文章