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

DIV+CSS 总结

2013-02-20 00:43 106 查看
写这篇博文主要是为了分享一下从传智播客里面学到的DIV+CSS技巧，同时也便于记不清的时候查看，完全是菜鸟一只，有不对的地方希望能够给我指正出来

继承性：

1.如果标签有自己的属性，那么就用自己的属性，不然会从上级继承，比如:

<style>
body{
font-size:20px;
color:red;
}
</style>

<body>

<ul>
<li>
没有自己的文字大小属性就继承
</li>
</ul>

<h1>有自己文字大小属性，就用自己的</h1>

</body>


2.margin ,padding,height,width等跟距离有关的属性不会被继承

3.文本相关属性是继承的：font-size,font-family,line-height,text-index等

4.列表相关属性是继承的：list-style-type等

5.颜色相关属性是继承的：color6：button, input, select, textarea在IE下是不继承body属性的，需单独书写

技巧：

写CSS的时候第一步就是将所有能用到的标签的内外边距归零如：body,ul,li,div,table,h1,p{margin:0;padding:0;}

ul,li,ol这两个标签很容易出现兼容性问题，所以都用这种方式ul,li,ol{margin:0px;padding:0px;list-style:none; }

border-color:这个属性必须用在border:1px;这种先定义粗细的属性之后，否者不管用

想要使内容或别的元素真正的居中的时候将左右的margin:不用固定的值二十auto;

做分割线的时候可以不用hr，而是用div的border属性可以控制各条边的宽度

让div中的内容水平居中时用text-algin,而垂直居中用的方法是设置行高line-height等于div的高度,如div的heigth=100px;那么设置line-height:100px;

background-image背景图片的依附方式：fixed（固定）的含义是固定在屏幕上（可视区域），而不是标签上面

background-attachment:fixed在ie6上面存在兼容性问题，如果要实现效果，只有一个办法可以解决，那就是写在支持它的两个标签中，第一个是html，第二个是body标签，基本上别无他法了

可以用css精灵减少http对服务器的请求而加快访问速度

<input type="checkbox"> 默认是带有margin和border属性的，即使对input的整体清零也没用，需要单独给它写一个margin:0px; border:0px;比较好

在IE6中，当父元素里面的子元素的高度超过了父元素设定的高度的时候，那么父元素的高度将会被子元素撑地和子元素的高度一样

float（浮动）相当于块元素（如div）飘起来了，也就是说脱离了文档流，那么它下面的内容就会向上移动。有时下面的块移动上来的时候发现上面被占据了，那么刚移动上来的元素就紧接在右边

如果想让多个块元素（比如DIV）显示在同一行中，那么就把浮动设置成同一个方向，而不是左边的元素设置成左飘动，右边元素设置成右飘动，这样做可以更好的兼容不同的浏览器

每写一个div的时候都要给它加上一个宽度值，不然就会使100%宽度

当对一个块设置成浮动（float）属性后，就要重新检查跟这个块有关的margin，padding，text-algin等跟距离有关的属性是否还起作用，特别是那些设置成auto的值基本上都不管用了

一行有多个浮动块的时候必须把这些浮动块全部放到一个大的块（div）中，而且这个大的块还必须加上宽度才能有更强的兼容性

当父元素没有自己的高度的时候，并且父元素的子元素（怎么说呢？就是里面的那个元素）带有浮动属性，那么父元素的高度酒不会自己增加(父元素的高度不会随着子元素自适应) 在不同的ie效果也不同，测试效果如下：

<!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,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
height:500px;/*当注释掉高度之后就有大问题了：当父元素没有自己的高度的时候，并且父元素的子元素（怎么说呢？）带有浮动属性，那么父元素的高度酒不会自己增加(父元素的高度不会随着子元素自适应)*************这个地方的效果就是应为父元素没有高度，导致背景色显示不出来,可以加上border证明*/
background:#906;
margin:0px auto;
}
#left{

width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}

#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>

<body>
<div id="header">头
</div>
<div id="main">
<div id="left">左
</div>
<div id="right">右
</div>
</div>
<div id="footer">版权
</div>

</body>
</html>


当出现上面的问题时，解决的方法有如下几种：

方法一：

w3c的建议：在父元素的里面，也就是父元素里面最后的一个块（div）里面再加上一个空的div，这个div带有清除浮动的属性，唯一一个不好的地方就是加了一个什么功能都没的div而增加了代码量；

代码改成如下：

<!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,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
/*height:500px;当注释掉高度之后就有大问题了：当父元素没有自己的高度的时候，并且父元素的子元素（怎么说呢？）带有浮动属性，那么父元素的高度酒不会自己增加(父元素的高度不会随着子元素自适应)*************这个地方的效果就是应为父元素没有高度，导致背景色显示不出来,可以加上border证明*/
background:#906;
margin:0px auto;
}
#left{

width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}

#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>

<body>
<div id="header">头
</div>
<div id="main">
<div id="left">左
</div>
<div id="right">右
</div>
<div style="clear:both;"></div>   <!--新加的一个带有清除浮动属性的空div-->
</div>
<div id="footer">版权
</div>

</body>
</html>


方法二：给父元素加上：overflow:hidden;代码入校：

<!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,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
/*height:500px;当注释掉高度之后就有大问题了：当父元素没有自己的高度的时候，并且父元素的子元素（怎么说呢？）带有浮动属性，那么父元素的高度酒不会自己增加(父元素的高度不会随着子元素自适应)*************这个地方的效果就是应为父元素没有高度，导致背景色显示不出来,可以加上border证明*/
background:#906;
margin:0px auto;
overflow:hidden;
}
#left{

width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}

#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>

<body>
<div id="header">头
</div>
<div id="main">
<div id="left">左
</div>
<div id="right">右
</div>
</div>
<div id="footer">版权
</div>

</body>
</html>


方法二是最推荐的一个方法，但是如果子元素出现了定位布局，那么方法二作废，此时就用方法一

当需要使用绝对定位时需要满足两个条件，缺一不可，否者浏览器兼容问题：

（1）。父元素必须要有自己的定位属性，建议使用position:relative;

(2).。子元素要有自己的绝对定位属性，position:absolute; 同时要用方向属性；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航