css 块元素、内联元素、内联块元素

元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

 

块元素:

块元素,也可以称为行元素,布局中常用的标签,如:div、p、ul、li、h1-h6等等都是块元素,它在布局中的行为:

(1)支持全部的样式

(2)如果没有设置宽度,默认的宽度为父级宽度100%

(3)盒子占据一行、即使设置了宽度

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>块元素</title><style type="text/css">.box{background-color: gold;/*width:300px;*//*height:200px;*/}.box2{background-color: green;/*width:300px;*//*height:200px;*/}</style>
</head>
<body><div class="box">div元素</div><p class="box2">p元素</p
</body>
</html>

页面显示效果:

 

内联元素:

 

内联元素,也可以称为行内元素,布局中常用的标签,如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

(1)支持部分样式(不支持宽、高、margin上下、padding上下)

(2)宽高由内容决定

(3)盒子并在一行

(4)代码换行,盒子之间会产生间距

(5)子元素是内联元素,父元素可以用text-align属性设置子元素水平对方方式

 

解决内联元素间隙的方法:

(1)去掉内联元素之间的换行

(2)将内联元素的父级设置font-size为0,内联元素自身再设置font-size

代码:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联元素</title><style type="text/css">.box{width:500px;height:400px;border:1px solid #000;margin:50px auto 0;font-size:0;  /* 解决内联元素间隙 */}.box div{width:100px;height:100px;margin:10px;background-color:gold;}.box a{background-color:gold;/*width:300px;height:200px;设置宽高完全不起作用 *//*margin:100px 20px;没有上下的边距,只有左右的边距 *//*padding:10px 10px;*//* padding的上下不应该起作用的,却出现了bug */font-size:16px;/* 解决内联元素间距 */}.box2{width:500px;height:100px;border:1px solid #000;margin:50px auto 0;text-align:center;}</style>
</head>
<body><div class="box"><div></div><div></div><a href="#">链接文字一</a><a href="#">链接文字二</a>  /* 取消间隙 */<a href="#">链接文字三</a><a href="#">链接文字四</a><a href="#">链接文字五</a></div><div class="box2"><a href="#">链接文字</a></div>
</body>
</html>

内联块元素:

内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

(1)支持全部样式

(2)如果没有设置宽高,宽高由内容决定

(3)盒子并在一起

(4)代码换行,盒子会产生间距

(5)子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。

 

这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联元素,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PWN-PRACTICE-BUUCTF-10

PWN-PRACTICE-BUUCTF-10jarvisoj_level3_x64bjdctf_2020_babyrop2hitcontraining_uafjarvisoj_test_your_memoryjarvisoj_level3_x64 64位elf的栈溢出&#xff0c;ret2csu from pwn import * #context.log_leveldebug #ioprocess(./jarvisoj_level3_x64) ioremote(node4.buuo…

PWN-PRACTICE-BUUCTF-11

PWN-PRACTICE-BUUCTF-11bjdctf_2020_routerpicoctf_2018_buffer overflow 1pwnable_orwwustctf2020_getshellbjdctf_2020_router Linux 系统可以在一个命令行上执行多个命令:; --如果命令被分号(;)所分隔&#xff0c;那么命令会连续的执行下去&#xff0c;就算是错误的命令也会…

Redis与关系型数据库的同步问题

Redis是一个高性能的key-value数据库。 redis的出现&#xff0c;很大程度补偿了memcached这类key-value存储的不足&#xff0c;在部分场合可以对关系数据库起到很好的补充作用。它提供了Python&#xff0c;Ruby&#xff0c;Erlang&#xff0c;PHP客户端&#xff0c;使用很方便。…

Delphi各个版本和发展历史

Delphi&#xff0c;是Windows平台下著名的快速应用程序开发工具(Rapid Application Development&#xff0c;简称RAD)。它的前身&#xff0c;即是DOS时代盛行一时的“BorlandTurbo Pascal”&#xff0c;最早的版本由美国Borland&#xff08;宝兰&#xff09;公司于1995年开发。…

PWN-PRACTICE-BUUCTF-12

PWN-PRACTICE-BUUCTF-12cmcc_simpleroppicoctf_2018_buffer overflow 2babyfengshui_33c3_2016xdctf2015_pwn200cmcc_simplerop 静态编译的32位elf&#xff0c;找一个"int 80h"执行系统调用 前提是利用栈溢出读入字符串"/bin/sh\x00"&#xff0c;然后找po…

C# 基础——C#特性

.NET C# Web开发学习之路——C#特性 C#历史办版本及特性 语言版本发布时间.NET Framework要求Visual版本C# 1.02002.1.NET Framework 1.0Visual Studio .NET 2002C# 1.1\1.22003.4.NET Framework 1.1Visual Studio .NET 2003C# 2.02005.11.NET Framework 2.0Visual Studio 20…

PWN-PRACTICE-BUUCTF-13

PWN-PRACTICE-BUUCTF-13[ZJCTF 2019]Logininndy_ropmrctf2020_shellcodejarvisoj_level1[ZJCTF 2019]Login 参考&#xff1a;ZJCTF 2019 Pwn from pwn import * ioremote(node4.buuoj.cn,27513) #io process("./login") shell 0x400e88 io.recvuntil("user…

同步与异步系列之二 导读目录

.NET 同步与异步 之 EventWaitHandle&#xff08;Event通知&#xff09; &#xff08;十三&#xff09; .NET 同步与异步 之 Mutex &#xff08;十二&#xff09; .NET 同步与异步 之 线程安全的集合 (十一) .NET 同步与异步 之 警惕闭包&#xff08;十&#xff09; .NET 同…

PWN-PRACTICE-BUUCTF-14

PWN-PRACTICE-BUUCTF-14bbys_tu_2016ciscn_2019_n_3roarctf_2019_easy_pwngyctf_2020_borrowstackbbys_tu_2016 栈溢出&#xff0c;覆盖eip到printFlag函数 from pwn import * #ioprocess(./bbys_tu_2016) ioremote(node4.buuoj.cn,27817) elfELF(./bbys_tu_2016) #io.recvun…

.NET 实现并行的几种方式(一)

好久没有更新了&#xff0c;今天来一篇&#xff0c;算是《同步与异步》系列的开篇吧&#xff0c;加油&#xff0c;坚持下去&#xff08;PS:越来越懒了&#xff09;。 一、Thread 利用Thread 可以直接创建和控制线程&#xff0c;在我的认知里它是最古老的技术了。因为out了、所…

PWN-PRACTICE-BUUCTF-15

PWN-PRACTICE-BUUCTF-15axb_2019_fmt32wustctf2020_getshell_2others_babystackpwnable_startaxb_2019_fmt32 格式化字符串漏洞 第一次打印出printf的真实地址&#xff0c;进而计算libc基地址&#xff0c;得到system真实地址 第二次修改got表&#xff0c;使printf的got指向sys…

PWN-PRACTICE-BUUCTF-16

PWN-PRACTICE-BUUCTF-16mrctf2020_easyoverflowhitcontraining_magicheapciscn_2019_s_40ctf_2017_babyheapmrctf2020_easyoverflow 覆盖main函数中的v5&#xff0c;使之为"n0t_r311y_f1g" from pwn import * rremote("node4.buuoj.cn",29521) payloada*…

REVERSE-PRACTICE-BUUCTF-32

REVERSE-PRACTICE-BUUCTF-32[第四章 CTF之APK章]数字壳的传说[第五章 CTF之RE章]Hello, RE[第五章 CTF之RE章]BabyAlgorithm[第五章 CTF之RE章]BabyConst[第五章 CTF之RE章]BabyLib[第五章 CTF之RE章]easy_rust[第五章 CTF之RE章]easy_go[第五章 CTF之RE章]easy_mfc[第四章 CTF…

.NET 实现并行的几种方式(二)

本随笔续接&#xff1a;.NET 实现并行的几种方式&#xff08;一&#xff09; 四、Task 3&#xff09;Task.NET 4.5 中的简易方式 在上篇随笔中&#xff0c;两个Demo使用的是 .NET 4.0 中的方式&#xff0c;代码写起来略显麻烦&#xff0c;这不 .NET 4.5提供了更加简洁的方…

PWN-PRACTICE-BUUCTF-17

PWN-PRACTICE-BUUCTF-17hitcontraining_heapcreatorwustctf2020_closedciscn_2019_es_7hitcon2014_stkofhitcontraining_heapcreator 单字节溢出&#xff0c;修改下一个chunk的size&#xff0c;造成chunk overlap&#xff0c;实现任意地址读写 参考&#xff1a;buuctf hitcont…

redis 和 数据库mysql之间的关系

https://www.zhihu.com/question/20734566 https://www.zhihu.com/question/19660689 http://blog.csdn.net/Ideality_hunter/article/details/77621643 redis和mysql要根据具体业务场景去选型 mysql&#xff1a;数据放在磁盘redis&#xff1a;数据放在内存 redis适合放一些…

PWN-PRACTICE-BUUCTF-18

PWN-PRACTICE-BUUCTF-18ciscn_2019_final_3ciscn_2019_s_9jarvisoj_level5pwnable_hacknoteciscn_2019_final_3 tcache dup 参考&#xff1a;[V&N2020 公开赛]easyTHeap ciscn_2019_final_3 ——heap中tcache的一些简单利用方法 # -*- coding:utf-8 -*- from pwn impor…

GPS/轨迹追踪、轨迹回放、围栏控制

折腾一个多月终于弄完了这个项目&#xff0c;起初都未曾接触GPS/轨迹追踪、轨迹回放、圈划围栏...等一些在百度地图或者Googel地图操作的一些业务&#xff0c;后端的业务相对来说简单点 cas单点登录&#xff0c;mongdb灵活的数据存储方式,ActiveMQ消息推送、Redis存储... 这篇…

PWN-PRACTICE-BUUCTF-19

PWN-PRACTICE-BUUCTF-19hitcontraining_bambooboxpicoctf_2018_shellcodenpuctf_2020_easyheapcmcc_pwnme2hitcontraining_bamboobox unlink&#xff0c;参考&#xff1a;hitcontraining_bamboobox 堆技巧 unlink # -*- coding:utf-8 -*- from pwn import * #ioprocess("…

推荐使用:Vue.js ReactJS Angular 2 AngularJS

概要: 现在&#xff0c; Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过&#xff0c;许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。 总之&#xff0c;Vue 给 React & Angular 的弊病提供了一道…