首页 > 其他分享 >css 的三种元素

css 的三种元素

时间:2024-01-26 14:55:36浏览次数:20  
标签:元素 宽度 三种 css 设置 内联 inline block

css中包含3中元素:块状元素内联元素(又叫行内元素)内联块状元素

一、常用的块级元素(block)

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

主要特点:display:block

1、每个块级元素独占一行。

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

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

二、常用的内联元素有(inline):

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

主要特点:display:inline

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

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

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

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

<img>、<input>

主要特点:display:inline-block

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

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

四、总结:

(1)、block是块级元素,占一行的空间,它会给当前所在的div后边添加无数个</br>标签,直到这一行被占满了;
设置width和height可以生效;
(2)、inline从左到右一个接一个的排列,设置width和height都不生效;
(3)、inline-block也是和inline一样的效果,也是从左到右一个接一个的排列,但是inline-block对width和height生效;

 

标签:元素,宽度,三种,css,设置,内联,inline,block
From: https://www.cnblogs.com/wongzzh/p/17989404

相关文章

  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......
  • 取消antd中Table组件的默认效果,双击每个子元素可发事件
    CSS部分代码::global(.ant-table-body){min-height:150px!important;//设置整个表格的最小高度}:global(.ant-table-wrapper){border:1pxsolid#f0f0f0;}:global(.ant-empty-normal){display:none;//默认空表格不显示任何内容}:global{//设置......
  • iOS ARKit --人脸跟踪之挂载虚拟元素
    ​    人脸跟踪(FaceTracking)是指将人脸检测扩展到视频序列,跟踪同一张人脸在视频序列中的位置。是论上讲,任何出现在视频中的人险都可以被跟踪,也即是说,在连续视频帧中检测到的人脸可以被识别为同一个人。人脸跟踪不是人脸识别的一种形式,它是根据视频序列中人脸的位置和运......
  • 无涯教程-CSS3 - 用户界面
    用户界面属性允许您将任何元素更改为几个标准用户界面元素之一。CSS3用户界面中使用的一些常用属性。Sr.No.Value&Remark1appearance用于允许用户将元素制作为用户界面元素。2box-sizing允许用户以清晰的方式将元素固定在区域上。3icon用于在区域上提供图标。......
  • vue3中使用animate.css+wow.js
    官网链接:animatewow.js版本声明:"dependencies":{"vue":"^3.3.11","animate.css":"^4.1.1","wow.js":"^1.2.2"},1.安装:npminstallanimate.css--savenpminstallwow.js......
  • 无涯教程-CSS3 - 多列布局
    CSS3可以将文本内容设计成像报纸一样的多列布局。一些最常用的多列属性,如下所示-Sr.No.Value&Remark1column-count 指定元素应该被分割的列数。2column-fill指定如何填充列3column-gap 指定列与列之间的间隙4column-rule所有column-rule-*属性的简......
  • 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素。
    704.二分查找题目链接:https://leetcode.cn/problems/binary-search/文章讲解:https://programmercarl.com/0704.二分查找.html简单的二分查找法,核心是认识区间的意义,注意以下几点:middle=low+(low+high)/2;这种写法可以防止溢出。注意low和high的循环条件判断,如果是左闭右闭......
  • js CSS 类扩展
    自HTML4被广泛采用以来,Web开发中一个主要的变化是class属性用得越来越多,其用处是为元素添加样式以及语义信息。自然地,JavaScript与CSS类的交互就增多了,包括动态修改类名,以及根据给定的一个或一组类名查询元素,等等。为了适应开发者和他们对class属性的认可,HTML5增加了......
  • 无涯教程-CSS3 - 字体属性(Font)
    Web字体用于允许CSS中的字体,这些字体未在本地系统上安装。Sr.No.Font&Remark1TrueTypeFonts(TTF)TrueType是Apple和Microsoft在1980年代后期开发的轮廓字体标准,它成为Windows和MAC操作系统最常用的字体。2OpenTypeFonts(OTF)OpenType是Microsoft开发的可缩放计......
  • 使用display:inline-block实现类grid布局时,元素的上下左右之间多了无法消除的间隔,去除
    错误如图 元素左右间隔,上下间隔,都不是手动设置的,布局换行之后自动出现的。 清除上下间隔方法。给每个div设置vertical-align:bottom/top;如果是下边距,就设置为bottom,上边距,就设置为top 清除左右间隔方法。没有尝试,但是网上搜的方法是,给父元素设置font-size:......