行内元素进行绝对定位后会变成块级元素·

position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* *{
padding: 0;
margin: 0;
} */
span{
position: absolute;

/* 一定要写四个位置，否则无法居中显示 */
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background: rgba(255, 0, 255, .6);
margin: auto;
}
</style>
</head>
<body>
<span>行内元素进行绝对定位后会变成块级元素</span>
<a href="#">行内元素进行绝对定位后会变成块级元素</a>
<a href="#">样式，先写width,height,position,top,right,bottom,left确定位置</a>
<a href="#">再写不影响布局的color,background,font-size,font-family等等</a>
</body>
</html>

==============================================

行内元素进行固定定位后会变成块级元素·

position:fixed;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* *{
padding: 0;
margin: 0;
} */
span{
position: fixed;

/* 一定要写四个位置，否则无法居中显示 */
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background: rgba(255, 0, 255, .6);
margin: auto;
}
</style>
</head>
<body>
<span>行内元素进行绝对定位后会变成块级元素</span>
<a href="#">行内元素进行绝对定位后会变成块级元素</a>
<a href="#">样式，先写width,height,position,top,right,bottom,left确定位置</a>
<a href="#">再写不影响布局的color,background,font-size,font-family等等</a>
</body>
</html>

行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·的更多相关文章

  1. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  2. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

  3. html行内元素、块级元素及空元素有哪些？区别是什么？

    一. html标签有哪些? 1)行内元素有哪些? 行内元素:行内大多为描述性标记 <span>...</span> <a>...</a>  链接. 锚点 ...

  4. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. css菜鸟学习之text-align属性，行内元素，块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  7. 《Web开发中块级元素与行内元素的区分》

    一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...

  8. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  9. CSS基础知识（概念、块级元素、行内元素、选择器）

    1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样式( ...

随机推荐

  1. QSqlDatabase

    QSqlDatabase  使用静态方法addDatabase来创建一个数据库连接. 如果你的程序中只有一个数据库连接,可以使用如下语句创建连接 QSqlDatabase db = QSqlDatab ...

  2. IBM Security AppScan Standard使用方法

    一.常规配置Appscan (安全自动化测试工具) Appscan是web应用程序渗透测试舞台上使用最广泛的工具之一.它是一个桌面应用程序,它有助于专业安全人员进行Web应用程序自动化脆弱性评估.本文 ...

  3. spark集群安装并集成到hadoop集群

    前言 最近在搞hadoop+spark+python,所以就搭建了一个本地的hadoop环境,基础环境搭建地址hadoop2.7.7 分布式集群安装与配置 本篇博客主要说明,如果搭建spark集群并集 ...

  4. CTS & APIO 2019 游记

    写在前面 算是省选后的第一轮大考. 去年因为某些原因并没有参加 CTSC 以及 APIO,还是有些遗憾,所以希望今年能有所收获. 也希望今年的 CTS 能延续去年的出题风格,这样我还能苟一两个题. 然 ...

  5. CCF 2017-09-2 公共钥匙盒

    CCF 2017-09-2 公共钥匙盒 题目 问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室 ...

  6. 跨站脚本攻击XSS(二)——session劫持

    转载自:http://www.cnblogs.com/dolphinX/p/3403027.html 在跨站脚本攻击XSS中简单介绍了XSS的原理及一个利用XSS盗取存在cookie中用户名和密码的小 ...

  7. 浅析web网站反向代理的配置

    一.背景 最近在部署项目到web服务器上时,该项目有一个打开视频监控的功能,视频的服务器是一台内网的服务器,不允许设置外网端口访问,网站服务器和视频服务器在同一个局域网内,可以相互联通.网络拓扑图如下 ...

  8. Tomcat服务器的数字证书 HTTPS 连接！

    SUN公司提供了制作证书的工具keytool, 在JDK 1.4以后的版本中都包含了这一工具,它的位置为\bin\keytool.exe 注意要使用一下 cmd命令,请确认jdk环境变量可以使用,可以 ...

  9. Spring AOP编程经验总结

    编程范式概览:面向过程,面向对象,函数式编程,事件驱动编程,面向切面等, AOP是什么? Spring AOP是采用面向切面编程的编程范式,而非编程语言,它只能解决特定问题,而非所有问题,它与OOP不 ...

  10. css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;

    写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外 ...