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、元素的高度、宽度、行高以及顶和底边距都可设置

 


相关文章
|
16天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
28 0
|
24天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
9 0
|
5月前
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
65 1
|
2月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
2月前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
11 2
|
3月前
|
前端开发
css引入方式有几种?link和@import有什么区别?
css引入方式有几种?link和@import有什么区别?
26 0
|
3月前
|
缓存 前端开发
css中Link和@import之间有什么区别?
css中Link和@import之间有什么区别?
|
8月前
|
编解码 前端开发 JavaScript
说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别?
说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别?
|
8月前
|
前端开发 JavaScript
说说react中引入css的方式有哪几种?区别?
说说react中引入css的方式有哪几种?区别?
|
3月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别