元素分类--块级元素(特点:独占一行, 宽高边距可改)

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

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

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

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

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p, ol{background:pink;}
li{background:red;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
<h1>xxx</h1>
<ol><li>xxxx</li><li>xxxx</li><li>xxxx</li><li>xxxx</li>
</ol>
</body>
</html>

效果:

转载于:https://www.cnblogs.com/Rinpe/p/5547508.html

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

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

相关文章

站立会议05(第二次冲刺)

一、站立会议信息&#xff08;配站立会议照片&#xff09; 第五天我们继续开发&#xff0c;把注册验证信息完善一下&#xff0c;将开始网站公共主页的开发。 二、任务进度 第五天我们注册验证完成。 三、任务看板&#xff08;图&#xff09; 四、燃尽图&#xff08;图&#xff…

[SoapUI] DataSource, DataSourceLoop, DataSink

Script assertion in login: 转载于:https://www.cnblogs.com/MasterMonkInTemple/p/4748189.html

将CAPTCHA添加到您的GWT应用程序

什么是验证码&#xff1f; 在一个充满恶意机器人的世界中&#xff0c;您该怎么做才能保护您宝贵的Web应用程序&#xff1f; 您真正应该做的基本事情之一就是向其中添加CAPTCHA功能。 如果您不熟悉&#xff08;听起来有些奇怪&#xff09;&#xff0c;则CAPTCHA是确保用户实际上…

SQL基础语句

数据库面试常见题 一、SQL语言包括数据定义语言、数据操作语言、数据控制语言和事务控制语言1&#xff1a;DDL(Data Definition Language)&#xff0c;是用于描述数据库中要存储的现实世界实体的语言。 CREATE TABLE - 创建新表 ALTER TABLE - 变更&#xff08;改变&#xff0…

iOS学习——ScrollView图片轮播和同类控件优先级问题

iOS学习——ScrollView的使用和同类控件优先级问题 1. 布置界面 ScrollView的使用非常简单&#xff0c;只有三步 1.1 添加一个scrollview 1.2 向scrollview添加内容 1.3 告诉scrollview中内容的实际大小 首先做第一步&#xff0c;布置界面。 拖拽一个scrollview就可以了 就…

Git 分支管理和冲突解决

创建分支 git branch 没有参数&#xff0c;显示本地版本库中所有的本地分支名称。 当前检出分支的前面会有星号。 git branch newname 在当前检出分支上新建分支&#xff0c;名叫newname。 git checkout newname 检出分支&#xff0c;即切换到名叫newname的分支。 git checkout…

git克隆/更新/提交代码步骤及示意图

1. git clone ssh://flycm.intel.com/scm/at/atSrc 或者git clone ssh://flycm.intel.com/scm/at/atJar 或者git clone ssh://flycm.intel.com/scm/at/atFramework 2. git checkout cpeg/scm/stable 切换分支&#xff0c;然后更新代码 3. git pull 先把远程分支上最新的代码拉到…

互联网金融P2P主业务场景自动化测试

互联网金融P2P行业&#xff0c;近三年来发展迅速&#xff0c;如火如荼。据不完全统计&#xff0c;全国有3000的企业。“互联网”企业&#xff0c;几乎每天都会碰到一些奇奇怪怪的bug&#xff0c;作为在互联网企业工作的测试人员&#xff0c;风险和压力都巨大。那么我们如何降低…

OSGi将Maven与Equinox结合使用

很长时间以来&#xff0c;我一直在努力理解OSGi的真正含义。 它已经存在很长时间了&#xff0c;但是没有多少人意识到这一点。 人们已经大肆宣传它是一种非常复杂的技术。 这是我为所有Java开发人员简化的尝试。 简而言之&#xff0c; OSGi是一组规范&#xff0c;这些规范允许对…

Hadoop:简单介绍

什么是Hadoop&#xff1a; Hadoop是一种用Java编写的框架&#xff0c;用于在大型商品硬件集群上运行应用程序&#xff0c;并具有类似于Google File System和MapReduce的功能 。 HDFS是高度容错的分布式文件系统&#xff0c;与Hadoop一样&#xff0c;旨在部署在低成本硬件上。 它…

Javascript 异步编程的4种方法

你可能知道&#xff0c;Javascript语言的执行环境是"单线程"&#xff08;single thread&#xff09;。 所谓"单线程"&#xff0c;就是指一次只能完成一件任务。如果有多个任务&#xff0c;就必须排队&#xff0c;前面一个任务完成&#xff0c;再执行后面一…

JAVA入门之方法

所谓方法&#xff0c;就是用来解决一类问题的代码的有序组合&#xff0c;是一个功能模块。 一般情况下&#xff0c;定义一个方法的语法是&#xff1a; 其中&#xff1a; 1、 访问修饰符&#xff1a;方法允许被访问的权限范围&#xff0c; 可以是 public、protected、private 甚…

JAVA运算符和优先级

1、算术运算符&#xff1a; 和 -- 既可以出现在操作数的左边&#xff0c;也可以出现在右边&#xff0c;但结果是不同&#xff0c;如&#xff1a; ①int a5&#xff1b;int ba&#xff1b; #先把a赋给b&#xff0c;a再自增 ②int a5&#xff1b;int ba&#xff1b;   #a先…

将JSON功能添加到您的GWT应用程序中

JSON简介 在Web应用程序上工作时&#xff0c;总是会出现客户端-服务器数据交换的问题。 在此问题上有多种方法&#xff0c;其中许多使用XML进行交换。 执行此任务的一种不太知名的格式是JSON。 JSON&#xff08;JavaScript对象表示法&#xff09;是一种轻量级的数据交换格式。…

win10资源管理器怎么打开_让你效率倍增的电脑神器,最强资源管理器增强工具「QTTabBar」...

前言Windows 自带的资源管理器的功能比较简单&#xff0c;够用是够用了&#xff0c;但有时也确实无法满足我们对更便捷高效的操作方式的追求。「QTTabBar」正是一个非常强大的 Windows 资源管理器增强工具&#xff01;不仅支持多标签页管理&#xff0c;还有许多便捷的扩展功能&…

android横向滑动选择的view

做文字编辑&#xff0c;从网上找来的。 HorizontalScrollSelectView&#xff1a; public boolean mAlwaysOverrideTouch true;protected ListAdapter mAdapter;private int mLeftViewIndex -1;private int mRightViewIndex 0;protected int mCurrentX;protected int mNextX;…

excel使用教程_数据分析Excel必备技能:数据透视表使用教程

江米小枣tonylua | 作者掘金 | 来源处理数量较大的数据时&#xff0c;一般分为数据获取、数据筛选&#xff0c;以及结果展示几个步骤。在 Excel 中&#xff0c;我们可以利用数据透视表(Pivot Table)方便快捷的实现这些工作。本文首先手把手的教你如何在 Excel 中手动构建一个基…

java调用webservice_笃学私教:Java开发网站架构演变过程-从单体应用到微服务架构详解...

原标题&#xff1a;笃学私教&#xff1a;Java开发网站架构演变过程-从单体应用到微服务架构详解Java开发网站架构演变过程&#xff0c;到目前为止&#xff0c;大致分为5个阶段&#xff0c;分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细…

专2-第二课 Eclipse开发环境搭建

2.1下载Eclipse 2.2 安装C/C版本的Eclipse 2.3 安装JDT插件开发Java程序 2.4 使用Eclipse开发驱动程序 既然安装了eclipse来进行驱动学习&#xff0c;那么我们就先来试试看eclipse开发驱动的大致流程。这里以Linux设备驱动作为示列给读者展示整个流程&#xff0c;Android底层的…

tkinter 菜单添加事件_Tasker的最新测试劫持了Android 11的电源菜单

流行的Android自动化应用Tasker 最近收到了重大更新&#xff0c;为该应用引入了许多新功能。该更新包括解锁应用程序读取手机上任何传感器以触发任务的功能&#xff0c;使您可以通过任何第三方应用程序自动发送短信或拨打电话的功能&#xff0c;完全请勿打扰自定义功能。通过链…