CSS美化—网页居中

• 元素的宽度

widh属性用于设置元素的宽度
CSS选择器{ widh:值 }
(1)设置视频宽度
调整视频的宽度后视频的高度也会自动调整

video{width:100px}

• div页面内容分布区

div是块元素用于页面内容分布区

开始标签<div>
页面内容
结束标签</div>

使用div为页面内容分布区，可以更方便的排列网页内容
①在当前div区块中排列logo与导航
②不同的div区块设置不同的背景图
③在当前div区块中排列底部内容
使div将页面内容划分成一个整体区块

• 实现为页面内容添加div
• 设置div的宽度

div是块元素，默认独占一行(没有移动空间)
设置div宽度比body小

• 元素的外边距

元素的外边距是创建元素周围的空间

div{margin:30px}

外边距可以让当前元素与其他元素保持一定距离

• margin的属性

使用以下属性可以单独设置元素某个方向的外边距

margin:值(上下)值(左右)
margin:值(上下左右)
margin-top:值(上)
margin-bottom:值(下)
margin-left:值(左)
margin-right:值(右)

使用margin属性设置div在body中水平居中
将左右两边的外边距设置为auto,浏览器会自动平分左右边距

• 网页布局

排列网页内容的过程，就是网页布局
div+CSS可以很方便的实现网页布局