css中块状元素和内联元素

小嫌
• 阅读 1134

CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

块状元素

块状元素特点

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块状元素有:

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

内联元素转化为块状元素

a{display:block;}

转化后的内联元素将拥有块状元素的性质

内联元素

内联元素特点

1、和其他元素都在一行上; 2、元素的高度、宽度及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块状元素转化为内联元素

div{display:inline;}

转化后的块状元素将拥有内联元素的性质

内联块状元素

内联块状元素特点

1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有:

<img>、<input>

元素转化为内联块状元素

a{display:inline-block;}

转化后的元素将拥有内联块状元素的性质

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
3年前
小记面试题-2021
CSS类1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些
秃头王路飞 秃头王路飞
2年前
总结前端元素的各种高度(上)
HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平
菜园前端 菜园前端
1年前
考考你HTML常用的标签有哪些?
原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
3年前
CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
3年前
CSS布局模型
1、流动模型(Flow)    流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。    流动布局模型具有2个比较典型的特征:      (1)块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。      (2)在流动模型
Wesley13 Wesley13
3年前
HTML元素和事件对象中的各种宽高和位置
HTML元素和事件对象中的各种宽高和位置标签:js\TOC\经常被一堆的xxxWidth,xxxLeft弄混,统一整理一下。1\.HTML元素中的宽高和位置属性clientWidth表示元素的内部宽度,以像素计。该属性包括
Wesley13 Wesley13
3年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除
小万哥 小万哥
6个月前
XML Schema 复杂元素类型详解:定义及示例解析
在XMLSchema(XSD)中,复杂元素是指包含其他元素和/或属性的XML元素。复杂元素可以分为四种类型:1.空元素:仅包含其他元素和/或属性的元素。2.仅包含其他元素的元素:不包含文本内容,只包含其他子元素的元素。3.仅包含文本的元素:不包含其他子元素