跳转到主要内容
你行网

Main navigation

  • 首页
  • Drupal
  • 编程与开发
  • 数据库
  • 操作系统与应用
  • 服务器与运维
  • 社区
User account menu
  • 登录

面包屑

  1. 首页

html 块级元素 display:block详解

由 hrs, 11 八月, 2023

1、每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。

 

2、块级元素:占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形;


    行内元素 :自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。


3、例子:链接 a 元素,在默认情况下是是“行内元素”,因此对a元素设置高度、宽度等属性,都是无效的。而比如div,p,li,img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素。


常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> (块引用)、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>(表示计算机源代码或者其他机器可以阅读的文本内容)

常用的内联块状元素有:

<img>、<input>

图片是内联元素,同时是替换元素,替换元素是可以设置宽高的

 

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

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

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

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

 

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使div元素具有内联元素特点。

div{

    display:inline;

}

<div>我要变成内联元素</div>

 

内联元素特点:

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

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

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

  • 登录或注册以发表评论

文章标签

  • HTML

评论

文章标签

CSS
Excel
ubuntu
php
vim
五笔
Linux
VPN
command
HTML
drupal 8
drupal 7
centos
composer
Mysql
drush
模块(module)
Drupal
JavaSrcipt
apache
drupal 9
英语
nerdtree
SEO
network
果树种植
surround
drupal10
主题(theme)
ssh
phpmyadmin
yum
二进制
权限
声音
ssl
selinux
HTML5
WireGuard
password
Dreamweaver
DDEV
flameshot
翻译
颜色
uploadprogress
firewalld
kernel
邮件验证
视图(views)
快捷键
gzip
xdebug
错误
电脑基础
ckeditor
C语言
简介
源地址
mbstring
certbot
php扩展
git
csharp
httpd
apt
电子秤
压缩解压
breadcrumb
表单
短信验证
AI
firmware
摄影
diff
superfish
重定向
drupal 11
网站备份
docker
版本号
tagclouds
java
RSS
adsense
电脑技巧
端口
KVM
simple_adsense
算法
youtube
JavaScript
cookie
badblocks
网站运营
计算机基础
RFID
zip
dns
标签优化
VUE
gimp
form
mod_expires 模块
赚钱
ip
http验证
curl
重定向,301
netstat
字段
maven
input
nginx
哈希值
npm
wps
更多

相关文章

  • 代码框右上角的复制功能怎么实现
  • HTML空格符简介
  • 打字游戏
  • html 中img元素的title属性作用
  • html 定位属性position 说明
  • html中“input”如何设置位置?
  • html 实战制作页脚的实例
  • drupal 8 视图HTML标记文本元素说明
RSS源

友情链接 网站地图 版权信息 联系我们 网址导航 社区

Copyright © 2019 - 2021 你行网 版权所有  粤ICP备19072650号