千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

HTML笔记

一、 盒模型

可以装东西

大部分是矩形为主

盒模型相关属性： padding border margin

 

内容区  width  height

内边距  padding

边框    border

外边距  margin

 

二、 padding 内边距、补白、填充、内补白、内填充

ul标签默认携带左padding

1、 支持背景色

2、 写完padding看宽高，如果有做减法

3、 一值法  padding:20px; 四个方向  

二值法  padding:20px 50px;  上下  左右

三值法  padding:10px 20px 30px; 上  左右  下

四值法  padding:10px 20px 30px 40px; 上右下左

 

4、 可以定义单一方向

padding-left

padding-top

padding-right

padding-bottom

 

5、 padding取值不可以为负数

 

三、 border  边框

1、border:1px solid #ccc;   border:red 2px solid;  border:solid 2px #ccc;

边框子属性

border-width 边框宽

border-style  边框类型

solid实线 dashed线状虚线 dotted点状虚线 double双线（至少三像素）

border-color 边框颜色

2、border-top: 1px solid #ccc;

border-left:1px solid #ccc;

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

3、border不支持四值法， border-width支持

4、支持背景色

5、边框楔形

解决方案：用盒子模拟边框

绘制三角形：width: 0;height: 0;border: 100px solid transparent; border-left-color: #f0f;

 

四、 margin  外边距，外边界，边界，边距

1、 不支持背景色

2、 支持四值法

3、 支持单一方向的定义

margin-top

margin-right

margin-left

margin-bottom

4、margin取值可以为负数

使相应的盒子向相反方向移动

取值为正改变谁，取值为负数就改变谁

正常左上会影响盒子自身的位置，

如果加了右浮动，margin-right就会影响自己的位置

左右只可能有一个方向会影响自己的位置