前端基础 - CSS盒子模型

CSS盒子模型及样式介绍 CSS中都有哪些样式：（主要指的是div）

就是选择器中的属性名

• border:边框样式 border:边框的宽度 边框的样子 边框颜色; 单位是px double:双线边框 英文单词red,blue solid:实线边框 #RGB 比如 #FF0000

• 宽高 width:宽度 单位px height:高度 单位px

• 内容 color:内容的颜色 英文单词red,blue #RGB 比如 #FF0000 font-size:内容的文字大小 单位px

• background-color:设置标签的背景色

• display: 转换样式, 把一个块级元素转成行内元素 值: block(转成块级元素) inline(转成行内元素) none(隐藏)

• float: 浮动,设置元素的浮动效果,让元素浮起来 值: left 漂起来向左 right 漂起来向右

• clear: 清除元素两边的浮动效果 值both 清楚该元素左右两边的浮动效果

例子：

效果图：

代码：

	
		
		
		
			div {
				height: 50px;
				width: 50px;
				border: solid red;
				/*display: inline;*/
				float: left;
				margin-left: 10px;
				margin-top: 10px;
			}
			
			#clear{
				height: 0px;
				width: 0px;
				border: none;
				margin: 0px;
				clear: both;
			}
		
	

	
		
1
		
2
		
3
		
4
		
		

		
		
5
		
6
		
7
		
8