【CSS布局】定位详解(二)
来源:互联网 发布:已备案过期域名查询 编辑:程序博客网 时间:2024/06/15 19:03
在上一篇详细说明了CSS样式中position、float。
本章继续讨论 定位中的 display属性,并阐述 这三者的关系。
display
display
总共有
display-outside
- block 块级 标签
- inline 行内 标签
- run-in (实验), 根据周围的元素 表现为inline或者block,
-
- 如果包含 block 类型的元素,则表现为block
- 如果紧跟随的元素为block类型 则表现为第一个inline
- 如果紧跟随的元素为inline类型,则表现为block
display-inside
- flex 表现为block,内部元素采用flexbox model 布局
- grid 表现为block,内部元素采用grid model布局
- table 表现为block,类似标签
- flow(实验)
- ruby(实验)
display-listitem
- *
display-internal
- table-row-group HTML elements
- table-header-group HTML elements.
- table-footer-group HTML elements.
- table-row HTML elements.
- table-cell HTML elements.
- table-column-group HTML elements.
- table-column HTML elements.
- table-caption HTML elements.
display-box
- none
display-legacy CSS 2 用一个关键词来表示,
- inline-block 等价于 inline flow-root
- inline-table 等价于 inline table
- inline-flex 等价于 inline flex
display position float 三者的关系
- 如果 display 为none,这忽略 position和float的值,元素为no box
- 如果 display为 flex 或 inline-flex, 则float无效,
- 否者,如果position值为absolute或fixed,则display被设置为block,float被设置为none
- 否者,如果float值为非none,display设置为block,并且box 进入浮动流定位。
- 否则,保留display属性值
参考:https://www.w3.org/TR/REC-CSS2/visuren.html#q24
阅读全文
0 0
- 【CSS布局】定位详解(二)
- CSS布局之定位详解(position)
- 【CSS布局】定位详解(一)
- css+div网页设计(二)--布局与定位
- (16)CSS定位布局
- CSS基础(二)——布局详解
- css布局定位(position + display)
- CSS笔记(布局与定位)
- css的布局的定位(了解)
- CSS布局定位[转]
- CSS布局定位
- CSS定位布局
- css布局与定位
- CSS定位布局
- CSS-定位布局
- CSS中的定位布局
- css-布局和定位
- css 布局布局定位心得
- 最大子数组
- 父子类初始化顺序及方法调用
- 内存
- cocos2d-x 3.x 事件相关源码接口
- tongue读音解析实例
- 【CSS布局】定位详解(二)
- EntityFramework6中管理DbContext的正确方式(三)【三种DbContext用法】
- struts2中关于同一xml、同一package下namespace与name关系
- Swift 字典
- HashTable 的rehash方法
- 视频容器格式与编码格式简介
- Unity Shader:Waveform波形(2)-基本波形:正弦,三角,锯齿,直角以及其变种的实现方式
- idea 破解
- Android图片加载框架最全解析(一),Glide的基本用法