HTML页面布局以及CSS的应用

1.HTML的布局：

  div:

  属性：style：样式风格

          width:宽

          height:高

          devision:区域

          background：背景

注：页面设计首先规划的是div格局，从上至下的div格局是独占一行的，如果想要从左至右就需要用浮动布局

2.css控制页面显示

   1>.内部引用：

        <style type="text/css">
#header {
   width:300px;
   height:300px;
   border:solid 30px black;
   background:blue;
   padding:20px;
   margin:20px;

}

</style>

2>外部引用：

<link rel="stylesheet" href="Ctest.css" type="text/css">

注：DOCTYPE文档的重要性，是W3C为了浏览器的兼容性而定制的

3.盒子模型：

将div的块看成是盒子，盒子模型就是设置div的相关属性就是所谓的盒子

margin：外边距

border:边框

pdding:内边距

width:编辑区域的宽

height：编辑区域的高

#header {
   width:300px;
   height:300px;
   border:solid 30px black;
   background:blue;
   padding:20px;
   margin:20px;

效果如下：