盒模型
盒模型
除了图片表单元素之外,基本所有标签都可以看做一个盒子
盒模型的要素
父子关系之间用padding
兄弟关系之间用margin
margin padding border 后面跟的值的顺序 上右下左
如果跟了一个值 :上下左右
如果跟了两个值 :上下 左右
如果跟了三个值 : 第四个和右一样 上 左右 下
如果跟了四个值 :上 右 下 左
width和height
标签内容的宽高,不是盒子的宽高
padding
内边距
内边距是标签内容和边框的距离
padding的颜色和标签内容一致
margin
外边距
外边距是标签相对于父标签和兄弟标签的距离
块标签居中
给本身添加margin:0 auto
其实是设置没有边框然后自动
注意设置垂直方向的margin值时看好执行顺序
垂直方向margin值的合并
兄弟标签之间margin会相互重叠,以大的margin为准
border
边框
solid 实线
dashed 虚线
dotted 点线
ridge 3d线
border-bottom/top/right/left 上下左右border
浮动
行标签被浮动后可以设置宽高当成块标签使用
正常浮动(一旦浮动后脱离标准流)
如果某个标签A是浮动的 假如A标签的上一个标签也是浮动的 那么A就会跟在上一个标签后面
如果一行放不下两个标签 A就会被挤到下一行
如果上一个元素是标准流元素 那么A相对的垂直位置不会改变
div的顺序是由HTML代码顺序决定
清除浮动
overflow和clear
- 对于父标签
- 在父类标签中添加overflow:hidden
- 为了让父标签能包住子元素的浮动标签
- 对于兄弟标签
- 在标签中添加clear
- 清除浮动可以让浮动标签复原成块标签的状态
消除img标签一像素的边框的方法:
- 浮动
- vertical-align: middle
浮动总结
-
浮动元素的特点
- 浮动元素不占文档流
- 任意标签设置成浮动后,统称浮动元素,具有其本身特点,不再是行块标签
- 浮动元素由内容撑开宽高,可以设置宽高
-
使用时注意:
- 清浮动
- 如果有浮动元素的子标签,则所有子标签浮动
定位
相对定位
相对定位是相对于自己原来的位置(一旦被定位后不会脱离标准流,不改变标签的特性)
如果两个标签都被定位 那么后来定位的会覆盖之前定位的
微调时候使用
给绝对定位当定位父级
绝对定位
绝对定位是相对父级标签的绝对定位(找被定位过的离得最近的祖宗标签 如果都没改过就是相对html文件)
一旦定位后脱离标准流
固定定位
不占文档流
将设置成定位的标签成为定位元素
固定定位会把元素固定在某个位置(相对于浏览器进行定位,不会随着界面滚动而跟着移动)
所有的方位值(top bottom left right )只能和position配合使用
练习: 字穿线的写法
代码:
