跟着小黑学Java-3-前端-HTML基础-div的样式、属性

最新推荐文章于 2025-08-06 16:23:50 发布

loowooowool

最新推荐文章于 2025-08-06 16:23:50 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏：跟着小黑学Java 文章标签： java web java 前端

本文链接：https://blog.youkuaiyun.com/loowooowool/article/details/79034770

跟着小黑学Java 专栏收录该内容

4 篇文章

订阅专栏

本文介绍网页设计中常用容器控件DIV的基础样式设置方法，包括大小、边框、背景及显示与隐藏等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇我们一起来学习一个比较重要的容器控件<div></div>，它是网页上经常用到的控件，大家可以就把它理解为一个放东西的盒子。这一篇我们来介绍一下div的一些样式和属性。我把样式归为三种，基础样式、边距和定位、和浮动。下面就通过示例向大家展示。

基础样式：控制div的大小、边框、背景、定位类型、显示与隐藏。

<!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=gb2312" />
		<title>div及其样式、属性</title>
	</head>
	
	<body>
		<div style="width:300px; height:300px; border:#00FFFF solid 10px; background:#FF00FF; display:block;"></div>
	</body>
</html>

效果如下：

width、height：这两个属性分别控制div的宽和高，也可以用百分比（%）来控制div大小。当div直接放在body中时style="width:100%; height:100%;”这样写div的宽度就是页面的宽度，因为页面可产生滚动条，所以高度100%没有效果，或者理解为高度为0，但是div包含在另外的容器内，如包含在另外的div内，使用100%，它的宽高就和父级的div相同。
border：这个属性控制div的边框样式。例子中的写法border:#00FFFF solid 10px;三个值分别定义了边框的颜色、线条类别和边框宽度。也可以分开写：border-color:#00FFFF; border-style:solid; border-width:10px;。div有4个边框上、下、左、右。例子中的写法代表了四个边框是同样的样式，也可以单独定义：border-top:#00FFFF solid 10px; border-bottom:#00FFFF solid 10px; border-left:#00FFFF solid 10px; border-right:#00FFFF solid 10px;当然四个边框单独定义时，边框的颜色、线条和宽度也可以单独定义，例如：border-top-color:#00FFFF;可以根据需要灵活设置。还要注意的是border在页面中是占空间的，即：虽然外面div宽度定义的是300px，但存在左右边框宽度各10px，所以整个div的宽度为320px。

background：这个属性控制div的背景

display：这个控件控制div的显示：有两个常用的选项block、none。现在大家可以简单理解为block为可见，none为不可见。display为none的控件不占页面的空间。

div的边距和定位、浮动内容较多，在下一遍中讲述。