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默认没有宽度,共同点是都可以设置宽高

你可能感兴趣的:(1.10(学习篇))