1. table标签中的标题
caption { caption-side: top; }
2.table标签中边框重合
table { width: 300px; height: 200px; border-collapse: collapse; /*边框可以重合*/ }
3. table表中的项居中
th, td { border: solid 2px red; text-align: center; }
4. 列表头和行表头
<!--默认列表头 scope="col"-->
<table >
<caption >学生信息表</caption>
<tr><th>姓名</th><th>学号</th><th>性别</th></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>李四</td><td>002</td><td>男</td></tr>
<tr><td>王五</td><td>003</td><td>女</td></tr>
<tr><td>赵六</td><td>004</td><td>女</td></tr>
</table>
<!--横表头-->
<table >
<caption >学生信息表</caption>
<tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
<tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
<tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
</table>
5. 按钮和文本框的边框，不显示或者只显示下划线
.btn { border-width: 0px; } .txt { border-width: 0px; border-bottom: solid 2px black; }
6. 去掉超链接的下划线
a { text-decoration: none; }
7. 设定鼠标的显示形状
p { cursor: pointer; }
8. 无序列表，更改无序编号样式
ul { list-style-type: none; }
9. 块级元素和行内元素
内联元素，行内元素：1. width和height不起作用 2.不会占满一行
内联元素包含：span input a label img textarea select等 行内元素用来做内容
块级元素：1. 设置width,height 2. 块级元素里面的内容，默认显示在块的左上角 3. 块级元素单独占满一行
块级元素包含：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form等 块级元素用来做布局
<span>1</span><span>2</span>
span { /*width :100px; 不起作用*/ /*height :100px;不起作用*/ /*border :solid 1px red;*/ /*display :block 行内元素转化为块级元素*/ /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/ }
对于块级元素的两个重要CSS属性：float和clear
<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
.c1 { width: 100px; height: 100px; border: solid 1px red; /*display :inline 块级元素转化为行内元素*/ float: left; /*浮动，靠左对齐*/ } .c2 { width: 100px; height: 100px; border: solid 1px red; clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/ float: right; } .c3 { width: 100px; height: 100px; border: solid 1px red; float: right; }
10. 盒子模型 padding margin
<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
#d1 { width: 100px; height: 100px; border: solid 1px red; clear: both; /*padding :10px; 上下左右都撑开10px*/ /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/ /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/ /*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/ padding-top: 20px; padding-left: 15px; } #d2, #d3 { width: 100px; height: 100px; border: solid 1px red; float :left ; } #d3 { /*margin :20px; 这个用法和padding一样*/ margin-left :20px; }
11.所有的元素都顶住浏览器的边框
*{ padding :0px; margin :0px; }
12. 在google浏览器中调试，右键-Inspect
<div id="d4">
<ul >
<li>盒子模型调试</li>
<li>盒子模型调试</li>
<li>盒子模型调试</li>
</ul>
</div>
#d4{ width: 200px; height: 100px; border: solid 1px red; clear :both ; margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/ } #d4 ul{ width: 120px; height: 60px; margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/ }
13. padding和Magin对行内元素一样有作用
<div>
<span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
</div>
#d5,#d6{ border: solid 1px red; padding :20px; margin :50px; }
看代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/demo.css" rel="stylesheet" />
</head>
<body>
<!--默认列表头 scope="col"-->
<table >
<caption >学生信息表</caption>
<tr><th>姓名</th><th>学号</th><th>性别</th></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>李四</td><td>002</td><td>男</td></tr>
<tr><td>王五</td><td>003</td><td>女</td></tr>
<tr><td>赵六</td><td>004</td><td>女</td></tr>
</table>
<!--横表头-->
<table >
<caption >学生信息表</caption>
<tr><th scope="row">姓名</th><td>张三</td><td>男</td></tr>
<tr><th scope="row">学号</th><td>李四</td><td>男</td></tr>
<tr><th scope="row">性别</th><td>王五</td><td>女</td></tr>
</table>
<!--按钮，文本框的边框-->
<input type="button" value="我是一个按钮" class="btn"/>
<input type="text" class="txt"/>
<!--去掉超链接的下划线-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--设定鼠标的形状-->
<p>鼠标形状</p>
<ul>
<li>1111</li>
<li>3333</li>
<li>5555</li>
</ul>
<!--内联元素，行内元素：1. width和height不起作用 2.不会占满一行
内联元素包含：span input a label img textarea select 行内元素用来做内容-->
<span>1</span><span>2</span>
<br/>
<br />
<!--块级元素：1. 设置width,height 2. 块级元素里面的内容，默认显示在块的左上角 3. 块级元素单独占满一行
有哪些块级元素：div p h1-h6 (ol li) (ul li) (dl dt dd) table pre form 块级元素用来做布局-->
<div class="c1">块元素1</div><div class="c1">块元素2</div><div class="c2">块元素3</div><div class="c3">块元素4</div>
<br />
<br />
<!--盒子模型-->
<div id="d1">盒子模型 内间距</div>
<div id="d2">盒子模型 外间距 1</div><div id="d3">盒子模型 外间距 2</div>
<!--在google浏览器中调试-->
<div id="d4">
<ul >
<li>盒子模型调试</li>
<li>盒子模型调试</li>
<li>盒子模型调试</li>
</ul>
</div>
<!--padding和Magin对行内元素一样有作用-->
<div>
<span id="d5"> padding和Magin对行内元素</span> <span id="d6"> padding和Magin对行内元素</span>
</div>
</body>
</html>
body { font-size: 20px; font-family: "微软雅黑"; } caption { caption-side: top; } table { width: 300px; height: 200px; border-collapse: collapse; /*边框可以重合*/ } th, td { border: solid 2px red; text-align: center; } .btn { border-width: 0px; } .txt { border-width: 0px; border-bottom: solid 2px black; } a { text-decoration: none; } p { cursor: pointer; } ul { list-style-type: none; } span { /*width :100px; 不起作用*/ /*height :100px;不起作用*/ /*border :solid 1px red;*/ /*display :block 行内元素转化为块级元素*/ /*display :inline-block ; 即有行内元素特点又有块级元素的特点*/ } .c1 { width: 100px; height: 100px; border: solid 1px red; /*display :inline 块级元素转化为行内元素*/ float: left; /*浮动，靠左对齐*/ } .c2 { width: 100px; height: 100px; border: solid 1px red; clear: left; /*因为受到前面块级元素float的影响，必须先清空下前面的格式*/ float: right; } .c3 { width: 100px; height: 100px; border: solid 1px red; float: right; } #d1 { width: 100px; height: 100px; border: solid 1px red; clear: both; /*padding :10px; 上下左右都撑开10px*/ /*padding :10px 20px 上下分别撑开10px,左右分别撑开20px*/ /*padding :10px 15px 40px; 上面撑开10px,左右撑开15px,下面撑开40px*/ /*padding :10px 15px 20px 25px 顺时针，上10，右15，下20，左25*/ padding-top: 20px; padding-left: 15px; } #d2, #d3 { width: 100px; height: 100px; border: solid 1px red; float :left ; } #d3 { /*margin :20px; 这个用法和padding一样*/ margin-left :20px; } /*所有的元素都顶住浏览器的边框*/ *{ padding :0px; margin :0px; } #d4{ width: 200px; height: 100px; border: solid 1px red; clear :both ; margin :0px auto; /*代表上下是0，左右自动平分，这样就居中了*/ } #d4 ul{ width: 120px; height: 60px; margin :0px auto ; /*默认是div的宽度，先丈量下大小，修改高度和宽度*/ } #d5,#d6{ border: solid 1px red; padding :20px; margin :50px; }