css中块状元素和内联元素

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;}

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

点赞
收藏

评论区

加载中...

相关推荐

小记面试题-2021

CSS类1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些

总结前端元素的各种高度(上)

HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平

考考你HTML常用的标签有哪些?

原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用

CSS块级元素与行内元素

CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd

CSS实现居中的方式

在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text

CSS 分类 (Classification)

★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565