• 中文
    • English
  • 注册
  • 查看作者
  • 4:CSS盒子模型

    一.  盒子

    CSS处理网页时,认为每个元素都包含在一个不可见的盒子里,把所有的元素想象成盒子,那么我们对网页的布局就相当于是摆放盒子,我们只需要将相应的盒子放到网页中相应的位置即可完成网页的布局。

    二.  盒子模型

    一个盒子我们会分为四个部分

    • 内容区(content)

    • 内边距(padding)

    • 边框(border)

    • 外边距(margin)

    4:CSS盒子模型

    三.  内容区(content)

    内容区指的是盒子中放置内容的区域,如果没有为元素设置内边距和边框,则内容区的大小和盒子大小一致。width和height两个属性设置的就是内容区的大小,但是width和height属性只能用于块级标签。

    举例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:300px;
    				height:300px;
    				background-color:yellow;
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字
    		</div>
    	</body>
    </html>

    4:CSS盒子模型

    四.  内边距(padding)

    内边距指的是元素内容区与边框以内的空间,分别设置上、左右、下四个方向的内边距:

    padding:10px 20px 30px

    分别设置上下内边距为10px,左右内边距为20px:

    padding:10px 20px

    同时设置上下左右四个方向的内边距为10px:

    padding:10px

    同时提供了单独设置四个方向的属性

    左:padding-left
    右:padding-right
    上:padding-top
    下:padding-bottom

    注意:width和height不包含padding的大小,只代表内容区的大小

    举例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:300px;
    				height:300px;
    				background-color:yellow;
    				padding:20px;
    			
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字
    		</div>
    	</body>
    </html>

    4:CSS盒子模型

    五.  边框(border)

    使用border属性设置盒子的边框,分别设置了边框的宽度为1px、颜色为red和样式为solid

    border:1px red solid

    分别设置四个方向的边框

    左:border-left
    右:border-right
    上:border-top
    下:border-bottom

    边框除了实线外还有其他的样式:

    • none(没有边框)

    • dotted(点线)

    • dashed(虚线)

    • solid(实线)

    • double(双线)

    • ……

    举例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:300px;
    				height:300px;
    				background-color:yellow;
    				padding:20px;
    				border:5px #0F0 solid
    				
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字
    		</div>
    	</body>
    </html>

    4:CSS盒子模型

    六.  外边距(margin)

    外边距是元素边框与周围元素相距的空间,使用margin属性可以设置外边距,用法和padding类似,同时也提供了四个方向的margin-top/right/bottom/left。当将左右边距设置为auto时,浏览器会将左右外边距设置为相等。

    举例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title> 标题 </title>
    		<meta charset='UTF-8'/>
    		<style type="text/css">
    			div {
    				width:300px;
    				height:300px;
    				background-color:yellow;
    				padding:20px;
    				border:5px #0F0 solid;
    				margin:5px 10px 15px 20px;
    			}
    		</style>	
    	</head>
    	<body>
    		<div> 
    			div中的文字
    		</div>
    	</body>
    </html>

    4:CSS盒子模型

    外边距还会发生合并的问题,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。详情请查看:css外边距合并

    还可以通过外边距将元素设置为水平居中:

    margin:0 auto;
    山东省
  • 0
  • 0
  • 0
  • 1.6k
  • 十二

    请登录之后再进行评论

    登录
    单栏布局 侧栏位置: