盒子模型

#认识盒子模型
#盒子模型相关属性
##边框属性
边框样式属性（border-style），边框宽度属性（border-width），边框颜色属性（border-color），单侧边框的属性，边框的综合属性样式综合设置
样式综合设置：none无(默认），solid 单实线，dashed虚线，dotted点线，double双实线
宽度综合设置：像素值
颜色综合设置：颜色值，#十六进制，绕过（r,g,b),rgb(r%,g%,b%)
1.设置边框样式之综合设置
border-style：上边框样式 右边框 下边框 左边框
border-style：上边框 左右边框 下边框
border-style：上下边框 左右边框
border-style：上下左右边框样式
例子：
只有上边为虚线dashed，其他三边为单实线solid

p{border-style:dashed solid solid solid;}

或

p{border-style：solid；}  综合设置四边样式
p{border-top-style：dashed；}上边样式覆盖

2.设置边框宽度
border-width：上右下左
3.设置边框颜色
border-color：上下左右
注意：设置边框颜色时同样必须设置边框样式
4.综合设置边框
border-top：上边框宽度 样式 颜色
border：四边宽度 样式 颜色
#内边距属性
指元素内容与边框之间的距离
padding-top：上内边距
padding：上下左右
#外边距属性
margin：上下左右
水平居中

.a{margin:0  auto;}

清除元素默认内外编剧

*{
padding:0;清除内边距
margin：0   清除外边距
}

#背景属性
1.设置背景颜色
background-color属性分别控制标题和网页主体的背景颜色

body{background-color:##CCC}设置网页背景颜色

2.设置背景图像

body{
background-image：url（img/jianbian.jpg);
}

3.设置背景图像平铺
通过background-repeat控制
repeat：沿水平和竖直两个方向平铺
no-repeat：不平铺（图像位于元素左上角，只显示一次）
repeat-x：只沿水平方向平铺
repeat-y：只言竖直方向平铺

background-repeat：repeat-x；

4.设置背景图像位置
如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将显示在元素的左上角
background-position图像在元素中水平垂直方向的坐标
像素：background-position：20px 20px
关键字：水平left center right，竖直：top center bottom
百分比：0% 0%左上角，50% 50%中心点，100% 100%右下角
5.设置背景图像固定
scroll：图像随页面一起滚动
fixed：图像固定在屏幕上，不随页面元素滚动
6.综合设置元素的背景

background：背景色 url（"图像"）平铺 定位 固定；

background：url（img/wdjl.jpg） no-repeat 50px 80px fixed;

#盒子的宽高
分别用width，height控制
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
元素的类型与转换
1.块元素：每个元素通常都会独自占据一整行或多整行，可以对其设置宽度高度对齐等属性，常用于网页布局和网页结构的搭建
常见的块元素有：<h1`~h6>，p>，div>,ul>,ol>,li>,其中div是最典型的块元素
2.行内元素：不必在新的一行开始，同时也不强迫其他的元素在新的一行显示。一个行内元素通常会和他前后行内的其它元素显示在同一行在，他们不占有独立的区域，仅仅靠自身提字体大小和图像尺寸来支撑结构，一般不可以设置宽度高度对齐等属性，常用于控制页面中文本的样式
常见到的行内元素有strong ，b,em,i ,del ,s ,ins ,u, a ,span ,其中span标记是最典型的行内元素