前端学习笔记-CSS-盒子边框border&内边距padding

盒子模型（CSS重点）

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

 

看透网页布局的本质

看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

CSS 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

 

盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

 

盒子边框border

边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
​
solid：边框为单实线(最为常用的)
​
dashed：边框为虚线  
​
dotted：边框为点线
​
double：边框为双实线

盒子边框写法总结表

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边 下边 左边];	像素值
颜色综合设置	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色;

    border-top: 1px solid red; /*上边框*/
    border-bottom: 2px solid green; /*下边框*/
    border-left: 1px solid blue;
    border-right: 5px solid pink;
    
    border: 1px solid red;

 

练习：

效果：

 

表格的细线边框

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起。

 

练习：

	
	



	
 
		

			
天王盖地虎
			
天王盖地虎
			
天王盖地虎
		
		

			
宝塔镇河妖
			
宝塔镇河妖
			
宝塔镇河妖
		
		

			
小鸡炖蘑菇
			
小鸡炖蘑菇
			
小鸡炖蘑菇
		
	

效果：

 

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意： 后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

 

练习：

	
	
	
	


	

		设为首页
		手机新浪网
		移动客户端
		微博
		博客
	

效果：

注意：padding 会撑开 带有 widht 和height盒子。若盒子的 widht 和height已经固定死了，那使用padding属性时，需要做相应的计算。