一、标准流布局
标签在没有布局相关的属性的时候,默认的布局方式就是 标准流布局 。
块级标签 | 一个占一行;默认宽度是父标签的宽度,默认高度是内容的高度;设置宽高有效。 | 例如: h1~h6、p、div、列表相关… |
---|---|---|
行内标签 | 一行可以显示多个;默认大小是内容的大小;设置宽度无效。 | 例如: a、span、label、font… |
行内块标签 | 一行可以显示多个;默认大小是内容的大小;设置宽高有效。 | 例如:img、输入框 |
display属性(css)
block | 将标签修改成块级标签 |
---|---|
inline | 将标签修改成行内标签 |
inline-block | 将标签修改成行内块 |
none | 隐藏标签 |
二、脱流
让标签脱离标准流,不再按照标准流的方式进行布局。 浮动 和 定位 都可以让标签脱流。
所有的标签,只要脱离了标准流,布局的方式就只有 一种 :一行显示多个;默认大小是内容的大小;设置宽度有效
浮动 - float
left - 左浮动
right - 右浮动
浮动的应用
- 竖着显示的横着来(页面布局)
- 文字环绕: 被环绕的块浮动,文字块不浮动
清除浮动
清除因为浮动而产生的高度塌陷的问题
-
高度塌陷: 父标签不浮动并且没有设置高度,子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
-
清除浮动:(一共有三种,最后一种不介绍)
a.空盒子法:在高度会塌陷的标签的最后添加一个空的div,并且设置它的clear属性为both
<div style=“clear: both;”></div>
b.设置overflow: 设置高度会塌陷的标签的overflow属性为hidden
定位
定位的属性有四个:left、right、top、bottom
left | 设置标签的左边到另外一个标签的左边距离 |
---|---|
right | 设置标签的右边到另外一个标签的右边的距离 |
top | 设置标签顶部到另外一个标签的顶部的距离 |
bottom | 设置标签的底部到另外一个标签底部的距离 |
选择定位的参考对象:position
static/initial(默认值,body例外) | 不选参考对象,不定位(设置距离直接无效) |
---|---|
absolute | 绝对定位,选择第一个非static/initial的父标签作为参考对象 |
relative | 相对定位,相对当前标签在标准流中的位置定位(一般用于让自己成为子标签的参考对象的时候用) |
fixed | 相对浏览器定位 |
sticky | 依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 |
三、盒子模型
html中每一个可见的标签不管在任何情况下都是由4个部分组成:content、padding、border和margin
content | 可见的;设置背景会作用于content;设置标签的宽度和高度其实就是在设置conten的宽度和高度;标签内容和子标签都是添加到content上的 |
---|---|
padding | 可见的;设置背景会作用于padding;padding有四个方向,每个方向可以单独控制 |
border | 可见的;border有四个方向,每个方向也可以单独控制 |
margin | 不可见但是占位置;有四个方向,每个方向也可以单独控制 |