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