关闭

CSS基础知识-四(边框样式、caption、表格居中、边框宽度和高度、id和class的区别、Div+CSS布局)

1603人阅读 评论(0) 收藏 举报
分类:

表格:

1、 边框样式:

Border-collapse:collapse(合并)  / separate(默认,两个边框);-----设置边框是否重叠

Border-spacing:20px;-----表格列之间的距离

如:

table{

         width:600px;

         height:200px;

         border:1pxsolid #ABABAB;

         border-collapse:collapse;

         margin-bottom:15px;

         }

2、 指定caption位置

Caption-side:bottom / top / right/left;

也可以单独对其进行设置:如:

caption{

         text-align:left;

         padding-bottom:10px;

         }

 

3、 表格居中

Margin:0px auto;

注意:如果加入div,不设置宽度和高度,则无法居中

如:

.main{

width:500px;

height:300px;

border:1px solid #fff;

margin:0px auto;

text-align:center;

}

4、 边框宽度和高度

Border-top:width:20px;

Border-top-height:20px;

 

Border-buttom-width:30px;

Border- buttom -height:20px;

 

Border-left:width:20px;

Border- left -height:20px;

 

Border-right:width:20px;

Border- right -height:20px;

 

 

5、 Idclass的区别

 

(1)    一个页面id命名不能一样,class可以一样

(2)    调用id用#号,class用点.

(3)    Id页面只用一次,用于整个布局;class应用于多个页面,用于样式

(4)    用到js或调用对象时,用id

 

注意:

Background-color:transparent;------设置背景透明

Vertival-align:center;------垂直对齐方式;

 

6DIV+CSS布局

1)左右布局:

Margin-right:20px;margin-left:10px;

中间的距离为:两个的和

2)上下布局:

Margin-top:60px; margin-bottom:50px;

两个之间的距离:最大者

 

例子:左右布局

Html文件:

 

<div class="main">

             <divclass="left">left</div>

       <div class="right">right</div>

</div>

 

Css文件:

.left{

         width:200px;

         height:240px;

         padding-left:20px;

         background-color:#9FC;

         float:left;

         }

.right{

         width:280px;

         height:240px;

         background-color:#CF6;

         float:left;

         }

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:75246次
    • 积分:1649
    • 等级:
    • 排名:千里之外
    • 原创:89篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条