CSS学习（五）——区块、浮动、定位、溢出、滚动条

最新推荐文章于 2024-05-07 14:55:18 发布

交易程序猿

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量2.3k

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/codemonkeysama/article/details/51067608

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

区块

占据一整行的标记叫做区块。例如：

只要是区块，可以使用如下属性名称：

属性名称	设定值	说明
width	像素/百分比	区块的宽度
height	像素/百分比	区块的高度
min-height	像素/百分比	区块的最小高度
max-height	像素/百分比	区块的最大高度
min-width	像素/百分比	区块的最小宽度
max-width	像素/百分比	区块的最大宽度

下面例子可以体现区块的含义以及各种属性的意义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>区块、浮动、定位、溢出、滚动条</title>
  <style type="text/css">
    div{background-color:pink;width:50%;min-height:50px;max-height:100px}
  </style>
</head>
<body>
  <div>CSS区块、浮动、定位、溢出、滚动条<br />
  	CSS区块、浮动、定位、溢出、滚动条<br />
    CSS区块、浮动、定位、溢出、滚动条<br />
    CSS区块、浮动、定位、溢出、滚动条<br />
    CSS区块、浮动、定位、溢出、滚动条<br />
    CSS区块、浮动、定位、溢出、滚动条<br />
    CSS区块、浮动、定位、溢出、滚动条<br />
</body>
</html>

浮动

属性名称	设定值	说明
float	none	正常显示
	left	元件往左边浮动
	right	元件往右边浮动
clear	none	允许元件左右浮动
	left/right	不允许元件往左/右边浮动
	both	不允许元件两边浮动

往左/右边浮动的意思是：如果视窗足够宽，那么元件会尽量挤占上面的位置，与前面的元件并列显示。

注意，如果有多个元件，前面的元件使用了float属性，后面的元件如果不使用float，那么需要添加clear:both属性，否则该元件会被前面的元件覆盖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>区块、浮动、定位、溢出、滚动条</title>
  <style type="text/css">
    .div1{width:100px;height:100px;background-color:red;float:left;}
    .div2{width:100px;height:100px;background-color:pink;float:left;}
    .div3{width:100px;height:100px;background-color:black;clear:both;}
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</body>
</html>

定位

属性名称	设定值	说明
position	relative	设置区块左上角为基准点来移动
	absolute	设置网页左上角为基准点来移动
left	像素/百分比	基准点距离左边界移动多少
top	像素/百分比	基准点距离上边界移动多少
right	像素/百分比	基准点距离右边界移动多少
bottom	像素/百分比	基准点距离下边界移动多少
z-index	数字	数字越大层级越高。

注一：position属性与margin-left/right/top-bottom属性的区别在于，position让元件在移动的过程中不影响周围其他元件的位置，不会让其他元件的位置发生变化，而margin属性在移动元件时，会让其他紧挨着该元件的元件位置也一起发生变化。

注二：设定值relative与absolute的区别在于：1.当设定为relative时，left/top/right/bottom里设置的数值是元件距离外部边框的水平或垂直距离，当设置为absolute时，left/top/right/bottom里设置的数值是元件距离外部边框左上角的斜角距离；2. 当设定为relative时，元件移动后，紧挨元件的其他元件不会占用该元件原本的位置，也即元件原本的位置仍然保留在网页上，当设置为absolute时，元件移动后，紧挨元件的其他元件会自动顶上占据它的位置。

注三：属性z-index的作用是，当position的设定值为absolute时，决定重叠的元件叠放的顺序。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  *{padding:0;margin:0;}
  #contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
  #contion p{position:absolute;left:10px;top:10px;}
</style>
<title>复习</title>
</head>
<body>
  <div ID="contion">
  	<p>PHP100.COM中文网</p>
  </div>
</body>

05/11补充例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  *{padding:0;margin:0;}
  #contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
  #contion p{position:absolute;left:10px;top:10px;}
</style>
<title>复习</title>
</head>
<body>
  <div ID="contion">
  	<p>复习区块</p>
  </div>
</body>

溢出

当对象（区块）内放置的内容溢出了对象时，可以通过以下属性自动给区块添加滚动条：

属性名称	设定值	说明
overflow	auto	在必需时对象内容才会被裁切或添加滚动条
	hidden	不显示超过对象尺寸的内容
	scroll	总是显示滚动条
overflow-x	（同上）
overflow-y	（同上）

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>区块、浮动、定位、溢出、滚动条</title>
  <style type="text/css">
    div{width:200px;height:100px;background-color:pink;overflow:auto;}
  </style>
</head>
<body>
  <div>CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  </div>
</body>
</html>

滚动条的外观属性

属性名称	设定值	说明
scrollbar-3dlight-color	十六进制/英文	滚动条亮边框
scrollbar-highlight-color	十六进制/英文	滚动条3D 界面亮边
scrollbar-face-color	十六进制/英文	滚动条3D 表面
scrollbar-arrow-color	十六进制/英文	滚动条方向箭头
scrollbar-shadow-color	十六进制/英文	滚动条3D 暗边
scrollbar-darkshadow-color	十六进制/英文	滚动条暗边框
scrollbar-base-color	十六进制/英文	滚动条基准颜色
scrollbar-track-color	十六进制/英文	滚动条的拖动区域

交易程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（五）——区块、浮动、定位、溢出、滚动条

区块占据一整行的标记叫做区块。例如：......只要是区块，可以使用如下属性名称：属性名称设定值说明width像素/百分比区块的宽度height像素/百分比区块的高度min-height像素/百分比区块的最小高度max-height像素/百分比区块的最大高度min
复制链接

扫一扫

专栏目录