菜鸟娃娃鱼two

#选择器

.类选择器

通过给标签元素起一个classname类名的方式

在编写样式时 用类名来获取该元素

.div1{

width: 100px;

height: 100px;

background-color:chartreuse;

}

.id选择器

给元素起一个ID名用来获取该元素 设置样式时使用

一个元素可以同时有ID名和类名

#div2{

width: 200px;

height:300px;

background-color: chocolate;

}

.标签选择器

可以获取当前HTML文件中 所有标签用来修改样式

div{

width:200px;

height:200px;

background-color:blue;

}

#边框

DIV有默认的边框

边框样式 ：

虚线 dashed

实线 solid

原点虚线 dotted

例：

设置 左边框15像素宽度 实线

border-left-width: 15px;

border-left-style:solid ;

border-left-color: #00BFFF;

*综合写法无关顺序

border:15px deepskyblue dotted;

#边距

.外边距

外边距影响布局

设置居中

margin-left:auto;

margin-right:auto;

设置左右居中

参数1：上下外边距

参数2：左右外边距

margin: 200px auto;

设置外边距方法

按顺时针的顺序编写

上右下左

margin: 10px 20px 30px;

*父子DIV

当父子DIV的时候

设置margin-top时会把父级DIV一起拉下来设置时回去寻找父标签的border解决方案 设置父标签的border

*兄弟DIV

兄弟DIV只要设置一个DIV的bottom下外边距就可以 因为兄弟DIV的下外边距和上外边距取大值去布局

*边框透明属性：transparent

border: 1px transparent solid；

*body默认有一个外边距，默认是8px

body{

margin: 0px;

}

.内边距

内边距是真实存在的

会改变盒子大小 不影响布局效果

盒子宽度=内容宽度+内边距宽度+边框宽度

盒子高度=内容的高度+内边距高度+变宽高度

#表格

.初识

tr : 行

th : 表头的列（默认加粗居中）

td : 代表表格的一行中的其中一个元素

.表格的结构

表的标题

表头

表内容

表尾

例 :

<table>

<!--默认 居中-->

<caption>标题</caption>

<!--表头-->

<thead>

<tr>

<th>表头</th>

<th>表头</th>

<th>表头</th>

</tr>

</thead>

<!--表内容-->

<tbody>

<tr>

<td>内容</td>

<td>内容</td>

<td>内容</td>

</tr>

</tbody>

<!--表尾-->

<tfoot>

<tr>

<td>表尾</td>

<td>表尾</td>

<td>表尾</td>

</tr>

</tfoot>

</table>

*完整表格的好处

标签写全 可以让浏览器更好的加载 提高效率

.表格的镶嵌

嵌套 p标签 span img

表格嵌套标签时 嵌套在td标签上

例 :

<tr>

<td>

<p>我是哈哈</p>

</td>

</tr>

<tr>

<td>

<img src="img/1.jpg" />

</td>

</tr>

.表格的合并

rowspan 合并行

colspan 合并列

例 :

<tr>

<td rowspan="2">单元格</td>

<td colspan="2">单元格</td>

</tr>

.表格的操作

当表格宽度不够内容宽度时 内容将撑起表格宽度

如果表格宽度足够显示内容时 这时表格的宽度就是你是设置的宽度

高度一样适用

cellpadding单元格的内边距

cellspacing单元格间的距离

例 :

<table border="1px" width="200px" height="200px"

style="text-align: center;"

cellpadding="60px" cellspacing="20px">

</table>

rules 显示内边框的分割线

rows 显示行

cols 显示列

all 全显示

例 :

<table border="1px" width="200px" height="200px"

style="text-align: center;"

rules="rows">

</table>