整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。
绝对单位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相对单位
% : 百分比
em : Element meter 根据文档字体计算尺寸
rem : Root element meter 根据根文档（ body/html ）字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
vmin : View min 可视范围的宽度或高度中较小的那个尺寸
vmax : View max 可视范围的宽度或高度中较大的那个尺寸
运算
calc : 四则运算
实例：
h1 { width: calc(100% - 10px + 2rem)单位比例
1in=2.54cm=25.4 mm=101.6q=72pt=6pc=96px
详细
绝对单位
px - Pixel 像素
像素 px 相对于设备显示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt=1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相对单位
% 百分比
相对于父元素宽度
<body>
em Element meter 根据文档计算尺寸
相对于当前文档对象内文本的字体尺寸而言，若未指定字体大小则继承自上级元素，以此类推，直至 body，若 body 未指定则为浏览器默认大小。
<body>
rem Root element meter 根据根文档（ body/html ）字体计算尺寸
相对于根文档对象（ body/html ）内文本的字体尺寸而言，若未指定字体大小则继承为浏览器默认字体大小。
ex 文档字符“x”的高度
相对于字符“x”的高度，通常为字体高度的一半，若未指定字体尺寸，则相对于浏览器的默认字体尺寸。
至于为啥是x，我TM也不知道。
ch 文档数字“0”的的宽度
同上，相对于数字“0”的宽度。
一张图解释：
vh View height / vw View Width - 可视范围
相对于可视范围的高度和宽度，可视范围被均分为 100 单位的 vh/vw；可视范围是指屏幕可见范围，不是父元素的，百分比是相对于包含它的最近的父元素的高度和宽度。
假设设备可视范围为高度 900px，宽度 750px，则， 1 vh=900px/100=9px，1vw=750px/100=7.5px
。
vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸
假设浏览器的宽度设置为 1200px，高度设置为 800px， 则 1vmax=1200/100px=12px， 1vmin=800/100px=8px 。
如果宽度设置为 600px，高度设置为 1080px, 则 1vmin=6px, 1vmax=10.8px 。
假设需要让一个元素始终在屏幕上可见：
.box {假设需要让这个元素始终铺满整个视口的可见区域：
.box {em、rem 是实际生产中我们最常用到的单位，可以使用其配合媒体查询改变 body 字体大小来实现响应式的设计，vh、vw、vmin、vmax也可以很方便地帮助我们控制响应尺寸，但实际的可控性可能不如前者，具体按照我们的业务需求去实践吧！
小节基本要求：
要点：
首先将body.css文件引入到body.html中，body.css文件现在是空的，没有写任何代码
从上上篇分析的网站结构可知，tbody对应的div标签是最大的框，所以我们这样来设置它的框。
右键运行一下，如图：
可以发现什么都没有，看我设置的代码：
.tbody{ //最大的框①
background-color: rgba(61,176,203,0.15);
padding: 10px;
overflow: hidden; //这行可忽略,是细节
}
.tbody .is-main{ //其次框②
width: 85%;
margin: 0 auto; //边框居中
}
tbody作为最大的框①，我给它设置了一件什么事？
tbody是没有设置宽与高的，但是没有宽与高不应该什么都没吗？为什么仍然有一个很长的长方形框框呢？
因为我设置了内边距padding，内边距就是边框朝里面的距离。外边距margin已经讲过了，它是边框朝外的距离。这两个是相对的！
内边距设置为10px，那么边框就会朝里空出10px的空间出来。
我为什么不给最大的框①tbody设置宽和高？
一般开发中为了方便，最大的框是不设置宽和高的，它的大小是由其内部的内容决定的。
也就是说，它里面能放多少东西，它就能变多大。
其中框②is-main也是同样的道理，我都不给它设置宽高，因为我们会在他们身体里填东西，它们的大小由里面的内容决定。
右键运行一下，发现并没有任何改变，如下图：
看代码：
.is-main .main-left{
width: 71%;
float: left; 向左浮动
}
.is-main .main-right{
width: 28%;
float: right; 向右浮动
}我对放内容的左边框与右边框做了一件什么事情？
通过网站的样式可以发现，左边边框较右边边框更宽。
浏览地址：https://ypt.ink/blog/index
所以，给left样式设置宽度为71%; 给右边right设置宽度为28%；
也就是说，现在边框③也就是left已经规定了宽度大小，边框④也就是right也规定了宽度大小。
也就是说，两边框内放的内容不管再多，都不能超过我规定好的这个宽度。
我为什么不给left框与right框规定高度？
因为没必要，还是像上面说的，它们多高不要由它们来决定，让它们里面的内容来决定。否则代码就写死了！这个很重要，不论是java还是前端代码一旦写成死代码就意味着凉凉！
什么是向左向右浮动？
float:left 向左浮动的意思就是，让left这个框③紧贴is-main边框②的左边边框
float:right 就是紧贴着右边边框剩下的内容放在下一篇吧，这一篇东西有点多了。
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容：这是HTML课程的第六课，在这节课程中主要讲解一下HTML中body的属性，以及表格元素。希望大家根据这个教程可以学习一下。
上节回顾
在上节中主要讲解了超链接和图片的知识点。上节请戳->网页前端开发基础教程05-网页中插入图片和超链接，界面更绚丽
当然讲解的并不是很全面，只是把常用的HTML属性进行讲解了出来，在后期会进行做项目，到时候，直接回顾一下，马上就能搞懂了。这次直接讲解一下HTML中的body属性以及表格元素。
PS：其实HTML这个东西很简单，只需要根据对应的元素，学会标签指的是什么就可以了，就和谍战片中中的密码本一样，按照密码本书写对应的格式，写上去就能直接显示了。只是学会这种标签的样式而已。自己学习HTML也是可以的。最重要的还是进行实践。
body的属性
body是整个页面的主体元素，我们把内容写入到body元素中，那应该如何设置主体的背景颜色、背景图片呢？
下面就一一来讲解一下。使用Sublime创建一个HTML文件。
设置背景颜色，属性为bgcolor，值为RGB颜色或者颜色的英文单词。
2.背景图片设置，背景图片照样可以用路径的方式写入到HTML文件中。属性为background例如：
当然body的属性值，比较少，而且几乎不太用，在以后的时候要使用CSS代替这些东西。
表格
表格在网页中还是很常用的，比如在按照每行数据进行展示的时候，就需要用到表格啦。所以就需要学习一下表格应该如何写。
OK，我们先建立一个最简单的学生信息表：
其中table（表格）、tr（一行）、（一个单元格）。这三个时表格最基本的元素。并依次有个上下级嵌套的关系。
表格中的属性
表格中有很多属性，正是因为有了这些属性，才让表格无比强大。比如在老早的时候，风靡一时的Hao123就是使用表格进行制作的。OK在下节中咱们也会自己制作一个模仿的Hao123第一版，通过table制作。
border
border是边框的意思，在以后的学习中你肯定会对这个单词不陌生，因为这个单词真的是太常用了。border有两个值分别为0和1.0表示“没有边框”，1表示“有边框”。
cellpadding:
这个表示的是表格的内边距，也就是表格的边框到里面的内容的距离。
数值越大，单元格的表框到内容的距离越大。
cellspacing
这是单元格和单元格之间的距离，这个值越大，单元格之间的距离越大。
align：
align表示的是单元格的对齐方式，对里面的内容进行水平的对齐，其值有三个分别为right（右）、center（居中）、left（左）。
colspan、rowspan：
这是两个属性，分别表示行的合并和列的合并。其值为数字，表示要合并的单元格：
还有其他几个属性例如：valign、bgcolor、width、height等在前课程中也讲过了。
每天一个知识点，带你迈向软件编程大神，一起努力吧。下节课程，我们一起做一个Hao123的导航页面。
*请认真填写需求信息，我们会在24小时内与您取得联系。
