前端HTML盒模型

钱端攻城狮

已于 2022-02-28 17:42:33 修改

阅读量222

点赞数

分类专栏： HTML 文章标签： html 前端 javascript

于 2022-02-17 19:37:03 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/122990202

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文深入探讨了CSS盒模型，包括如何设置元素的内外边距、边框样式及颜色，以及如何通过border-radius实现边框圆角效果。示例中详细展示了不同属性的用法，如通用选择器*用于初始化样式，以及对div元素进行的各种样式设定，如粉色背景、文字居中、边框宽度和风格等。此外，还通过具体的代码实例解释了如何创建具有特定圆角的边框。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒模型</title>
		<style type="text/css">
			/*---*号是通配符，匹配所有标签
			 可用来初始化操作
			 ------*/
			*{
				/*外边距和内填充归零*/
				margin: 0;
				padding: 0;
			}
			#one{
				background-color: pink;
				text-align: center;
				width: 300px;
				height: 300px;
				/*padding 内填充 注意：内填充颜色同背景且不可更改*/
				/*上下左右*/
				padding: 20px;
				/*上下 左右*/
				/*padding: 20px 30px;*/
				/*上 左右 下*/
				/*padding: 20px 30px 4px;*/
				/*上 下 左 右*/
				/*padding: 20px 30px 40px 50px;*/
				/*也可单指*/
				/*padding-left: 30px;*/
				/*--------------------------------------------------*/
				/*边框*/
				border-color: red;
				border-width: 20px;
				/*边框风格  solid实线最常用   dotted圆点型虚线     dashed矩形虚线       groove立体虚线*/
				border-style: dashed;
				/*复合写法   比较常用 */
				border: 20px dashed blue;
				/*定向选择一个方向*/
				border-left: green 20px solid;
				/*---------------------------------------------------*/
				/*边框圆角
				 单值  切四个角全
				 两个值 切两个对角线 即左上右下和右上左下
				 三个值 对角线 左上   右上左下  右下
				 四个值 顺时针 从左上开始
				 */
				border-radius: 150px 50% 0 0;
				/*按照位置切圆角*/
				/*border-bottom-left-radius: 50%;*/
			}
		</style>
	</head>
	<body>
		<div id="one">
			遇事不决，可问春风。
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述