nt-size: 200%;
color: white;
height: 150px;
border: 2px solid black;
}
.boxes:nth-child(1) {
background-color: red;
width: 650px;
}
.boxes:nth-child(2) {
background-color: blue;
width: 75%;
}
这给了我们以下结果:
在这里,我们给两个divs一些 [margin
] [height
] [font-size
] [border
] 和 [color
] 。
然后我们给第一个div和第二个div不同的 [background-color
],所以我们可以很容易地区分开他们。 我们还将第一个div的 [width
]设置为650px,将第二个div的宽度设置为75%。 这样做的效果是,第一个div始终具有相同的宽度,即使视口大小被调整(当视口变得比屏幕更窄时,它将从屏幕上消失),而第二个div的宽度随着视口(viewport )的变化而变化,使其始终保持其父元素的75%。 在这个例子中,div的父元素是<body>
元素,默认情况下是视口宽度的100%。
注意: 您可以通过调整本文中的浏览器窗口来看到这种效果;
margin
属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是: margin-top, margin-right, margin-bottom 和 margin-left 。指定的外边距允许为负数。
font-size
CSS 属性中指定字体的大小。因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。
border
属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值: border-width, border-style, border-color。
background-color
会设置元素的背景色, 属性的值为颜色值或关键字transparent
二者选其一。
width
属性指定了元素内容区的宽度. 内容区在元素padding,border和margin里面。
我们也可以设置font-size
的百分比为200%。它将和你预计的工作方式有一点不同,但这是讲得通的,它的新大小是相对于父容器的字体大小的,就像em
一样。在这种情况下,父容器的字体大小为16px——页面的默认值,所以计算的值为16px的200%,或32px。这和em
的风格确实很类似—200%基本上和2em
一样。
这两种不同的框布局类型通常称为动态(流体)布局(如浏览器视口大小的变化),固定宽度布局(不管怎样都保持不变):
- 可以使用动态布局来确保标准文档始终适合于屏幕,并且可以在不同的移动设备屏幕大小上表现良好。
- 一个固定宽度的布局可以用来保持在线地图的大小相同;浏览器视口可以在地图上滚动,只在一个时间内查看一定数量的地图。您可以立即看到的量取决于您的视口有多大。
颜色
CSS中指定颜色的方法有很多,其中一些是最近实现的。CSS中到处都可以使用相同的颜色值,无论是指定文本颜色、背景颜色,还是其他任何颜色。
现代计算机中可用的标准颜色系统是24位,通过不同的红、绿、蓝通道,每个通道有256种不同的值,从而显示出大约1670万种不同的颜色。 (256 x 256 x 256 = 16,777,216.)
让我们运行不同的可用类型的颜色值。
关键词(色彩关键字)
最简单、最古老的颜色类型,CSS颜色关键词。这些都是特定的字符串代表特定的颜色值。例如red代表红色。
这很容易理解,尽管它只能让我们指定明显的颜色基元。有大约165个不同的关键字可用于现代Web浏览器-见 full color keyword list.
你可能会在工作中经常使用诸如红色、黑色和白色这样的纯颜色,但除此之外,你还想使用另一种颜色系统。
十六进制值
下一个常用的颜色系统是十六进制颜色或十六进制代码。每个颜色包括一个哈希/磅符号(#
)和其后面紧跟的六个十六进制数,其中每个十六进制数可以是0和F之间的一个值(一共16个),0123456789abcdef。每对十六进制数代表一个通道(红色、绿色或者蓝色)允许我们指定256个可用值。 (16 x 16 = 256.)
例如,这个代码:
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
background-color: #ff0000;
}
/* equivalent to the blue keyword */
p:nth-child(2) {
background-color: #0000ff;
}
/* has no exact keyword equivalent */
p:nth-child(3) {
background-color: #e0b0ff;
}
给出以下结果:
这些值比较复杂,不太容易理解,但是它们比关键字更灵活——您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。
RGB
我们要讨论的第三个方案是RGB。一个RGB值是一个函数rgb() -这是给定的三个参数表示的红色,绿色和蓝色通道的颜色值,在大致相同的方式作为十六进制值。与RGB的区别在于,每个通道不是由两个十六进制数字表示的,而是由0到255之间的十进制数表示的。
让我们重写上面那个例子来使用RGB颜色:
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
background-color: rgb(255,0,0);
}
/* equivalent to the blue keyword */
p:nth-child(2) {
background-color: rgb(0,0,255);
}
/* has no exact keyword equivalent */
p:nth-child(3) {
background-color: rgb(224,176,255);
}
这给出了和上面例子同样的结果。
RGB值的支持度与十六进制不相上下,在你的工作中你可能不会遇到任何不支持它们的浏览器。
RGB值可以说比十六进制值更直观,更容易理解。
注意: 为什么是255而不是256?计算机系统倾向于从0计算,而不是从1计算。所以允许256个可能的值,RGB颜色在0-255范围值,不是1-256。
HSL
支持度比RGB稍微差一点的是HSL(不支持旧版本IE