1.01.21盒子模型,浮动,定位
1.盒子模型
1. 标准文档流
- 网页在排版布局时,遵循的从上到下,从左到右的顺序
- 正常的元素是会占据页面的空间大小的
- 脱离文档流:不再遵循从上往下,从左往右的顺序(元素不再占据页面空间)
- 脱离文档流的元素可以直接设置宽高(不管他本身是什么元素类型)
2. 盒子模型概念
- 网页中的元素可以看成一个一个的盒子
- 盒子模型是由:
- 外边距margin
- 边框border
- 内边距padding
- 内容connent
- 给盒子定义宽高只是给他内容定义宽高,而盒子的整体大小得加上内边距与边框的尺寸,所以盒子可以由内边距和边框撑大
3. 盒子调整
-
外边距:
- 属性margin-方向:
- margin-left:5px 左外边距
- margin-right:5px 右外边距
- margin-top:5px 顶部外边距
- margin-bottom:5px 底部外边距
- 属性margin:(不带方向):
- margin:5px 上下左右
- margin:5px 6px 上下 左右
- margin:5px 6px 7px 上 左右 下
- margin:5px 6px 7px 8px 上 右 下 左
- margin: 0 auto 上下0 左右自动 (可以让元素左右居中)
- 属性margin-方向:
-
内边距
- 属性padding-方向:
- padding-left:5px 左内边距
- padding-right:5px 右内边距
- padding-top:5px 顶部内边距
- padding-bottom:5px 底部内边距
- 属性padding:(不带方向):
- padding:5px 上下左右
- padding:5px 6px 上下 左右
- padding:5px 6px 7px 上 左右 下
- padding:5px 6px 7px 8px 上 右 下 左
- 属性padding-方向:
-
边框
-
属性border-style
- none值:无边框(默认值)
- solid值:实线
- dashed值:虚线边框
- dotted值:点状线边框
- do
-