您的位置：首页 > Web前端 > CSS

Css中需要注意的一些问题

2011-11-08 23:11 375 查看

1：当height属性值为百分数时，该元素的高度由其父元素高度和该百分比相成得到，前提是该父元素的高度不能是auto，否则该元素内所有后台元素的height属性值都将

为auto

2：任何元素的高度和宽度的默认值都为auto，这时，元素宽度和高度的变化与元素本身的类型有关，比如p元素水平方向会占满整个空间，而竖直方向则依据其所包含内容

的多少而定，这就是块级元素的显示特征，和p元素相同的还有div、h1~h6元素等。

3：元素的高度=内容高度+上下填充高度+上下边框高度+上下边距高度

元素的宽度=内容宽度+左右填充宽度+左右边框宽度+左右边距宽度

4：Css的background属性可以用来设定元素的背景，为其添加颜色或者背景图像，背景属性会影响盒模型中内容和填充两部分区域，

而边框背景是由边框样式本身提供的，边距区域的背景则总是透明的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
body {
margin: 0;
background-color: silver;
}
div {
height: 50px;
width: 50px;
margin: 20px;
padding: 10px;
border: 10px solid black;
background-color: yellow;
}

</style>
</head>

<body>
<div></div>
</body>
</html>

5：边距重叠问题

它的意思就是当上下两个元素相邻时，二者之间的边距由它们的最大值而定，而不是二者边距之和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
body {
margin: 0;
}
div {
height: 100px;
width: 100px;
margin: 10px;
padding: 10px;
border: 2px solid black;
background-color: yellow;
}

</style>
</head>

<body>
<div id="divTop"></div>
<div id="divBottom"></div>
</body>
</html>

两个div之间的实际边距并不是20px，而是10px，边距发生了重叠。

6：边距实现对齐功能

即控制元素水平方向的对齐方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 70px;
height: 70px;
border: 2px solid black;
background-color: yellow;
}

div.left {
margin: 0 auto 0 0;
}
div.right {
margin: 0 0 0 auto;
}
div.center {
margin: 0  auto;
}

</style>
</head>

<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>

.left的右边距设置为auto后，元素将居左对齐，.right的左边距设置为auto后，元素将居右对齐，.center中左右边距都为auto，元素将居中对齐。

7：overflow属性

当我们设置的元素的内容的宽度和高度时，元素实际所包含的内容可能会超过设定的范围，默认情况下，超出的部分依旧可见，如果想改变它，

可以使用CSS提供的overflow属性，overflow的属性值可以是visible、hidden、scroll和auto，默认值为auto。

当为visible时，超出的部分将会显示出来，hidde将隐藏超出的部分，auto会在水平和垂直方向添加滚动条，scroll会在需要的时候添加滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color: yellow;
}

p.visible {
overflow: visible;
}

p.hidden {
overflow: hidden;
}

p.scroll {
overflow: scroll;
}

p.auto {
overflow: auto;
}
</style>
</head>

<body>
<p class="visible">有时，元素的内容区域小于元素实际所包含的内容，使用CSS提供的overflow属性可控制超出内容区域的部分该如何显示</p>
<p class="hidden">有时，元素的内容区域小于元素实际所包含的内容，使用CSS提供的overflow属性可控制超出内容区域的部分该如何显示</p>
<p class="scroll">有时，元素的内容区域小于元素实际所包含的内容，使用CSS提供的overflow属性可控制超出内容区域的部分该如何显示</p>
<p class="auto">有时，元素的内容区域小于元素实际所包含的内容，使用CSS提供的overflow属性可控制超出内容区域的部分该如何显示</p>
</body>
</html>

8：display的几个属性

*display:block和display:inline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
span {
height: 100px;
width: 300px;
background-color: yellow;
}

</style>
</head>

<body>
<span>span元素默认为内联元素，height和width对其不起作用</span>
</body>
</html>

效果图：

但是如果给span添加display:block后，则浏览器会完全按照块级元素显示属性渲染该元素

同样，如果更改块级元素的display属性为inline后，浏览器会依照内联元素进行处理

9：inline-block

inline-block类型的元素含有内联元素和块级元素的部分特性，元素如同文本一样会紧挨着其他元素，前后不产生换行；

对每个单独的元素而言，它们又满足块级元素的特性，height和width均能对其产生作用，我们可以把这种元素称为"内联块"型

元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航