html基本样式及表格

1.类选择器(.clase)   通过给标签元素起一个classname类名的方式 在编写样式时 用类名来获取该元素

2.id选择器(#id) 给元素期一个id名 用来获取该元素设置样式的时候使用    一个元素 可以同时有id名和类名

3.标签选择器  可以获取当前html文件中所以的标签用来修改样式

4.div边框(border)

div 有默认的边框 3px

边框样式   dashed 虚线   solid  实线   dotted 圆点虚线

设置div边框:

border-color: yellow;border-width: 10px;border-style: dotted;  

或者  border: 20px yellow solid;(与顺序无关)

5.div外边距(margin) 

设置居中 margin-left: auto;margin-right: auto;(margin:0 auto;)  

设置外边距方法 按 上 右 下 左 顺序去编写 margin: 10px 20px 30px 40px;

body有个默认margin值  为8px

兄弟div只要设置一个div的bottom下外边距就可以。因为两个兄弟的下外边距和上外边距取大值去布局,谁大听谁的

父子div   设置子div的margin-top时会把父级div扯下来,设置时会去寻找父标签的border,解决方法 :设置父标签的border

(border: 1px transparent solid;其中transparen为设置边框透明属性)

6.div内边距(padding)

表格边框距离内容的距离为内边距 内边距是真实存在的距离会改变盒子的大小但不影响布局效果

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

7.表格(table)

完整的表格由表的标题     表头  表内容  表尾构成的 完整表格的好处:标签写全可以让浏览器跟好的加载  提高效率

当表格宽(高)度不够内容的宽(高)度的时,内容将撑起表格的宽(高)度,如果表格的宽(高)度足够显示内容时,表格的宽(高)度就是你设置的宽(高)度

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

tr  代表行

th 代表表头的列 默认是加粗居中的效果

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

thead 代表表头

tbody 为表内容

tfoot 为表尾

caption 标题

cellpadding 单元格的内边距
cellspacing 单元格间的距离

rules   显示内边框的分隔线(rows  显示行 cols  显示列  all   都显示)

rowspan 合并行
colspan 合并列





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值