CSS3-使用盒模型

CSS3-使用盒模型

<!-- 为元素应用内边距 -->
<!-- padding-top:			-->
<!-- padding-bottom:		-->
<!-- padding-left:			-->
<!-- padding-right:			-->
<!-- padding: 顶 右 底 左   			-->
<style type = "text/css">
	table {
		padding-top: 0.2em;
		padding-left: 0.2em;
		padding-bottom: 0.5em;
		padding-right: 0.2em;
	}
</style>

<style type = "text/css">
	p {
		padding: 0.2em 0.5em 0.5em 0.2em;
	}	
</style>


<!-- 为元素应用外边距 -->
<!-- margin-top:			-->
<!-- margin-bottom:			-->
<!-- margin-left:			-->
<!-- margin-right:			-->
<!-- margin:			-->
<style type = "text/css">
	p {
		margin: 0.2em 0.5em;
	}	
</style>


<!-- 控制元素的尺寸 -->
<!-- width height     宽度,高度					-->
<!--min-width min-height     最小可接受宽度,高度					-->
<!-- max-width max-height     最大可接受宽度,高度					-->
<!-- box-sizing				设置尺寸调整应用到元素盒子的哪一部分	-->
<!--			可用属性: content-box, padding-box, border-box, margin-box  -->
<style type = "text/css">
	p {
		box-sizing: border-box;
		width: 50%;
	}	
</style>


<!-- 设置一定尺寸的盒子 -->
<!-- 设置最小和最大尺寸 -->
<style type = "text/css">
	p {
		box-sizing: border-box;
		width: 50%;
		min-width: 100px;
		max-width: 200px;
	}	
</style>


<!-- 处理溢出内容 -->
<!-- overflow-x   overflow-y  overflow   -->
<!-- 可用属性:							 -->
<!--			auto  浏览器自动处理溢出内容  -->
<!--			hidden	溢出内容直接减掉	  -->
<!--			no-content	内容溢出就移除所有内容 -->
<!--			no-display	内容溢出就隐藏所有内容 -->
<!--			scroll		内容溢出添加滚动条	   -->
<!--			visible		默认值,溢出直接显示	   -->
<style type = "text/css">
	p {
		overflow: scroll;
	}	
</style>


<!-- 控制元素的可见性 -->
<!-- visibility		-->
<!--	可用属性:		-->
<!--			collapse 元素不可见,且在页面布局中不占空间 -->
<!--			hidden	 元素不可见,但在页面布局中占据空间 -->
<!--			visible	 默认值,元素可见				   -->
<style type = "text/css">
	p {
		visibility: hidden;
	}	
</style>
<!-- collapse值只能应用到表相关属性		-->


<!-- 设置元素的盒类型		-->
<!--  display				-->
	属性值:	
			inline 行内元素;
			block	块级元素;
			inline-block 行内块级元素;
			list-item 列表项;
			run-in 插入元素;
			compact 块或标记盒;
			flexbox 
			tabke
			inline-table
			table-row-group
			table-header-group
			table-footer-group
			table-row
			table-column-group
			table-column
			table-cell
			table-caption
			ruby
			ruby-base
			ruby-text
			ruby-base-group
			ruby-text-group
			none 元素不可见,且在页面布局中不占空间;


<!-- 创建浮动盒	-->
<!--	float:	-->
<!-- 浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界 -->
<!--	可用属性:			-->
<!--			left 左边挨着包含块的左边界,或另一个浮动盒的右边界  -->
<!--            right												-->
<!--			none  元素位置固定									-->


<style type = "text/css">
	p {
		float: left;
	}	
</style>


<!-- 阻止浮动元素堆叠 -->
<!-- clear			  -->
<!--		可用属性  -->
<!--			left 元素的左边界不能挨着另外一个元素			-->
<!--			right											-->
<!--			both 元素的左右边界都不能挨着浮动元素			-->
<!--			none 元素的左右边界都可以挨着浮动元素			-->
<style type = "text/css">
	p {
		float: left;
	}	
	p.cleard{
		clear: left;
	}
</style>