HTML和CSS学习笔记第9章——盒模式

返回主目录

行间距

同样可以用像素，百分数，比例因数赋值。

	line-height: 1.6em
	/*将行间距改为字体大小的1.6倍*/

line-height可以只用一个数字代替相对值（比如em或%）来设置值。如果只用一个数字1，就是指每个元素的行间距是它们自己的font-size的1倍，而不是继承值。

盒模式

CSS将每个元素视为一个盒子，每个盒子由内容区和可选的补白，边框和边界组成。内容区周围是可选的、透明的补白，可选的边框在补白周围，可选的、透明的边界包围所有的东西。

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

边框：border
补白：padding
边界：margin

用CSS为元素插入背景

使用URL指定图像。

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

可以通过background-repeat, background-position修改背景图样式。默认背景图是重复的，默认位置在元素左上方。

background-repeat: no-repeat;
background-position: top left;

position的值有top，bottom，left，right，center。
repeat的值有no-repeat，repeat-x，repeat-y，inherit（继承父元素）。

只在一侧添加补白（边界）

在padding（margin）后面加方位，比如在左侧：

padding-left: 80px;
margin-right: 250px;

注意代码中先写padding-left后写padding和相反方法，两种最终效果是不同的。

边框

边框样式
broder-style属性定义了8种边框样式：
solid：实线
dotted：点
double：双实线
dashed：虚线
inset：嵌入

outset：突出
groove：凹进
ridge：凸出

边框宽度
border-width控制边框宽度，可以用关键词thin、medium、thick或像素值控制。

边框颜色
broder-color控制边框颜色，与字体一样，可以用颜色名、rgb值、十六进制代码控制。

与边界和补白一样，通过加方向控制边框一侧的样式

border-top-color:
border-bottom-style:
border-right-width:

补白（边界）定义的简写

为了避免每次设置补白（边界）时需要输入很多冗余，如：

padding-top:0px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 30px;

可以使用简写来提高效率：

padding:0px 20px 30px 10px;/*上 右 下 坐（顺时针）*/

如果上下一样，左右一样则可以：

margin: 0px 20px;/*上和下 右和左*/

如果只有一个值，说明四个方向都设置同一个值。

边框定义的简写

边框的缩写比边界补白更灵活，因为顺序不重要。

border-width: thin;
border-style: solid;
border-color: #007e7e;

可以改为：
border: thin solid #007e7e;

背景定义的缩写

背景也可以缩写，而且和边框一样顺序不重要。

background: white url(地址) repeat-x;

字体定义的缩写

字体缩写需要注意次序。

font: font-style font-variant font-weight font-size/line-height font-family

在font-size之前都是可选的，但必须写在font-size之前。font-size必须定义。line-height是可选的，如果定义，则是在font-size右边加一个“/”，再加属性值。最后需要添加字体系列，字体系列之间加逗号。

id

一个元素既可以有id又属于一个类

在css中设置id的样式，可以在id名前加“#”：

#footer{	/*或者p#footer*/
	color:red;
}

类和id唯一的不同在于id只跟一个页面中的一个元素匹配。

一个文件多个样式表

css允许一个文件多个样式表，如果对某一元素有重复样式，那么越晚加入的样式表优先级越高。

可以在<link>中指定样式表的服务设备，这样浏览器会根据用户设备选择适当的样式表。

<link type="text/css" href="lounge.css" rel="stylesheet" />/* 如果没有提供媒体种类，样式表就适用于所有设备。*/
<link type="text/css" href="lounge-print.css" rel="stylesheet" media="print "/>/*现在一个定义输出（打印机），一个定义具有小屏幕和有限信息速度的小设备*/
<link type="text/css" href="lounge-mobile.css" rel="stylesheet" media="handheld"/>

假如有一个链接“handheld”和一个应用到所有浏览器的链接，会应用哪个？
浏览器会都应用，但是“handheld”规则会有优先权。