文档流normal flow
文档流指在元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式,
最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素
标签分类
HTML中
文本级标签-只能放文字、图片、表单元素;
容器级标签-可放任意(容器级标签、文本级标签、文字、图片、表单元素)
CSS中
分类和HTML很像,p不一样
元素分类
display属性类型 | 是否能并排显示 | 是否能设置宽高 | 不设置width属性时 |
---|---|---|---|
块级元素 | 否 | 是 | 宽度默认是父亲的100%(自动撑满) |
行内元素 | 是 | 否 | 宽度是内容的宽度(自动收缩) |
行内块元素 | 是 | 是 |
特殊的行内块: 图片、表单元素
关系:浮动/定位后,行内元素转换成块级元素
元素类型转换
语句 | 意义 |
---|---|
display:block | 转化为块级元素 |
display:inline | 转化为行内元素(不多见) |
display:inline-block | 转化为行内块元素 |
元素隐藏
display:none
元素彻底放弃自己的位置,如同没有写它的标签一样
visibility:hidden
元素不放弃自己的位置