1.10(学习篇)

盒模型组成结构

1.内容区域(div)

2.内边距(padding)

3.边框(border)

4.外边距(margin)

总结：内容区域 、内边距 和 边框 都会影响盒子的大小， 外边距它不会影响盒子的大小，它会影响盒子的位置

css的基本属性

1.width 宽度

2.height 高度

3.background 设置背景

4.padding 内边距

5.border 边框

6.margin 外边距

padding的用法

给谁加内边距，谁就会变大

1.只有一个值得时候，它会设置4条边的内边距

padding: 20px;

2.给padding2个值得时候，它会设置4个方向的值，上下是第一个值,左右是第二个值.

padding: 20px 30px;

3.给padding 3个值的时候,第一个值是上,第二个值是左右,第三个值是下

padding: 20px 30px 40px;

4.给padding4个值得时候，设置顺序是上右下左, 顺时针方向

padding: 20px 30px 40px 50px;

margin属性

margin 属性会受到float（浮动的影响）；它的简写顺序和padding 是一样的

块元素 内联元素 可以互转吗？

答案：是可以的

通过display 这个属性来转换

把块转换成内联元素

display: inline;

把内联元素转换成块元素

display: block;

内联和块的区别：

内联没有宽高

块元素有宽高

内联元素的宽高，是由他内容的宽度来决定的，内容是文本

块元素的宽高 如不定义的情况下，它只有宽度；这个宽度是默认的；是父级的宽度； 默认没有高度；它宽度可以从新定义;它的高度，通过内容撑开，也可以通过定义；

inline-block

inline-block 和inline 的区别就是比inline多了一个可以设置宽高，共同点都可以由自己的内容撑开；

inline-block 和block 的区别 block默认会有宽度 inline-block默认没有宽度，共同点是都可以设置宽高