CSS学习笔记:长度值和颜色
2016-10-31 10:44
274 查看
长度值
demo
相对字体
em
1em:父元素的font-size大小。em会继承父元素的字体大小,因此其实是相对于父元素的font-size进行计算的。
因为em是相对于父元素进行计算的,因此如果一层一层嵌套:
html { font-size: 14px; } div { font-size: 1.2rem; }
<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>
每一层都会在上一层的基础上重新计算font-size大小,而我们有时不希望出现这种叠加计算的效果,这时就要使用rem。
rem
‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是<html>元素了。
这样的话每一个元素都是相对于根元素的font-size大小计算,不会形成上面那种根据父元素计算而层层叠加的效果。
ex
为当前字体小写字母x的高度。在很多字体中 1ex ≈ 0.5em。
相对视口
vw,vh
响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。vw:相对于视窗的宽度。视窗的宽度是100vw。
vh:相对于视窗的高度。视窗的高度是100vh。
这里的视窗指的是浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight,不包含任务栏标题栏以及底部工具栏等。
这三个相对于视窗的单位有一系列应用:
视区覆盖
.element { width: 100vw; height: 100vh; }
然后再将此元素定位到视区左上角,就可以实现视区的完整覆盖。
可以用来实现模态框的半透明覆盖层。
vmin,vmax
vmin视口高度和宽度之中的最小值的 1/100。
vmax
视口高度和宽度之中的最大值的 1/100。
我们应该在什么场景下使用这两个单位呢?
假设有一个元素,你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位,并赋予其低于100的值就可以做到了。再来个栗子,可以这样定义一个至少有两个边触摸到屏幕的方形:
.box { height: 100vmin; width: 100vmin; }
如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边):
.box { height: 100vmax; width: 100vmax; }
前景色
/* A CSS Level 1 color */ color: red; /* The only color added in CSS Level 2 (Revision 1) */ color: orange; /* CSS Level 3 color, sometimes called a SVG or X11 color */ color: antiquewhite; /* The color 'lime' with the 3-character dash notation */ color: #0f0; /* The color 'lime' with the 6-character dash notation */ color: #00ff00; /* A color using the available functional notations */ color: rgba( 34, 12, 64, 0.3);
要设置一个元素的前景色,最容易的办法就是利用属性color。
对于非替换元素,color属性设置了元素中文本的颜色。
影响边框
color值可以影响元素周围的边框。默认地前景色会应用到边框,要覆盖这种行为,最基本的办法就是使用属性border-color。
影响表单元素
从理论上讲也可以为表单元素设置color值。select{ color:rgb(33%,33%,33%); }
这会令select元素的文本变成暗灰色。
可能还会设置select元素周围边框的颜色,也可能不会,取决于用户代理。
另外,还可以设置input元素的前景色,会把所设置的颜色应用到所有输入元素,从文本框到单选按钮再到复选框都会使用这种颜色。
可以利用属性选择器来为不同类型的input元素指定不同的文本颜色。
input[type="radio"]{color:#333} input[type="checkbox"]{color:#666}
继承颜色
color属性是可以继承的。因此如果声明了body元素的前景色,这会把所有没有其他样式的文本变成设置的颜色(像锚就不包括在内,锚有自己的颜色样式)。相关文章推荐
- HTML+CSS笔记 CSS中级 颜色&长度值
- CSS从基础到熟练学习笔记(二) RGB颜色对照表以及详细介绍CSS中的三种颜色表示方式
- HTML&CSS基础学习笔记1.30-颜色的表达
- CSS学习笔记(五) 颜色声明&元素定位
- HTML&CSS基础学习笔记1.31-像素和相对长度
- HTML&CSS基础学习笔记1.28-颜色的表达
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- HTML&CSS基础学习笔记1.29-像素和相对长度
- H5学习笔记——CSS文本设置属性&颜色表示法
- <学习CSS>第三天笔记-css外观属性(颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影)快捷方式、综合案例、引入CSS样式表(内部样式表、行内式、外部样式表)、三种样式表总结
- 【HTML5学习笔记】18:CSS颜色和度量单位
- css知识笔记(四)——代码简写、颜色值、长度值
- css学习之路(4)--颜色与长度(基础完)
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- XHTML+css,web标准学习笔记2——名字空间
- CSS学习笔记-附加篇(CSS的超级技巧)
- css学习笔记(3)图文混排 分级 鼠标
- CSS学习笔记-附加篇( 新浪大通栏Tab样式)
- CSS学习笔记-附加篇(web标准化设计:常用的CSS命名规则)
- CSS入门学习笔记