08.22学习笔记

第三天：

今天主要还是学习盒模型，样式 排版，多个盒子重叠或环环相套怎么处理

并实战演练了三国杀页面制作。

学习成果：

 

笔记：

div 盒模型

padding  内边距

设置padding的时候，这个元素的实际宽高会被拉伸（就是盒子会变长或变宽）

解决方法：Box-sizing 保证了div的宽高永远是设定的值，加了padding只会去挤空间。

 

实际宽高==设置的宽高+padding（有两个） +border（有两个） 

占用空间==设置的宽高+margin（有两个）+padding（有两个） +border（有两个） 

可以两个盒子一样大然后设置padding，外面的盒子会被撑开

 

 

background背景

Background:red; 带颜色的背景

background-repeat：on-repeat 是否平铺

background-position 距边框距离

background-size：大小

简写

大小需要单独列出来。

 

定位 position

相对定位 position:relative; 这个属性给需要定位的父级。

绝对定位 position:absoluet; 他有四个值 top left right bottom；

position可以遗传，position：absoluet的参考物是最近一级的posotion(absoluet)。

 

页面结构分析

页面应分布局层和结构层;

结构层：最外面的一层，这个机构层不能设置太多的样式，一般设置宽、margin（不设置高的原因，给页面更多自由空间，方便程序员操作）（不要在该层设置position，会让元素脱离文档）

布局层：给予内部元素进行排版

制作一个页面是先想清楚布局，每一个布局都设置一个大框作为结构层 不去设置太多样式，然后在加一个布局层去撑起框架！！！

也可以说在原来直接写的框架上，再加上一层。