燕十八_divcss教学笔记
第一天
Html 三部分
1：文档声明
文档声明很重要，直接影响浏览器的渲染效果。
不属于html文档的一部分，不用闭合。
2：head区域
网页的标题
3: body区域
Body区域放各种标签和内容
而内容不能够直接写在body里面。
这真的是标题？
Hello world
3.5:meta ---- head里面的meta 代表 "元信息",用来说明网页自身的信息,
一般是给浏览器,搜索引擎看的
比如:
--->告诉浏览器,这是一篇utf-8编码的文档
-->这是告诉搜索引擎本页面的主要内容
-->这是告诉搜索引擎,本页面体现的关键字
3.6:在网页源码里写的换行,在网页效果上不会体现出来
3.7: html标记:分为双标签和单标签
例:加粗效果,文字会变粗
接下来会换行
共同点: 无论是单双标签,都要求 "闭合"
单标签也要自身闭合
3.8: 标签可以嵌套,但是, 不能相互嵌套
例如:一岁一枯荣.不合法
页面布局
当拿到一张图片或者准备做一个页面的时候,
首先,不要去看文字,颜色等细节,
而是总整体上,看页面该如何划分,划分成"块"
按"从上到下","从左到右","从大到小"
Div布局,
Css控制显示效果
标签体现语义
Div块状元素的一个重要特点:
无论宽度如何,在浏览上的显示效果都是---独占一行
盒模型:
一个div是一个矩形,为了方便控制div的效果,
我们推荐把div理解成"一个木头盒子"
分析现实中的情况:
一个盒子: 有边框(边框有多厚? 用像素自定义)
盒子内部的内容,离边框内部有多远的距离,还是说可以贴着内边框放置?
内容离内边框的距离叫做-----内边距
盒子本身有一个大小 : 宽,和 ,高
盒子与盒子之间可以保持距离: 外边距
宽:Width
高:height
边框: border
内边距:padding
外边距:margin
第二天：
目标：掌握盒模型
浏览器对于div,p,li标签等元素，可能会对他们设置一个默认的margin值，border，padding值，而且不同的浏览器之间设的默认可能不同。
Css初始化，就是把所有的标签，margin,border,padding设为0，大家都在同一个起跑线上。
盒模型border学习
Border: 三要素，不可缺少。
边框样式， 边框宽度， 边框颜色
分别指定：
Border-style
Border-width
Border-color
例：border-style:solid;
border-width:10px;
border-color:blue;
也可以通过 border属性一次性指定(注意：属性顺序为style width color)
border:solid 10px blue;
* 如果想单独指定某个边的边框效果(以右边框为例)
Border-right-style:
Border-right-width:
Border-right-color:
Padding:
定义4个方向的padding ，方向与赋值 ，和margin一样。
一个盒子本身有多大？
水平:左边框+左内边距+内容宽度+右内
