整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。
在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去工作准备创业。
那时，发送邮件的操作都会出现在计算机课程中。
那时，对页面还没有现在的跨平台要求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。
那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。
因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的！
也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。
直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现（这类适应多平台的页面布局叫做响应式布局），<table>表格制作的页面在响应式布局大行其道的今天，用它布局的页面开始出现代码冗余，维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。
从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。
dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。
这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想告诉大家，学习任何计算机技术，我们可以从简单易学的方式入手，但要有透过这种方式向下挖掘核心知识的决心和勇气！对于自己从事的工作我们不能满足于会做，还要尽量透析它的原理，这样才能在技术换代中不会被轻易淘汰。
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。
从此我开始学习数学。因为老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。
向下挖掘虽然很难，但是有必要！与各位共勉！
下面开始今天的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。
如图：
下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：
<body><div></div></body>我们看看效果：
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为<div>添加边框属性！
我们使用style属性为<div>添加边框，style属性里的代码就是以后在CSS中使用的代码！实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程，这里不再赘述。
示例代码如下：（通过style = "border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！）
<div style = "border-style: solid;">效果如图：
因为里面没有内容，所以<div>的宽度是0，因此显示的就是一条直线。下面我们向<div>中添加内容。
为了看起来花哨些，加张图片吧！
示例图片
示例代码如下：
<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%；"></div>大家请按照<img>中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2（路径详解）——零基础自学网页制作》
效果如下：
其中，我们也是使用了style的方式为<img>设置的宽度，这个设置方法在<div>中一样使用！
代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
</div>效果如图：
整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便观看，我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示，我们在新的<div>中添加一段文字！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
<div>
<p>学习网页制作非常有趣！</p>
</div>
</div>效果如下：
如果为了美观，我们让文字到图片右边的空间中怎么做呢？
示例代码如下：
<div style = "float:right;"><p>学习网页制作非常有趣！</p></div>
我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。
页面效果如图：
大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
</div>页面效果：
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>页面效果如下：
值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。
代码如下：
<body>
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">学习网页制作非常有趣！</p>
</body>页面显示效果如下：
大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
在HTML文档头部添加viewport标签，设置meta属性值为“width=device-width”，可以让浏览器根据设备屏幕的宽度自动调整页面的缩放比例，从而实现页面自适应。
<meta
name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no"/>每个属性的详细介绍：
width：#viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。 height：#viewport的高度。 initial-scale：#初始缩放比例，即当浏览器第一次加载页面时的缩放比例。 maximum-scale：#允许浏览者缩放到的最大比例，一般设为1.0。 minimum-scale：#允许浏览者缩放到的最小比例，一般设为1.0。 user-scalable：#浏览者是否可以手动缩放，yes或no。 |
媒体查询可以根据设备屏幕的宽度和高度来匹配不同的样式规则，从而实现响应式布局。通过设置不同的CSS样式，可以让页面在不同的设备上呈现不同的布局和样式。
@media screen and (max-width: 767px) {
/* 在宽度小于767px的设备上应用以下样式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在宽度在768px到1023px之间的设备上应用以下样式 */
body {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在宽度大于等于1024px的设备上应用以下样式 */
body {
font-size: 18px;
}
}弹性布局可以根据设备屏幕的宽度自动调整元素的大小和位置，从而实现页面自适应。通过设置元素的flex属性，可以让元素按照一定的比例分配剩余空间，从而实现页面的自适应性。
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 300px;
margin: 10px;
}rem单位是相对于根元素(html元素)的字体大小来计算的单位，可以根据设备屏幕的字体大小自动调整元素的大小和位置，从而实现页面自适应。通过设置根元素的字体大小，可以让整个页面的元素按照一定的比例进行缩放。
html {
font-size: 16px;
}
@media screen and (max-width: 767px) {
/* 在宽度小于767px的设备上将根元素的字体大小设置为14px */
html {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在宽度在768px到1023px之间的设备上将根元素的字体大小设置为16px */
html {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在宽度大于等于1024px的设备上将根元素的字体大小设置为18px */
html {
font-size: 18px;
}
}rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
(其他)默认html的font-size是16px，即1rem=16px，如果某p宽度为32px你可以设为2rem。
通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：
Html{font-size:62.5%(10/16*100%)}具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh，
你设置的50vw就是相当于设备宽度的50%，你设置的100vh就是相当于设备高度的100%。
切记：不要把vw和vh弄混淆了，如果你给元素宽度设置100vh，那么基本上(设备的宽小于高的情况)就会超出你的屏幕X轴出现滚动条。如果你给元素高度设置100vw，那么就满足不了你想要把这个元素铺满整个设备高度的愿望了。
一般情况下笔者宽度，和字体大小，左右边距间距等都是用vw单位，
高度，行高，上下边距间距等都是用vh单位。
使用方法：
1. 将设计图放到PS里面，查看整个图片的宽度和高度，分别放在设计稿宽度和设计稿高度当中。（注意是px单位哦）
2. 然后量出你想要量的地方，将宽度和高度分别放置到量出的宽度和量出的高度当中。（注意还是px单位哦）
3. 然后点击换算按钮，就可以将换算出来的宽度和高度大小放置到你的代码当中了哦。（注意是vw和vh单位哦）
一般移动端的布局可分为三个部分，头部->主体->tabbar的脚部。
所以我们可以把项目的外层这样设置一下：
.body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* 头部部分 */
header {
height: 10vh; /* 固定的高度，根据你的设计图调整 */
}
/* 主体部分 */
main {
flex: 1; /* 占据页面剩余所有部分 */
}
/* tabbar脚部部分 */
footer {
height: 10vh; /* 固定的高度，根据你的设计图调整 */
}使项目中的字体大小自适应：
果给你一些文本文字，要让它变得美，你将会采用什么方法？用过PPT的人都知道，可以调整颜色，可以设定字体，可以进行对齐、缩进等操作。这些在PPT中常用的方法，在CSS中也是很容易实现的，代码也简单。
在CSS中，设置文本颜色，用color属性，值可为16进制、一个RGB值或颜色名称。十六进制用#号开始，后接#RGB，比如 #ff0000；RGB值为rgb(255,0,51)形式；颜色名称名称直接就是英语单词，如red。
样色表ys2.css文件内容
body {
color:#00ff00;
}
h3 {
color:CadetBlue;
}
p {
color:rgb(0,0,255);
}HTML文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了，还能找工作不?</h3>
<p>
昨晚七点多收到通知，说老板抽查了几次监控，发现一些人上班浑水摸鱼玩手机，
要召开紧急视频会议，<br/>
全体员工必须参会，视频里老板很生气，正火冒三丈的批评那些财务人员上班玩手机，
说再不多提升自己，<br/>
以后早晚被电脑和机器代替， 然后我忘记关麦了，说了句：机器能替你吃牢饭？<br/>
唉，也不知道年底了工作好不好找。</p>
</body>
</html>输出结果
CSS字体属性定义字体，加粗，大小，文字样式。在用软件时，你是不是见过宋体什么的，没错，那个就是字体了。在CSS中，可以使用Font Family："宋体"的方式指定字体；样式，就是加粗、倾斜那个，用font-style指定；大小则用font-size。
/* ys2.css里的样式表内容 */
.f {
font-family: "宋体";
/* 加粗 */
font-style: oblique;
font-size: 40px;
}
<!--html文件内容-->
<div class="f">
牛的程序员，羊一样的女孩
</div>输出结果
文本在元素内水平对齐，可以使用 text-align: 值的方式，center居中对齐，left居左对齐，right居右对齐；垂直居中对齐，可用vertical-align和line-height结合的方式进行指定，这个平时会经常用到，记下来。
/*css文件里的内容*/
/*水平居中*/
.div-width {
width: 800px;
}
.txt-left {
text-align: left;
color: aquamarine;
}
.txt-center {
text-align: center;
color: darkcyan;
}
.txt-right {
text-align: right;
color: darkgreen;
}
/*垂直居中*/
.txt-vertical {
border: 2px solid green;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
<!-- HTML文件里的内容 -->
<div class="div-width">
<!--水平居中-->
<p class="txt-left">向左看齐</p>
<p class="txt-center">居中对齐</p>
<p class="txt-right">向右看齐</p>
<!--垂直居中-->
<div class="txt-vertical">垂直居中方法1</div>
<div>垂直居中方法2</div>
</div>输出结果
如果要对标签进行水平居中的话，可以使用 margin: auto;用position: absolute; 属性来对齐元素的话，有些浏览器不支持，所以不推荐。
/* 在样式表文件中 */
.div-center {
margin: auto;
width: 50%;
border: 1px solid green;
height: 300px;
text-align: center;
vertical-align: center;
line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在，人海中间：div在Web居中，文字在div中居中</div>输出结果
为了让阅读舒服，在进行文本排版之时，会考虑字与字之间的间距，有行与行之间的距离，还有段落的缩进等。在CSS中，字符间距可用letter-spacing:值；行间距依然用line-height:值；段落字符缩进，用text-indent即可。温馨提醒：text-indent只对div和p标签有效。
/* 在样式表文件中 */
.text-spacing {
width: 900px;
border: 1px solid green;
letter-spacing: 50px;
}
p.row {
line-height: 3.0em;
}
p.i {
/*em是相对单位，2em即现在一个字大小的两倍*/
text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
他说风雨中，这点痛算什么
</div>
<p class="row">
秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。<br/>
秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，<br/>
长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。
</p>
<p class="i">
当我以为我无法继续走下去时，我强迫自己要继续前进。<br/>
我的成功是基于我的坚持，并非运气。<br/>
努力,是为了跳出你厌恶的圈子。<br/>
读书,是为了远离渣货垃圾人。<br/>
健身,是为了让讨厌的人心平气和...
</p>输出结果
好了，有关CSS文本或元素对齐的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
*请认真填写需求信息，我们会在24小时内与您取得联系。
