web前端-CSS(display，position，overflow和浮动float)

2023-04-20 115

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端-CSS(display，position，overflow和浮动float)

display（显示）

display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。

下面我们来看看display的属性有哪些吧。

属性	描述
`none`	此元素不会被显示。
`block`	此元素将显示为块级元素，此元素前后会带有换行符。
`inline`	默认。此元素会被显示为内联元素，元素前后没有换行符。

`inline-block`	行内块元素。（CSS2.1 新增的值）
`list-item`	此元素会作为列表显示。
`run-in`	此元素会根据上下文作为块级元素或内联元素显示。
`table`	此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。

`inline-table`	此元素会作为内联表格来显示（类似 < table >），表格前后没有换行符。
`table-row-group`	此元素会作为一个或多个行的分组来显示（类似 < tbody >）。

`table-header-group`	此元素会作为一个或多个行的分组来显示（类似 < thead> ）。
`table-footer-group`	此元素会作为一个或多个行的分组来显示（类似 < tfoot >）。

`table-row`	此元素会作为一个表格行显示（类似 < tr >）。
`table-column-group`	此元素会作为一个或多个列的分组来显示（类似 < colgroup >）。
`table-column`	此元素会作为一个单元格列显示（类似 < col >）

`table-cell`	此元素会作为一个表格单元格显示（类似 < td > 和 < th >）
`table-caption`	此元素会作为一个表格标题显示（类似
`inherit`	规定应该从父元素继承 display 属性的值。

内联元素

比如：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。

内联元素特点：

和其他元素都在一行上；

宽高只与内容有关；

行内元素只能容纳文本或者其他行内元素。

块级元素

比如：address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1、header、hgroup、hr、noscript、ol、 output、p pre、 section 、table、 tfoot、ul、video等。

块级元素特点：

总是在新行上开始，占据一整行；

宽高，行高以及外边距和内边距都可控制；

若不设置宽则宽为浏览器宽度，与内容无关；

它可以容纳内联元素和其他块元素。

行内块级元素

三者区别

position（定位）

static

relative

fixed

absolute

sticky

position属性

属性	描述
`absolute`	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

`static`	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
`inherit`	规定应该从父元素继承 position 属性的值。