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 合并列