前言:虽然做了几个前端项目,但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱,在网上找了一些网站,用于空闲时间学习。在此做下学习笔记,以做复习使用。
网站的课程讲的很好,很适合像我这样零基础的人学习,非常感谢网站的维护者,推荐下:绿叶学习网
1.表格样式:
---border-collapse,控制边框合并
---border-spacing,控制边框间隔,单位px
---caption-side,控制表格标题位置,默认top,可选bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table,th,td{border:1px solid gray;}
#t2{border-collapse:collapse}
#t3{border-spacing: 5px 10px}
#t4{caption-side: bottom}
</style>
</head>
<body>
<table id="t1">
<caption>默认边框</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
<hr/>
<table id="t2">
<caption>合并边框</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
<hr/>
<table id="t3">
<caption>间隔边框</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
<hr/>
<table id="t4">
<caption>标题在下</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果展示:
2.盒子模型:
---width、height,控制宽高
---border,控制边框
---margin,控制外边距
---padding,控制内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#d1,#d2,#d3{
width: 200px;
height: 100px;
border: 1px solid red;
}
#d1{
/*padding,控制外边框,可写4个值,代表上、右、下、左(顺时针)
也可分开写padding-top、padding-left等分别赋值
或者2个值,代表上下、左右*/
/*如果有padding值和子元素,父元素会自动撑开*/
padding-top: 10px;
padding-left: 20px;
}
#d1 #d1son{
width: 100px;
height: 50px;
border: 1px solid blue;
}
#d2{
/*margin,控制外边框,可写4个值,代表上、右、下、左(顺时针)*/
/*或者2个值,代表上下、左右*/
margin: 10px 20px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d1son"></div>
</div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
效果展示:
3.float,控制元素脱离文档流:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:400px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
/*定义文本样式*/
#father p
{
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
#son1
{
/*son1的浮动方式设置为left,son1脱离文档流,靠左显示,长度由内容决定,不会占一行*/
float: left;
}
#son2
{
/*son2的浮动方式设置为left,son1脱离文档流,靠左显示,长度由内容决定,不会占一行*/
float: left;
}
#son3
{
/*son3的浮动方式设置为right,son1脱离文档流,靠右显示,长度由内容决定,不会占一行*/
float: right;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
<p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,</p>
</div>
</body>
</html>
效果展示:
4.position,定位:
---fixed,固定定位,使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置
---relative,相对定位,使用top、bottom、left和right这4个属性来设置元素相对初始位置的位置
---absolute,绝对定位,使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置,与fixed相比,absolute的元素脱离了文档流,是独立存在的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 100px;
height: 50px;
border: 1px solid red;
margin: 10px 20px;
}
#d2{
position: relative;
top: 10px;
left: 20px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">相对定位</div>
<div id="d3"></div>
</body>
</html>
效果展示: