HTML&CSS基础篇之十二：CSS盒子模型

时间：2022-11-18 22:55:39

代码

body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

h1, h2 {
color: #007e7e;
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

#guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, Serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
}

盒子模式（the box model)

CSS就是这样看待元素的，它把每个单一的元素看作是一个盒子。

从CSS的角度看，每个元素是一个盒子
每个盒子由内容区及可选的补白、边框和边界组成。
内容区包括内容（例如文本或图像）
内容区周围是可选的、透明的补白。
可选的边框可以放在补白的周围。
可选、透明的边界包围着所有的东西。

所有的元素都被看成一个个盒子。
段落，标题，块引用，列表，列表项目等甚至内联元素如<em>和<a>也被CSS看作盒子。

用CSS可以控制盒子的各个方面：内容周围补白的大小、元素由没有边框（以及类型和大小），以及元素之间有多少边界。

内容区是指什么？

每个元素都以某些内容开始，比如文本或图像，这部门内容被放置
在一个大小正好能包含它的盒子里。注意内容区的内容和盒子边缘之间没有空白。

内容区包含的元素内容，其大小正好足够包含内容。

我们在内容区周围画一个边缘，只是为了让你知道它有多大，在浏览器中内容区周围并没有可见的边缘。

补白是指什么？

任何盒子在内容区周围都能有一层补白。补白是可选的，所有不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白。

补白是透明的，本身没有颜色或修饰。

浏览器在内容区周围添加可选的补白。

用CSS可以控制整个内容区周围甚至任何一侧（上，下，左，右）的补白宽度。

边框是指什么？

元素周围可以有边框，并且是可选的。边框包围着补白，因为它是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度、颜色、样式。

注意补白把内容区和边框分隔开了。

用CSS可以控制边框的宽度、颜色和样式。

边界是指什么？

边界也是可选的，包围着边框。有了边界，就可以在同一页上的元素之间添加空间。如果两个盒子相邻，边界就相当于它们之间的空间。跟补白一样，边界也是透明的，本身没有颜色或修饰。

用CSS可以控制整个边界或某一侧边界（上下左右）的宽度。

这是整个元素。最里面是内容区，被可选的补白包围着，又围了一层可选的边框，最外一层是可选的边界。

补白和边界有什么区别

边界是元素之间的空间，而补白是内容周围多出来的空间。

如果有可见的边框，补白在边框里面而边界在边框外面。

把补白想成元素的一部分，而边界包围着元素并把它与周围的内容隔离开。

补白和边界都用于提供更多可见的空间，不能直接给补白或边界添加颜色或别的修饰，但因为它们是透明的，就会呈现背景颜色或背景图像。

元素的背景颜色（或背景图像）会延伸到补白底下，但不会到边界。

补白用法

padding
可以用它在内容周围设置相同大小的补白。可以把这个属性设置成多少像素或边框里面部分的百分之几。

边界用法

margin
和补白一样，可以用百分数或像素定义边界。

盒子模型细节应用

插入背景图像

background-image: url(images/background.gif);

background-image属性有一个特定的用途，就是给元素设置背景图像。不能用它在页面上添加图像—为此你绝对需要用<img>元素。

背景图像是单纯的外观，用background-image的唯一目的是提高元素的吸引力。而另一方面，HTML&CSS基础篇之十二：CSS盒子模型元素，用来显示在页面中有更大作用的图像，比如照片或logo。

background-image更多是用来制造视觉效果。

背景图像跟背景颜色一样，只出现在内容区和补白之下，没有延伸到边框之外的边界。

background-image: url(images/background.gif);

background-image属性被设置成URL，可以是相对路径或完整的URL
注意URL没有加引号。

background-repeat: norepeat; 背景图像不重复。
background-position: top left;放在左上角

background-position属性用来设置图像的位置，可以用像素、百分数或top,left,right,bottom, center这些关键字定义。

background-repeat属性用来控制这种平铺效果。
默认背景图像是”tiled”，或者在背景上再三重复。
repeat 把图像设置为水平和垂直方向上都重复，这个是默认的格式。
no-repeat 图像只显示一次，不重复。
repeat-x 图像只在水平方向上重复。
repeat-y 图像只在垂直方向上重复。
inherit 继承父元素的值。

增加一侧的补白

padding: 25px;
padding-left: 80px;

用padding-left属性来增加左侧的补白。
先把四周的补白都设置成25px，然后再给左侧定义一个属性。
这里顺序很重要-如果交换了顺序就先设置了左侧的补白，然后总的补白属性就会把四周的补白全都设置成25px，包括左侧，就达不到目的。

如果在内容区本身周素需要更多可见的空间，就用补白；
相反地，如果想在元素之间或元素和页面之间有空间，就用边界。

增加一侧的边界

margin:30px;
margin-right: 250px;

把边界设置成30px，然后覆盖右侧的值，重新设置为250px
顺序同样重要。

边框快速指南

border-style属性用来控制边框的外观。一共8种边框样式，有实线、虚线、凸出线、凹进线等。
solid 一条实线
dotted 一系列点
double 两条线
dashed 虚线
groove 看起来像凹进页面里
inset 嵌入到页面中
outset 看起来像从页面升起的一块凸出
ridge 页面中凸出的边界

边框宽度
border-width属性用来控制边框宽度。可以用关键词或像素来定义宽度。
thin
medium
thick

边框颜色
border-color属性用来设置边框颜色。和设置字体颜色一样，可以用颜色名称、rgb值或十六进制代码定义颜色。

定义边框的一侧
跟边界和补白一样，也可以定义任何一侧(上下左右）的边框样式、宽度或颜色。
border-top-color
border-top-style
border-top-width

border-right-color
border-right-style
border-right-width

border-bottom-color
border-bottom-style
border-bottom-width

border-left-color
border-left-style
border-left-width

类与ID

当想应用一种样式到多个元素时就用类。
应用样式的只是一个元素并且页面上只有一个，就用ID
严格来说ID属性是命名唯一的元素的。

页面中的标题、页脚或导航条。这些在网页中有只有一个。
可以只给一个元素用类，但会有别人给这个类添加别的元素，那么你的元素就不再有唯一的样式。

ID

<p id="footer">Please steal this page, it isn't copyrighted in any way</p>

和类一样只需要添加属性ID并选择一个唯一的ID名。
和类不同的是，页面中只能有一个元素的ID为”footer”

每个元素只能有一个id
id名称必须以字母打头，后跟数字或字母。不允许有空格或特殊字符。
给元素设置id和把元素添加到类中的操作类似。仅有的不同之处是属性叫做”id”，而不是“class”,一个元素不能有多个id，而且同一个页面中不能有一个以上的元素用同一个id。

可以用类“冒充”id，但阻止这么做的原因有很多。
类是共享，共用
id是唯一
一个元素可以既有一个id又属于一个类！

CSS中如何使用id

选择一个具有id的元素和选择一个具有类的元素一模一样。
要通过一个元素的id选择它，在id前面加一个”#”（跟类比较，在类中类名称之间用一个”.”)就行了。

#footer {
color: red;
}

这条规则选择id为footer的任意元素。

p#footer {
color: red;
}

这条规则选一个id为”footer”的<p>元素。

类与id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。

在一些更加复杂的网页中，在一些页面上，一个id会被指派给一个段落，而在别的页上被指派给列表或块引用。

多样式表

如何先设计好一个公司的样式，然后允许各不么和休闲室经营这门去任意改变样式呢

一个样式表是为整个公司设计的
饮料部门可以给公司样式添加一些内容，甚至可以覆盖一些公司的样式。
西雅图休闲室也可以在他们的样式表中做自己的调整。

顺序很重要，一个样式表会覆盖在它之前连接的样式表中的样式。

样式表的顺序
它们从上到下排列，最下面的样式表优先权最高。

看到一个样式表，想把它作为页面的基础，你不用改变样式表，只要链接它，再把你自己的样式表放到下面来定义你想改变的内容就行了。

样式表 不仅仅用于浏览器

让PC屏幕、PDA或移动设备以稍有不同的格式输出网页的不同版本。
<link>元素有一个叫做media的属性，可以用来定义你的样式文件所需要的设备类型。

<link type="text/css" rel="stylesheet" href="lounge.css"/>
<link type="text/css" rel="stylesheet" href="lounge-screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print" />
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="handheld" />
  1. 如果没有提供媒体种类，样式文件就应用适用于所有设备。
  2. 用于PC屏幕
  3. 定义输出 打印
  4. 定义具有小屏幕和有限信息速度的小设备

浏览器会根据媒体类型选择合适的样式表

假如有一个链接handheld和一个应用到所有浏览器的链接，会应用哪一个？
handheld浏览器会两个都应用，不过假设”handheld”链接在“所有”链接后面，handheld规则就会有优先权。

其他媒体类型
aural 高速浏览器
Braille 读盲文
projection，tty 电传打字机或终端设备
tv 电视

要点

  • CSS用盒模式控制元素显示的方式。

  • 盒子由内容区和可选的补白、边框和边界组成。

  • 内容区是元素的内容。

  • 补白用来在内容区周围创建可见的空间。

  • 边框包围着补白和内容，是可见的，将内容分隔开。

  • 边界包围着边框、补白和内容，用来在元素和元素之间添加空间。

  • 补白、边框和边界都是可选的。

  • 元素的背景可以在内容和补白底下显示，但不能延伸到边界。

  • 可以用像素或百分数设置补白和边界的尺寸。

  • 可以用像素或关键字thin、medium和thick设置边框宽度。

  • 边框有8中不同的样式，包括solid、dashed、dotted和ridge。

  • 设置边界、补白或边框时，CSS提供同时设置各个侧面的属性(上下左右）也可以单独设置。

  • line-height属性用来增加文本的行间距。

  • background-image属性用来给元素添加背景图像。

  • background-position和background-repeat属性用来设置背景图像的位置和重复方式。

  • class属性用来同时样式化一组元素。

  • id属性用来给元素设置唯一的名字。也可以用id属性给一个元素提
    供唯一的样式。

  • 一个页面中一个元素只能有一个id

  • 可以用id#selector选择元素 比如#front。

  • 一个元素只能有一个id，但可以属于多个类。

  • 可以在XHTML中用多个样式表。

  • 如果两个样式表有冲突的属性定义，XHTML文件中靠后的样式表具有优先权。

  • 可以在<link>元素中用media属性确定媒体设备类型，如”print”或”handheld”。

基于Head First HTML整理
标签：

相关文章