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有*/
	/*即凡是有边框的东西，都可以设置，四周的一条线，和边框*/
}

效果：

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/767458