h5基础

选择器

1.类选择器

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

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

.div1{

width: 100px;

height: 100px;

background-color: red;

<div class="div1">我是div1</div>

2.id选择器

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

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

#div2{

width: 100px;

height: 100px;

background-color: yellow;

<div id="div2">我是div2</div>

3.标签选择器

可以获取当前html文件中所有的标签

用来修改表

div{

width: 100px;

height: 100px;background-color: beige;

}

外边距

设置居中

margin-left: auto;

margin-right: auto;

设置外边距方法

按顺时针的顺序编写的

上右下左

margin: 10px 20px 30px 40px;

内边距

/*设置内边距

padding-

内边距是真实存在的的距离会改变盒子的大小

不影响布局效果

宽度=内容的宽度+内边距的宽度+边框的宽度

高度=内容的高度+内边框的高度+边框的高度

padding-left: 100px;

padding-top: 100px;

padding-bottom: 100px;

padding-right: 100px;

父子标签

注意当父子div的时候设置子div的margin-top会把父级div拉下来

设置时回去寻找父标签的border

解决方案 设置父标签的bordor

.div1{

width: 300px;

height: 300px;

background-color: yellow;

边框透明：transparent

border: 1px transparent solid ;

文字换行

自动换行

word-wrap: break-word;

到达长度到系统强制长度自动换行

word-break: break-all;

长串的超出div宽度 英文 不会自动换行系统认为 空格 是换行的标志

-->

表格结构

标题默认居中的

<caption>标题</caption>

<tfoot>表尾</tfoot>

表格镶嵌

嵌套p标签 span img

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

<td><img src="img/222.png"</td>

表格合并

rowspan 合并行的

colspan 合并列的

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

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

表格操作

当表格宽度不够内容宽度时

内容将撑起表格的宽度

如果表格的宽度足够显示内容时

这是表格的宽度就是你设置宽度

这个规则高度也一样使用

cellpadding 单元格的内边距

cellspacing 单元格间的距离

rules 显示内表框的分割线

rows 显示行

cols 显示列

all 都显示

<table border="1px" width="200px" height="200px" bgcolor="yellow" style="text-align: center;"rules="cols">

表格边框

div有默认的边框

dashed 虚线

solid 实现

dotted 原点虚线

设置左边20px 黑色 点边框

.wwww{

border-left: 20px black dotted;

}