CSS中 dispaly属性详解

1. 综述

如上展示了display 属性的所有取值，其中基础类型有 block ,inline,table 格式。我们可以使用盒模型的方式来理解:

盒模型分为两种：块级盒子和内联盒子。块级盒子负责结构，内联盒子负责内容。
块级盒子：1.独自占据整一行 2.可以设置宽高（默认是父标签的100%）
内联盒子：1.所有的内联元素在一行内显示 2.不可以设置宽高

组合类型包有，inline-block, list-item, inline-table, table-row 等。我们可以将其理解为多个盒子类型的叠加。

inline-block，我们可以认为其是内层一个block盒子外层套了一个inline盒子，这样就不难理解，因为外层盒子是内联类型可以在一行内显示，由于内层是一个块级盒子所以可以设置宽度和高度，而外层内联盒子的宽度和高度由其内层内容的宽度和高度来确定，所以 inline-block 类型既具有内联盒子特性又具有块级盒子特性。
list-item 在原有块级盒子的基础之上添加了一个标记盒子，专门用来放置圆点、数字等项目符号。

2. 示例

2.1 display:list-item

<html><head><title>myFirstPage</title><style>.list {display: block;}p {display: list-item;background-color: red;width: 500px;list-style-type: decimal; /* 设定标记盒子展示内容的样式 */list-style-position: inside; /* 设定标记盒子的位置 */}</style>
</head><body><div class="list"><p>fist</p><p>second</p><p>thrid</p></div>
</body></html>

结果：

我们可以看到，list-item 主体部分是一个块级元素。

2.1 display:table

<html><head><title>myFirstPage</title><style>.table {display: table;border: 1px solid black;}.table .row {display: table-row;}.table .row>p {display: table-cell;width: 100;background-color: seashell;border: 1px solid black;}.caption {display: table-caption;}.footer {display: table-footer-group;}</style>
</head><body><div class="caption">This is a table caption.</div><div class="table"><div class="row"><p>fist</p><p>second</p><p>thrid</p></div><div class="row"><p>fist</p><p>second</p><p>thrid</p></div></div><span class="fotter">This is a table fotter.</span>
</body></html>

结果：

CSS中 dispaly属性详解相关推荐

CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
CSS中margin属性详解
margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性 margin 可以单独改变元素的上 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
Android中shape属性详解
一.简单使用刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...
Vue中watch监听数据变化以及watch中各属性详解
watch使用的几种方法通过watch监听data数据的变化,数据发生变化时,就会打印当前的值 data(){return {msg: '你在想屁吃!',info: '555...',} } wat ...

CSS中 dispaly属性详解

1. 综述

2. 示例

2.1 display:list-item

2.1 display:table

CSS中 dispaly属性详解相关推荐

最新文章

热门文章