0
点赞
收藏
分享

微信扫一扫

css盒子,很棒


css盒子模式其实还是很好的,今后的布局应该坚决贯彻。


一些基础知识与技巧:


1.什么是BOX?CSS把HTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:padding、margin和border。


2.在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前。

#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}


在使用时,<div id="top"></div>之间的内容就会应用#top定义的样式。
而intro则需要使用class="intro"


 


3.在同一个页面,可以指定不同的标签内部的链接属性

#nav li a{ 


 
 
color:#000000; 
 
 
text-decoration:none; 
 
 
padding-top:4px; 
 
 
display:block; 
 
 
width:97px; 
 
 
height:22px; 
 
 
text-align:center; 
 
 
background-color: #009966; 
 
 
margin-left:2px; 
 
 
} 
 
 
#nav li a:hover{ 
 
 
background-color:#006633; 
 
 
color:#FFFFFF; 
 
 
} 
 
 
 

 
 
#footer a{ 
 
 
color:#fff000; 
 
 
text-decoration:none; 
 
 
/*padding-top:4px; 
 
 
display:block; 
 
 
width:97px; 
 
 
height:22px; 
 
 
 

 
 
text-align:center; */
 
 
background-color: #009966; 
 
 
margin-left:2px; 
 
 
} 
 
 
#footer a:hover{ 
 
 
background-color:#ffffff; 
 
 
color:#FFFFFF; 
 
 
}

通过指定 footer层的相关元素的css,就能实现层隔离个性化。
举一反三,其实css可以定义多层次的样式。比如#navcontainer ul ul a
4.css通配符使用

* {

margin: 0px;

padding: 0px;

}

这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。



5.padding 可以用 padding-top, padding-right,padding-bottom, padding-left 来替换之。 类似的,margin可以用margin-top、margin-right、margin-bottom、margin-left替换



要注意,书写padding:5px 5px 5px 5px这样的形式,其对应的具体属性顺序是



top,right,bottom,left,也就是从上开始顺时针对应。



注意padding与margin的区别:padding是指元素内补白,margin是指元素外边距。



6.关于div完全替代table的说法,我不赞成。



为何有些人看到table就觉得不顺眼呢?一定要全换成div才叫web标准?我看未必。 



table相关标签就是专门用来做表格的,遇到表格的情形,当然是首选,使用div反倒麻烦。



改用div用div,该用table用table,这就是我的主张。




举报

相关推荐

0 条评论