CSS: inline、block和inline-block的区别

简介: CSS: inline、block和inline-block的区别

block

块级元素特点:


1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(很霸道,一个块级元素独占一行)


2、元素的高度、宽度、行高以及顶和底边距都可设置。


3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

 

inline


内联元素特点:


1、和其他元素都在一行上

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

 

inline-block


内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点。

inline-block 元素特点:


1、和其他元素都在一行上


2、元素的高度、宽度、行高以及顶和底边距都可设置

 


相关文章
|
6天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
53 0
|
6天前
|
前端开发
CSS和HTML的区别
CSS和HTML的区别。
10 2
|
6天前
|
负载均衡 监控 前端开发
|
6天前
|
前端开发 小程序 容器
wxss和css的区别
wxss和css的区别
22 2
|
6天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
|
6天前
|
前端开发
CSS样式引用方式的区别
CSS样式引用方式的区别
|
6天前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些,link和@import的区别?
【4月更文挑战第22天】【Web 前端】css的引用有哪些,link和@import的区别?
|
6天前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
6天前
|
前端开发
css中定位有几种,有什么区别
css中定位有几种,有什么区别
13 3
|
6月前
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
68 1