盒相关样式

Posted 飞鱼0725

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒相关样式相关的知识,希望对你有一定的参考价值。

盒的类型

一、盒的基本类型

在css中,使用display属性来定义盒的类型。总体来说,css中盒分为block类型与inline类型,例如div和p属于block类型,span和a属于inline类型。每一行只允许容纳一个block类型的元素,但是可以容纳多个inline类型的元素。

二、inline-block类型(inline-block类型盒加宽度时宽度会改变,inline类型盒加宽度盒不变)

Inline-block类型是在CSS2.1中追加的一个盒模型,目前为止,它受到了safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block类型盒属于block类型盒的一种,但是在显示时具有inline类型盒的特点。

默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式时底部对齐,如果想改为顶部对齐,还需要在div元素的样式中加入vertical-align属性。去掉换行符加float。

三、inline-tablel类型

inline-tablel类型是css2中新增的盒类型,到目前为止,该类型受到了safari、opera、chrome、firefox以及IE8以上版本浏览器的支持。

四、list-item类型

如果元素的类型设置为list-item类型,可以将多个元素作为列表来显示,同时在元素的开头加上列表的标记(list-style-type)。

 

以上是关于盒相关样式的主要内容,如果未能解决你的问题,请参考以下文章

你真的了解盒模型么

声明顺序

盒模型相关面试题

前端笔记十一,盒模型与布局相关属性

盒模型布局相关-基础与语法

显示方式+盒模型相关