【CSS】5-盒子模型

最新推荐文章于 2024-07-09 17:45:40 发布

JeffHan^_^

最新推荐文章于 2024-07-09 17:45:40 发布

阅读量96

点赞数

分类专栏： CSS教程文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993225

版权

CSS教程专栏收录该内容

12 篇文章 0 订阅

订阅专栏

5-盒子模型

1.盒子模型的要素

（从内到外）内容，内边距，边框，外边距

2.边框样式

边框样式：
    1.border-style：边框类型，solid实现，dotted点线 dashed虚线
    2.border-width: 边框宽度
    3.border-color: 边框颜色
    4.border-radius: 边框的圆角
    
    边框样式复合写法：border: style width color;
    
    可以设置

实例：

<head>
	<meta charset="utf-8">
	<title>css边框样式</title>
	<style type="text/css">
		
		.div-style-1 {
			width: 300px;
			height: 300px;
			background-color: yellowgreen;
			
			text-align: center;
			line-height: 300px;
			color: white;
			font-size: 30px;
			font-weight: bolder;
		}
		
		#div1 {
			
			/* 边框样式 */
			border-style: dashed;
			border-width: 5px;
			border-color: black;
			border-radius: 10px;
		}
		
		#div2 {
			/* border: dotted 6px red; */
			border-top: solid 5px green;
			border-left: double 5px yellow;
			border-bottom: dotted 5px red;
			border-right: dashed 5px pink;
		}
		
		#div3:hover {
			border-bottom: solid 10px green;
		}
		
		img {
			border: solid 8px skyblue;
		}
		
	</style>
</head>
<body>
	
	<div id="div1" class="div-style-1">
		HELLO WORLD
	</div>
	
	<hr >
	
	<div id="div2" class="div-style-1">
		HELLO WORLD
	</div>
	
	<hr >
	
	<div id="div3" class="div-style-1">
		HELLO WORLD
	</div>
	
	<hr >
	
	<img src="img/spider.jpg" >
	
</body>

3.内边距和外边距

    内外边距
        1.margin：外边距
        2.padding：内边距
            注意：
                1.边距复合写法：
                    4个值：上 右 下 左
                    2个值：上下 左右
                    1个值：上下左右
                2.使用margin来居中块元素：margin：0 auto
                    注意:元素必须是块元素，必须设置宽度
                3.默认情况下，padding会撑大原来的元素，可以增加box-sizing：border-box；来改变这一特性，使得padding向内压缩。
        3.可以使用display:inline-block来使得块元素排列在一行

实例：

<style type="text/css">
			.div-style-1 {
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
				
				text-align: center;
				line-height: 300px;
				color: white;
				font-size: 30px;
				font-weight: bolder;
				
				/* 
					块元素：可以设置宽高，但是不能排列在一行 
					行内元素：不可以设置宽高，但是可以排列在一行
					行内块元素：可以设置宽高，也可以排列在一行
				*/
				/* 改变元素属性：block块元素、inline行内元素、inline-block行内块元素 */
				display: inline-block;
				
				/* margin: 10px 20px 30px 40px; */
				/* margin: 10px 20px; */
				/* margin: 10px; */
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;
				
			}
			
			.span-style-1 {
				background-color: gray;
				
				/* 行内元素设置宽高无效 */
				width: 300px;
				height: 300px;
			}
			
			#div5 {
				display: block;
				margin: 50px auto;
				
				border: solid 1px red;
				
				/* 内边距 */
				padding: 10px 20px 30px 40px;
			}
			
			#div6 {
				display: block;
				margin: 50px auto;
				
				border: solid 1px red;
				
				/* 设置为边框盒子，padding会向内压缩，不会撑大div */
				box-sizing: border-box;
				
				/* 内边距 */
				padding: 10px 20px 30px 40px;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="div-style-1">
			HELLO WORLD
		</div><div id="div2" class="div-style-1">
			HELLO WORLD
		</div><div id="div3" class="div-style-1">
			HELLO WORLD
		</div><div id="div4" class="div-style-1">
			HELLO WORLD
		</div>
		
		<hr >
		
		<span class="span-style-1">
			HELLO HTML
		</span>
		<span class="span-style-1">
			HELLO HTML
		</span>
		<span class="span-style-1">
			HELLO HTML
		</span>
		
		<hr >
		
		<div id="div5" class="div-style-1">
			HELLO WORLD
		</div>
		
		<div id="div6" class="div-style-1">
			HELLO WORLD
		</div>
		
	</body>