1.选择器
类选择器：通过给标签元素起一个classname类名 的方式，在编写样式的时候，用类名来获取该元素
.div1{
width:200px;
height:200px;
background-color:blue;
}
id选择器： 给元素起一个id名，用来获取该元素，设置样式的时候使用一个元素即可以同时有id名和类名
#div2{
width:300px;
height:300px;
background-color:orange;
}
标签选择器： 可以获取当前html文件中所有的标签， 用来修改样式
div{
width:400px;
height:400px;
background-color:coral;
}
2.边框（border)
div有默认的边框
边框样式:
dashed 虚线
solid 实线
dotted 圆点虚线
综合写法:
border:3px orange dotted;
3.父子div
当父子div的时候,设置margin-top时,会把父级div扯下来，设置时，回去寻找父标签的border,解决方案，设置父级标签的border
边框透明属性transparent
4.内边距(padding)
内边距是真实存在的距离，会改变盒子的大小， 不影响布局的效果
宽度=内容的宽度+内边距的宽度+border的宽度
高度=内容的高度+内边距的高度+变宽的高度
5.外边距(margin)
body默认有一个外边距，默认是8px,外边距会影响页面布局
设置左右居中 参数1代表上下外边距，参数2代表左右外边距(margin:200px auto;)
设置外边距的方法，按顺时针上 下 左 右的顺序编写(margin:10px 10px 10px 10px;)
6.文字换行
左右居中（margin:100px auto)
自动换行(word-wrap:break-word)
到达长度后系统强制换行(word-break:break-all)
当长串超出div宽度的英文不会自动换行，系统认为空格是换行的标志
7.表格的初识(table)
表格的样式由如下基本格式组成
<table>
<!--默认居中-->
<caption>标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
table表格的标签
td代表的是一行
tr代表的是一行中的列数
caption代表表格的标题
thead表格的开关
tbody表格的内容
tfoot表格的表尾
8.表格的操作(table)
当表格宽度不够内容的宽度时，内容将撑起表格的宽度，如果表格的宽度足够显示内容时，这时表格的宽度是你设置宽度，这个规则，高度一样适用
cellpadding单元格的内边距
cellspacing单元格间的距离
rules（其中有三个属性）显示内边框的分割线
rows显示行
cols显示列
all都显示
9.表格的合并
<td rowspan="2">内容</td>
<td colspan="2">内容</td>
rowspan代表合并的行
colspan代表合并的列
10.表格的嵌套
嵌套p标签 span img等，表格嵌套标签时，嵌套在td标签上
<td><img src="img/IMG_0009.jpg"></td>

H5-表格的基本样式相关推荐

  1. css3-6 表格如何设置样式和定位样式是什么

    css3-6 表格如何设置样式和定位样式是什么 一.总结 一句话总结:css可以解决所有属性设置的样式. 1.表格如何设置样式? css样式可以解决一切问题,没必要在表格上面加属性来设置样式. 7 t ...

  2. Bootstrap 表格行的样式

    除了可以为表格添加样式外,Bootstrap还专门表格的行提供了 4 个可选的情景类,来为表格的行添加特殊的背景颜色.这些情景类及含义见表 3‑2: 表 3‑2 表格行的情景类 类 含义 .succe ...

  3. Bootstrap 表格的默认样式

    只需为任意的 <table> 元素应用 .table 类,即可使用表格的默认样式.Bootstrap中表格的默认样式相当简单,它仅仅在每个 <td> 上方添加了一个边框.如: ...

  4. 修改elementui的表格的滚动条样式

    // 表格的滚动条样式.el-table__body-wrapper::-webkit-scrollbar {width: 10px; // 横向滚动条height: 235px; // 纵向滚动条 ...

  5. html表格引用bootcss样式，vue,渲染学生信息

    html表格引用bootcss样式,vue,渲染学生信息,优秀学生背景色为蓝色 <!DOCTYPE html> <html lang="en"><he ...

  6. 使用poi给word文档表格中添加样式

    32.使用poi给word文档表格中添加样式 File fileNew = new File(exportPath + exportName + ".docx");InputStr ...

  7. layui表格单元格样式自定义

    layui表格单元格样式自定义 在表格渲染完的回调done中操作: 1.匹配行,根据样式进行匹配,可F12查看(最终目的是只匹配到数据行) 2.匹配列,匹配成功后,就可以确定到某个单元格,获取行对应的 ...

  8. el-table表格做滚动条样式处理

    vue项目中引入Element-UI并对其el-table表格做滚动条样式处理 需求分析: 主要是对table表格中的body内容做滚动处理,表头样式不做变化.初调时X轴和Y轴都做了overflow: ...

  9. 基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解

    文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...

  10. python生成excel表格-Python生成excel表格并设置样式

    python在做爬虫时会涉及到数据存储问题,下面说一下将数据存储在excel表格中,主要使用扩展类xlwt,下面详细说一下,主要涉及到了数据列,背景,名称等参数. 说明:python3.7.windo ...

最新文章

  1. cookie和url参数获取的常规实用方法合集（ES6）
  2. java面试换背景颜色_实习｜渣二本Java菜鸡0 Offer的春招血泪史，一定要主动去找实习呀！
  3. mpls工作原理通俗解释_用这两种方法向最终用户解释NLP模型的工作原理还是不错的...
  4. php如何打开图片的权限,php如何控制用户对图片的访问 PHP禁止图片盗链 php技巧...
  5. Direct3D顶点结构使用总结
  6. seay代码审计工具_渗透测试 网站代码审计等基础方法篇
  7. 基于JAVA实现的WEB端UI自动化 -自动化测试简单介绍
  8. 此语言无法安装在此计算机上win10,如何解决Win10换成无法安装英文语言包的问题...
  9. mhdd测试hdd硬盘软件,硬盘检测工具(HDDScan)
  10. 阿里云账号登录名修改方法（图文详解）
  11. Thymeleaf th:each遍历，th:if、th:switch 条件判断，input，select，radio 回显赋值
  12. 【VBA】Excel根据指定字段自动分页sheet功能的实现
  13. 采集天猫网的10个经典方法
  14. 很多朋友问我：什么是博客？为什么要博客！
  15. opencv官方手册（一）
  16. Mycat高可用解决方案一（mysql安装）
  17. 利用html写一个日历,Vue写一个日历
  18. 第一份工作，我差点没转正
  19. Android 新消息提示（闪光灯，震动，声音）
  20. 【狂神说Java】SpringMVC最新教程IDEA版通俗易懂

热门文章

  1. html做出文字凹凸效果,css3怎么实现字体凹陷凸出效果？（附代码）
  2. 最好的3个txt阅读器
  3. CBoard框架使用总结五--扩展菜单配置功能
  4. 解密QQ的MsgEx.db消息文件格式
  5. directsound播放32位float类型的pcm格式音频
  6. puttygen(puttygen)
  7. 360安全浏览器极速模式怎么设置
  8. SOSOAPI前后端分离开发模式下的接口测试
  9. java asm 中文文档_ASM 简介
  10. otool 和 install_name_tool