目录
2.div设置背景色：background-color：blue；
（2）超出部分出现滚动条：overflow: scroll；
四：outline（不是边框，边框外围的outline），border（边框）
2.边框，border（这个是四个方向一起设置），border-left，border-right，border-top，border-bottom
五：一个小例子：为了说明，对于其他带边框的元素，outline和border也是适用的
一.CSS浮动引述：
CSS浮动主要作用是，页面布局和美化
CSS浮动：
●用于页面布局和美化；
●注意看其具体的效果；多练习，观察效果
一：div概述
1.什么是div。概述
什么是div：div是个容器
●DIV是层叠样式表中的定位技术，全称为DIVision；
●有的时候，把div称为图层，更多的时候称之为“块”；
以前做C#项目和javafx项目时，当时的场景是，当设计的窗体很多，而且这些窗体的页面布局需要统一时，用到了很多panel来协助页面的切割、划分，按照统一的样式规范，把页面分割成了很多不同的区域，在不同的区域中放置不同的控件，以使得开发过程时，带来各种开发的方便。
HTML和CSS主要用于开发htmlweb页面（C#是开发窗体，都是页面啦），div是CSS中的容器，其主要作用是页面切割和布局，大概率其基本思想和C#中的panel应该大致类似。
可以想一下，当一个网页各种跳动转换、切换时，那么多页面元素如果没有一个容器框住，没有一个“组织者”给他有效地组织和划分和归类，那么不仅页面会严重混乱，也会给开发带来许多的混乱和麻烦。
2.div有哪些内容。概述
div样式设置：
●div大小，背景设置，坐标设置；
●div溢出（div是个容器，里面可以存放各种类型的内容，比如图片文字段落等，如果内容太多超出了div大小就叫溢出；溢出的效果有，隐藏，滚动条滚动，正常显示等等）效果演示，换行，滚动条显示；
●以为div为例，说明边框、轮廓设置（边框和轮廓适用于任何带边框的元素，不仅仅只针对于div的，下面也有举例说明这一点）；
●盒子模型（这个对于CSS浮动很关键）
3.div的背景色，大小设置，坐标设置
下图中，position：absolute：设置了坐标系的方式，这儿的absolute就代表是绝对坐标系，即最左上角就是（0，0），即position有点设置参照物的意思。如果不设置position时，就没有参照物了，下面再设置top和left不会报错，但不会起作用，没有任何效果（因为没有参照物）。
这个position非常重要，这儿为了使用，先说明一下，后续会着重介绍。
4.div溢出时，几种处理策略
div的溢出处理：几种可以考虑的处理策略
溢出处理：
●超出div宽度高度的文字或图片进行隐藏处理；
●超出div宽度高度的文字或图片呢增加滚动条；
到代码层面，具体实现的时候，溢出后的不同策略的实现，需要通过设置overflow属性来实现：
三：div实际范例
1.初始代码：未添加任何效果时
<!DOCTYPE html>
<html>
<head>
<title>内部样式表演示</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div1">
2月19日晚上，张韶涵被湖北宜昌某家商场邀请前去演唱歌曲。因为是露天的、免费的，有很多市民都前往该商业广场，导致交通一度瘫痪，广场被围得水泄不通。张韶涵当天穿着灰色的西装上衣和西装裙，状态很好，网友纷纷表示:"主办方还是低估了张韶涵的国民度啊。""不得不说她走上舞台的那一瞬间好专业啊，真的是专业的歌手。""因为免费，所以除了粉丝还有路人，还有爱凑热闹的大爷大妈也不会放过机会的。"
</div>
</body>
</html>当不使用任何CSS时，显示效果：发现当没有设置div的属性的时候，div有点放飞自我，其高度和宽度是默认覆盖整个页面的；
2.div设置背景色：background-color：blue；
#div1{
background-color: yellow;
}显示效果：从这个例子再一看说明：当没有设置div的属性的时候，div有点放飞自我，其高度和宽度是默认覆盖整个页面的；
3.div设置高度和宽度：
#div1{
background-color: yellow;
width: 150px;
height: 150px;
}显示效果：发现，溢出了。。。。。默认是超出的内容不会被修剪，会呈现在div元素框之外。（此外，当溢出时，也可以隐藏，或，添加滚动条）
4.div设置坐标位置
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
}显示效果：
5.div溢出处理
（1）超出部分隐藏：overflow: hidden;
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
overflow: hidden;
}显示效果：不论文字还是图片都可以放到div中，当overflow: hidden时，其超出的部分都会隐藏。（好吧，图片懒得试了）
（2）超出部分出现滚动条：overflow: scroll；
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
overflow: scroll;
}显示效果：
四：outline（不是边框，边框外围的outline），border（边框）
1.outline
四周（div的外围，边框外围的）的一条线：位于边框的外围，outline不是边框。
div默认是不显示边框的，即默认就是：outline: none；
设置边框的简单例子：
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
overflow: scroll;
outline: dashed;
}显示效果：
2.边框，border（这个是四个方向一起设置），border-left，border-right，border-top，border-bottom
设置边框，其有上下左右5个
实例：
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
overflow: scroll;
outline: dashed;
border-right: solid;
}显示效果：有边框是黑色实心的线（附：可以看到，outline: dashed;这个四周的一条线，是在边框的外面，即再次说明，outline不是边框，其是边框外围的outline）
3.outline，border都是针对div的。
注解：四周的一条线，边框，都是针对div的，具体意思看下面的例子：溢出时的处理策略改为放任不管，不处理时：
#div1{
background-color: yellow;
width: 150px;
height: 150px;
/*要想设置位置，必须要设置position，否则，下面的top和left不会生效*/
top: 100px;
position: absolute;
left: 100px;
/*overflow: scroll;*/
outline: dashed;
border-right: double;
}显示效果：能懂？→四周的一条线，边框，都是div的
（其实对于其他带边框的元素也是适用的，比如文本框中也有outline和border；换句话说，文本框等其他带有边框的元素也是有outline和border这两个东西的。。。。。）
五：一个小例子：为了说明，对于其他带边框的元素，outline和border也是适用的
一个小例子：通过这个例子可以发现，outline（四周的一条线）和border（边框）等属性，不仅仅可以用于div，不是div专用的，对于任何其他的凡是有边框的地方都可以使用。。。。没事多试一试，多看效果
<!DOCTYPE html>
<html>
<head>
<title>内部样式表演示</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div2">
<label id="labelName">姓名：</label><input type="text" name="" id="inputName">
</div>
</body>
</html>index.css：
#div2{
position: absolute;
top: 100px;
left: 400px;
}
#inputName{
outline: none;/*（3）：去掉文本框的outline的，那个长方形的细细的边框。
这个边框不是文本框的边框，而是文本框边框外围的那个outline*/
border: none;/*（2）：去掉文本框边框.。如果只有（1）和（2）时候静态效果是ok但，但一
旦输入框捕获焦点，输入框四周会出现一条蓝的的边框（这个不是文本框的边框，而
是文本框边框外围的outline。。。所以需要（3）*/
border-bottom:solid; /*（1）：添加底部的粗线*/
/*这样一看，border-bottom边框设置，也可以用于input输入框，而不仅仅只是div有*/
/*即凡是有边框的东西，都可以设置，四周的一条线，和边框*/
}效果：
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
