css3基础知识第三章div盒子

最新推荐文章于 2023-03-01 20:55:25 发布

ITDragon龙

最新推荐文章于 2023-03-01 20:55:25 发布

阅读量4.9k

点赞数 1

分类专栏： css3 前端技术文章标签： css3

本文链接：https://blog.csdn.net/qq_19558705/article/details/49840189

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

一张网页可以理解为多个div盒子组成。让我们先了解CSS 的框模型 (Box Model)

框模型：元素框处理元素内容、内边距、边框和外边距的方式

参考下图

边框：

border:1px solid red;

1px 是边框的粗细，red是边框的颜色，solid是边框的样式

border-width 边框宽度：一般用像素表示

border-color 颜色有：可以是英文单词；也可以是16进制（记得有#号）

border-style 样式有： dashed虚线/ dotted点线/ solid实线/ double双线（像素跳高才明显）/ hidden隐藏 / groove3D 凹槽边框/ ridge：3D垄状边框/ inset：3D朝内边框/ outset：3D朝外边框

边框的四边：

border-top:1px solid red;

border-bottom:1px solid red;

border-left:1px solid red;

border-right:1px solid red;

可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格

填充：

内容与边框之间是可以设置距离，称之为填充。其顺序为上右下左

padding:10px 20px 30px 40px;

也可以分开写

padding-top: 10px ;

padding-right: 10px ;

padding-bottom: 10px ;

padding-left: 10px ;

如果上右下左的值是一样的；可以直接写成一个

padding:10px;

如果上下；右左一样；可以写成两个

padding:10px 20px;

边界：

margin和padding用法一样

宽度：

一个元素的实际宽度是要计算边框的宽度的

div代码演示：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>名字</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="">
		<style type="text/css">
			*{margin:0;padding:0;}
			div{width:240px;height:240px;border:1px solid red;}
			.box{float:left;margin:100px 100px 0 100px;}
			.box_padding{float:left;padding:50px 50px 0 50px;}
		</style>
	</head>
	<body>
		<div class="box">我是一个有margin的div盒子</div>
		<div class="box_padding">我是一个有padding的div盒子</div>
	</body>
</html>

border代码演示：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>border</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="">
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			.demo_border{width:400px;height:300px;margin:50px auto;border:1px solid red;border-radius:8px;}
			.demo_border .one{width:300px;height:200px;margin:50px auto;
				border-right: dashed red;
				border-bottom: dotted red;
				border-left: double red;
				border-top: hidden red;}
			.demo_border .one .two{width:200px;height:100px;margin:50px auto;
				border-right:6px groove red;
				border-bottom:6px ridge red;
				border-left:6px inset red;
				border-top:6px outset red;}
		</style>
	</head>
	<body>
		<div class="demo_border">
			<div class="one">
				<div class="two"></div>
			</div>
		</div>
	</body>
</html>

圆：

其实就是把圆角设置和div的宽度一样就可以了

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>圆</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="">
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			.circle{width:200px;height:200px;border:1px solid green;border-radius:200px;
				margin:100px auto;background:green;}
			.circle .small{width:180px;height:180px;border:1px solid green;
				border-radius:180px;background:#fff;margin:10px auto;}
		</style>
 
	</head>
	<body>
		<div class="circle">
			<div class="small"></div>
		</div>
	</body>
</html>

一点点进步，一点点成长，如有有问题可以留言给我，我会及时更正

更多干货等你来拿 http://www.itit123.cn/

ITDragon龙

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3基础知识第三章div盒子

一张网页可以理解为多个div盒子组成。让我们先了解CSS 的框模型 (Box Model) 框模型：元素框处理元素内容、内边距、边框和外边距的方式参考下图边框：border:1px solid red;1px 是边框的粗细，red是边框的颜色，solid是边框的样式border-width 边框宽度：一般用像素表示border-co
复制链接

扫一扫