CSS中的块元素,内联元素,内联块元素

块元素,内联元素,内联块元素

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

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

  • 支持全部的样式
  • 如果没有设置宽度,默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度

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

  • 支持部分样式(不支持宽、高、margin上下)
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子之间会产生间距
  • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置垂直对齐方式

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

  • 支持全部样式
  • 如果没有设置宽高,宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子会产生间距
  • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式

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

display属性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

小试牛刀

请制作图中所示的菜单:

在这里插入图片描述

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

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

相关文章

django 与 vue 的完美结合

最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue。看了vue的一些文档,还有一些项目,先说一下django…

东芝确定半导体重组计划:保留闪存其他全卖

会计丑闻给日本东芝公司的业绩带来严重影响,为了提高盈利,东芝正在对旗下的半导体、个人电脑、白色家电等业务进行一次重大重组。据日经新闻1月23日报道,东芝已经正式制定了芯片业务重组的详细计划,除了占据优势的闪存芯片之外&am…

python画两条曲线图_python绘制多个曲线的折线图

这篇文章利用的是matplotlib.pyplot.plot的工具来绘制折线图,这里先给出一个段代码和结果图: # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里导入你自己的数据 #...... #...... #x_axix&a…

5.19汇总

int block_x 8*(b8 & 0x01)4*(b4 & 0x01);int block_y 8*(b8 >> 1)4*(b4 >> 1);请问下老大 这两句定义是什么意思啊? 带些值进去算一下就知道了 b8 0 1 2 3b4 0 1 2 3 A:0 ........Er…

oracle 截取字指定的字符串

过滤指定的字符串,一字符串有重复的数据内容,所以需要去掉重复的内容,subst()截取 起止下标;instr()获取终止下标位置 例如:substr(p.address, 0, instr(p.address, -, 1, 1)-1) ); case when length(substr(p.address, 0, instr(p.address, -, 1, 1)-1) ) 13 then substr(sub…

[django]django模型中auto_now和auto_now_add

示例: update_time models.DateTimeField(更新时间, defaulttimezone.now) create_time models.DateTimeField(创建时间, auto_now_addTrue) auto_now无论是你添加还是修改对象,时间为你添加或者修改的时间。 auto_now_add为添加时的时间,更新对象时不…

2014-7-29-阿里电面-第一轮

等了好久,以为简历要挂了,今天最终打来了。面试过程中手抖嘴抖有木有! 1、经经常使用的集合类。我回到ArrayList、LinkedList、HashMap,接着问ArrayList、LinkedList的差别,以及分别的适用范围。看了Java集合类基本上是…

数据分级分类实施指南_运营商行业数据安全治理实践

建立组织构建大数据安全保障组一、大数据安全保障工作组职责 1、负责制定大数据信息安全策略,明确信息安全目标。 2、组织相关平台负责人定期召开信息安全会议。 3、负责客户数据安全突发事件应急方案实施和大数据信息系统日常安全运行管理的组织协调及决策工作。 4…

CSS中的定位

定位 关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下: relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移absolute 生成绝对定位元素,元…

servlet中中文正常显示,mysql数据库手动插入中文正常显示,servlet向mysql中插入中文显示乱码...

作者:http://5563447.blog.51cto.com/5553447/1422627 问题是:就是POST请求提交表单数据给servlet,通过JDBC插入Mysql,出现中文乱码。 解决方式:在url后面加这句 ?useUnicodetrue&characterEncodingutf-8 我的项目: 结果&am…

rtp问题引领汇总

视频网络传输一定要用rtp吗? RTP/RTCP有一套很好的反馈机制,通过其可以估算网络状况,然后在编码端进行调整,如网络繁忙时适当的降低画面质量,减小码率等,主要是想通过RTP/RTCP协议实现QoS!同时…

Django的信号机制详解

Django的信号机制详解 Django提供一种信号机制。其实就是观察者模式,又叫发布-订阅(Publish/Subscribe) 。当发生一些动作的时候,发出信号,然后监听了这个信号的函数就会执行。 Django内置了一些信号,比如: django.…

垃圾回收算法_垃圾回收算法有哪些

垃圾检测通常通过建立一个根对象的集合以及建立一个从这些根对象开始能够触及的对象集合来实现。如果正在执行的程序可以访问到根对象和某个对象之间存在引用路径,这个对象就是可触及的。对于程序来说,根对象总是可以访问的。从这些根对象开始&#xff0…

不错的电子书下载网站

为什么80%的码农都做不了架构师?>>> www.jb51.net 电子书质量不错,虽然是扫描版的,但是都是高清的. vdisk.weibo.com 网盘, 内容很多! 转载于:https://my.oschina.net/GMT/blog/1188971

GeoHash核心原理解析

原文地址:http://www.cnblogs.com/LBSer/p/3310455.html geohash for php:附件下载geohash.tar.gz 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西。某一天机机到北海公园游玩,肚肚饿了&am…

[转载]流行视频格式讲解

*. MPEG/.MPG/.DAT MPEG也是Motion Picture Experts Group 的缩写。这类格式包括了 MPEG-1, MPEG-2 和 MPEG-4在内的多种视频格式。MPEG-1相信是大家接触得最多的了,因为目前其正在被广泛地应用在 VCD 的制作和一些视频片段下载的网络应用上面,大部分的…

Ajax相关介绍

ajax是什么? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 AJAX 是一种在 2005 年由 Google 推广开来的编程模式。 AJAX 不是一种新的…

解决Ubuntu中文件管理器死掉的情况

有时会遇到Ubuntu文件管理器死掉的情况,怎么点击都没有反应,这时只需在终端上运行 ps -A | grep nautilus, 查找文件管理器nautilus对应的pid,然后sudokillpid就可以关闭文件管理器进程,随便点击一个文件夹就可以重启文件管理器了…

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??

基于Vue2.x, element-ui 2.x,以及开源组件el-form-renderer封装了一个业务组件el-data-table,已在github开源,其目标是:makes restful api crud easily 特点:1. 使用axios自动发送请求2.自带新增/修改/删除逻辑(默认新…

Win10无法使用小娜搜索本地应用问题的解决方案

小娜介绍 win10的Cortana小娜是一个功能非常强大的语音和搜索助手,用户可以通过小娜助手搜索任意的文件和应用软件,不过有用户发现win10的小娜搜索不到已安装的本地软件,那么win10小娜助手无法搜索本地应用怎么解决呢?下面小编教大…