Html的DIV，CSS基础
div全称是divsion，意为区分。如果单独使用div，那么其效果和使用<p></p>是一样的。一般div都会加上css来使用。
div本身就相当于一个容器，里面照样可以嵌套使用。
Css全称Cascading style Sheets，中文为 层叠样式表，使用css可以对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
在本文中，图片都是这一张：
到底如何使用css和div呢？
首先，写好html标准的基本格式：
<html> <head> <meta http-equiv = "content-type" content = "text/html;charset = utf-8"> <title>DIV</title> </head> <body > </body> </html>
div当然是作为内容写在body里面。css作为style写在head里面。
在这里我们使用外部连接css的方法：
在我们的html文件同目录下有一个style.css文件，专门用来写css。
<link href = "style.css" type = "text/css" rel = "stylesheet"/>
这一句话写在head里面。
在body中，加入一个div标签。首先来测试一下框框和背景图片
<body > <div class = "ta">test</div> <div class = "bg"></div> </body>
在body中加入了两个div标签，并且都加入了类选择器，一个指向style.css的ta，一个指向style.css的bg。
在style.css中，我们的代码是：
.ta{border:1 #ff0000 solid;width:100;height:100}
.bg{width : 200;height : 200;
background: url('pic.jpg') no-repeat -400 -100 #ff0000}其中ta为style名字，里面定义了边框样式，粗细为1，颜色为红，实线。宽度和高度都是100。
bg意为背景，宽高都是200，其中背景图片为pic.jpg也是放在同一目录的图片。不平铺，图片的位置放在这个div的-400，-100的位置，也就是说div显示出来的是图片的400，100开始的某一部分。如果图片无法正常显示，就显示背景色红色。
效果如图：
可以看到，图片是显示了其中的一部分。
以上就是background部分了
接下来看text部分
text属性中有以下几个字段：
text-indent 缩进元素文本的首行，如值为2em，则缩进两个汉字的宽度
text-align 对其元素中的文本
word-spacing设置字间距，按空格区分英文单词和汉字词语
letter-spacing设置字符间距，每个字母或者汉字中间的间距
line-height设置行高，一般用来调整字显示在div中的哪个位置
color设置文字颜色
在style.css中添加两个：
#eng {
text-indent:2em;
word-spacing:10em;
letter-spacing:1em;
line-height:20px;
color:#ff0000;
}
#cn{
text-indent:2em;
word-spacing:10em;
letter-spacing:1em;
line-height:20px;
color:#00ff00;
}在html中添加两个div
<div id = "eng">this is a div test programe.</div> <div id = "cn">这是一个 div 测试 程序。</div>
可以看到现在的效果：
关于文字，还有另一个属性：font
也就是字体的风格：
#font{
font-family:"黑体";
font-size:20;
font-weight:bold;
font-style:italic;
}
<div id = "font">这是一个 div 测试 程序。</div>
列表：list
list-style-type：none:无标记；disc:默认，实心圆；circle:空心圆；square:实心方块
list-style-image：将图象设置为列表项标志
list-style-position：inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
#list ul li{
border:1px #00ff00 solid ;
list-style:square outside ;
}
<div id = "list">
<ul>
<li>长沙</li>
<li>株洲</li>
<li>湘潭</li>
</ul></div> 
CSS框模型
padding 内边距
padding :10px;表示所有方向都是10 ，但是优先满足左和上的内边距是10像素。
padding :10px 20px；表示上下边距10，左右20像素。
padding :10px 20px 30px;表示上10px，左右20px 下30px像素。
padding :10px 20px 30px 40px;表示上10px，右20px 下30px 左40px像素（顺时针）。
border 边框
magin外边距
magin:10px;表示所有方向都是10 ，但是优先满足左和上的外边距是10像素。
magin:10px 20px；表示上下边距10，左右20像素。
magin:10px 20px 30px;表示上10px，左右20px 下30px像素。
magin:10px 20px 30px 40px;表示上10px，右20px 下30px 左40px像素（顺时针）。
#model{
border:1 #0000ff solid;
width:100px;
margin:10px 50px 20px;
padding:100px;
}
#superModel{
border:2px #00ffff solid;
width:30%;
}<div id = "superModel" ><div id = "model"> 框模型</div></div> </body>
运行效果：
Css浮动：float属性
float可以有left，right，none三个值，即向左浮动，向右浮动，不浮动。
其实与流式布局非常类似
一旦某个div浮动了，就不会受到原来的约束，和其余的就不处于同一层了。
使用浮动，可以使div并排放置。
如此图，
Second和First是都向右浮动了的（float:right;），在Third上清除了右浮动（clear:right;），所以第三个框显示在了第二行。
第四个第五个向左浮动，第五个在第三行显示不下了，所以自动换了行。第六个向右浮动了。第七个清除了所有的浮动（clear:both;）。
之后是一个嵌套div，先是让他们向左右浮动了，之后在红色线的div中清除了right浮动。
其完整代码：
<html>
<head>
<meta http-equiv="content-type" content = "text/html; charset="gbk">
<title>浮动窗口</title>
<style>
#First{
border:2px #00ff00 solid;
width : 200;
float:right;
}
#Second{
border:2px #ccff00 solid;
width : 200;
float:right;
}
#Third{
border:2px #00ffcc solid;
width : 200;
clear:right;
}
#Fourth{
border:2px #000000 solid;
width : 200;
float:left;
}
#Fifth{
border:2px #00ff00 solid;
width : 900;
float:left;
}
#Sixth{
border:2px #00ff00 solid;
width : 300;
float:right;
}
#Seventh{
border:2px #00ff00 solid;
width : 900;
clear:both;
}
#Eighth{
border:10px solid;
float:left;
}
#Nineth{
float:left;
}
#Tenth{
float:right;
}
#c{
height:2px;
background:#ff0000;
clear:right;
}
</style>
</head>
<body>
<div id = "First">First</div>
<div id = "Second">Second</div>
<div id = "Third">Third</div>
<div id = "Fourth">Fourth</div>
<div id = "Fifth">Fifth</div>
<div id = "Sixth">Sixth</div>
<div id = "Seventh">Seventh</div>
<div id = "Eighth">
<img src="pic.jpg" height = 40/>
<div id = "Nineth">我是里面的div</div>
<div id = "Tenth">我也是里面的div<br/>我也是里面的div<br/>我也是里面的div<br/></div>
<div id="c"></div>
</div>
</body>
</html>
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT