css display属性之我见

display几个比较常见的值

display:none 丨block 丨inline丨inline-block丨table丨inline-table丨table-cell

none:定义了该值的元素不会再文档中显示

block:一般是为内联元素定义该值,使其具有块级元素的特性

inline:一般是为块级元素定义该值,使其具有内联元素的特性

inline-block:定义了该值的元素同时具备了块级元素和内联元素的特性,将对象呈递为内联对象

(慎用,使用display:inline-block在IE下会触发layout,

该值的浏览器兼容写法display:inline-block;*display:inline;*zoom:1;)

table:将元素定义为块级表格来显示

inline-table:将元素定义为内联表格来显示

table-cell:将元素定义为一个表格单元格来显示

不足之处欢迎大家指正!

时间: 2024-12-11 10:56:48

css display属性之我见的相关文章

css display属性值

一.css中display可以取的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(CSS2.1 新增的值) list-item 此元素会作为列表显示. run-in 此元素会根据上下文作为块级元素或内联元素显示. compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除. marker CS

CSS display属性的值及作用

display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit 其中常用的的有none.inline.block.inline-block.分别

CSS学习笔记05 CSS display属性

HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签.常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div>标记是网页制作中最常用的块元素. 行内元素 行内元素不占有独立的区

CSS Display属性与盒模型

由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box的呈现方式又有所不同. 本文首先引入CSS盒模型.然后通过不同的display属性分别介绍Box常见的呈现方式. Box Sizing:元素大小的计算方式 在HTML中.不论什么HTML元素都会被呈现为一个矩形.该矩形由内容.内边距.边框.外边距构成.举个样例: <style> .box-demo

css display属性

display属性共有4个值: blcok:块级元素 inline-block:行内块级元素 inline:行内元素 none:隐藏元素,不占据空间 1.块级元素 常见的块级元素有div,p,ul,ol,li,h1~h6等 块级元素会默认占满父元素的宽度且独占一行 <div style="border:1px solid red;width: 400px;"> <p style="background-color: aquamarine">尽

web前端入门到实战:CSS Display属性的双值写法

display属性 display 属性用来控制一个元素及其子元素的 格式化上下文, 你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素. 有了 display 属性,你就可以切换元素不同的状态.比如说,通常一个 h1 元素是一个块级元素,但是通过切换,它就能以内联元素展现. 这几年,我们也知道了Grid 布局和弹性盒布局.我们只需要将 display 属性的值设置为 display: grid 或 display: flex 就可以实现这两种布局.当 display 属性

css display属性详解

css 中display属性决定了一个元素的显示方式,它分别有下面几种显示方式 block 块级显示,可以设置高宽.前后存在换行符 inline-block 行内块级元素显示,可以设置高宽.前后没有换行符 inline 行内元素显示,前后没有换行符,不可以设置高宽,元素高宽由内部元素决定 list-item 列表块级元素显示,前后都有换行符,但和block不同的是,它可以和li一样在元素前面加上标记 table 表格块级元素显示,类似于table元素,前后都有换行符 常用的元素显示方式 行内元素

CSS display 属性

定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构.对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的. 注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了. 可能的值

CSS中display属性

一开始觉得挺简单的,要么是块的,自己在这个桌上吃饭了了,别人就不能在这个桌上吃饭了,要么是内联的,自己在这个桌上吃饭,只要桌上有空座,别人还是可以坐到这儿的.等到了使用的时候发现并没有那么简单啊~  一.HTML元素分类 1.内联元素(inline) ①元素显示方式:“文本方式”,1个接着1个,不单独占一个桌吃饭. ②内嵌元素也必须是内联元素:如<a></a>,不能在里面嵌套<div></div>等块级元素. ③常见的标签有:<a>,<in