2020-10-17 css09盒子模型

盒子模型

盒子由盒子内容，边框，外边距和内边距组成。
一.盒子边框
1.几个属性
border:border-width border-style border-color;
2.单独指定：
border-top
border-bottom
border-left
border-right
3.如果只指定一个
可以先指定去掉所有边框，再单独对其中一边指定
如：

border:none;
border-bottom:1px dashed red;

二.表格的细边边框
1.合并相邻边框
border-collapse:collapse;

三.内边距
内容与盒子的距离，即可以指定内容在盒子中的位置
1.

padding:10px;(上下左右都是10px）
padding:10px 20px;(上下10px,左右20px)
padding:10px 20px 30px(上是10px,左右是20px,下是30px）
padding:上  右 下 左（顺时针）

2.如果盒子不设宽度，就不会撑开盒子
设定了宽度，会撑开盒子

四.外边距
1.盒子与盒子，或盒子与页面的距离
margin与padding写法完全一样

五.块级盒子居中对齐
1.写法：
margin:auto;
或者
margin-left:auto;
margin-right:auto;

六.插入图片与背景图片
1.一般显示多用插入图片，在页面中移动通过盒模型
背景图片一般是小图标或超大图片
如：

img{
	width:200px;/*插入图片更改大小*/
	height:200px;
	margin-top:30px;
	margin-left:50px;
	}

div{
	width:200px;
 	height:200px;
 	border:1px solid purple;
 	background:url(da.pang) no-repeat;
 	background-position:30px 50px;/*用background-position控制*/
 	}

清除元素的内外边距
写法：

*{
	padding:0;
	margin:0;
}