[CSS] 伪元素after和属性position:absolute以及display:block之间的关系

hlfsunshine 2013-09-02

为什么after伪元素之后content无法应用高度和宽度？

1）想要给after的内容加上大于字体本身的宽度和高度，并给加上背景色

<div class='test'></div>

.test {

width:100px;

height:100px;

background: green;

}

.test:after {

content:"12";

background:grey;

width:50px;

height:50px;

}

显示范围只有“12”这部分，而没有50px * 50px的框。

因为after之后的元素默认display为inline，所以无法响应width和height属性。如果加上display:block就可以正常显示了。(为何after不继承之前的内容的属性。之前的内容应该是block。)

inline box 不响应垂直margin, width, height, max/min width/height 等属性声明；block box 则可以响应这些属性。

2）加上position: absolute也可以正常显示

position: absolute 会使得原来的inline元素变成block元素，从而能够使用width属性

测试: 当添加span样式的时候，display:inline; 使用了absolute样式之后，display:block;

<div>123123 <span>this is inline</span></div>

span {

position:absolute;

}

: hlfsunshine

相关推荐

css 属性值 display

/* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo

hellowzm 0喜欢 / 0评论 2020-07-19

jquery与css控制元素的隐藏和显示的几种方法

CSS visibility 属性规定元素是否可见。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉

drdrsky 0喜欢 / 0评论 2020-06-04

Spring Boot 连接 ZooKeeper 注册中心发生异常的排查经历

使用 Spring Boot 整合 Dubbo + ZooKeeper 的时候，启动 Provider 时发生异常：

XuNeely 0喜欢 / 0评论 2020-04-22

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。B-1:为什么选择方法一加入table标签?针对B

lyg0 0喜欢 / 0评论 2020-03-07

css display属性详解

css 中display属性决定了一个元素的显示方式，它分别有下面几种显示方式。　　inline-block 行内块级元素显示，可以设置高宽、前后没有换行符。　　list-item 列表块级元素显示，前后都有换行符，但和block不同的是，它可以和li一样

tianzyc 0喜欢 / 0评论 2020-02-17

css之display:inline-block布局

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom

沈宫新 0喜欢 / 0评论 2020-01-02

web前端入门到实战：css中display属性

设置ul的样式display:inline-block,同时为了让所有的li标签不换行，设置white-space: nowrap为了能让ul的white-space: nowrap生效，li标签需要设置display:inline-block，要消除代码

impress 0喜欢 / 0评论 2020-01-02

利用Js/Jquery实现div的隐藏与显示(注意释放与不释放空间)

jQuery隐藏和显示div的方式：1、$.attr;//隐藏div. 方法1 和方法2 中的 display:none 可以换成 visibility:hidden，display:block可以换成 visibility:visible .两者的区别

89510194 0喜欢 / 0评论 2019-12-31

web前端入门到实战：布局之display属性

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子；都有自己的视觉格式化。而其中CSS的 display 属性又可以显式的修改每个盒子的视觉格式化模型，比如说从行内级盒子变成块级盒子。那在这一章节中，我们就来一起探讨CSS的 disp

wwwxuewen 0喜欢 / 0评论 2019-12-19

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。内联元素只需要必要的宽度，

lcyangcss 0喜欢 / 0评论 2019-11-10

Python之游戏开发-飞机大战

bullett.y - hero.y - 40) ** 2) ** 0.5 < 40 and bullett.baozhaflag == 0:

zhangpan 0喜欢 / 0评论 2019-11-09

实现Linux待机的命令

if [ "$STATUS" == " DPMS is Disabled" ]. # find out if the monitor is on

liushi 0喜欢 / 0评论 2007-11-13

Linux系统下设置DISPLAY笔记

所以要切换用户也可以用 X11的话，就要export DISPLAY=localhost:12.0或者将此export DISPLAY=localhost:12.0写入profile文件。[sky@smsgw ~]$ su - OraclePassword

超哥Blog 0喜欢 / 0评论 2007-09-30

Linux中DISPLAY的设置

所以要切换用户也可以用 X11的话，就要export DISPLAY=localhost:12.0或者将此export DISPLAY=localhost:12.0写入profile文件。[sky@smsgw ~]$ su - OraclePassword

libowenhit 0喜欢 / 0评论 2007-09-27

css页面布局技巧

display:inline-block; /*变成行内块元素，让元素宽度自适应，不继承父元素宽度；*/

wangnantjobj 0喜欢 / 0评论 2019-11-03

Python3 code to display hostname and IP address

OS: Windows 7. #!/usr/bin/env python3. # Python3 code to display hostname and. # IP address. # Importing socket library. import

宿舍 0喜欢 / 0评论 2019-10-21

一个简单的CSS弹出窗

今天为大家介绍一款简单的弹出窗。大家在浏览网页的时候就会遇到某些提示信息或者是警告信息，这些信息也往往是以弹出窗的形式出现的。这些弹出窗口也往往是以浏览器默认的样式出现的，各个浏览器或者是手机网站渲染的效果也往往不同。下面做一个统一的弹窗框，可以根据根据自

zyhui 0喜欢 / 0评论 2014-11-13

CSS布局 ——从display，position， float属性谈起

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和

怀抱清风 0喜欢 / 0评论 2017-03-06

C语言的10大基础算法

算法是一个程序和软件的灵魂，作为一名优秀的程序员，只有对一些基础的算法有着全面的掌握，才会在设计程序和编写代码的过程中显得得心应手。本文是近百个C语言算法系列的第二篇，包括了经典的Fibonacci数列、简易计算器、回文检查、质数检查等算法。也许他们能在你

qscool 0喜欢 / 0评论 2019-09-04

解决CSS中 display 与 visibility 的区别

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示。

ZiXuanFY 0喜欢 / 0评论 2007-03-04

CentOS 7 修改default.target 不能启动的处理办法

修改启动项，在 initrd16 末尾添加 init=/bin/sh, Ctrl+x 启动。最后 exec /sbin/init 启动到命令行模式。

87324554 0喜欢 / 0评论 2016-09-24

使用xmamager来连接centos

-A RH-Firewall-1-INPUT -m state --state NEW -m udp -p udp --dport 177 -j ACCEPT. Execution Command可以填写/usr/bin/gnome-session --d

liuyanwuyu 0喜欢 / 0评论 2011-11-10

数字媒体资源管理系统Razuna安装使用

Razuna依赖的库安装如下

老王的技术 0喜欢 / 0评论 2015-05-16

判断程序实例是否已经运行的N种方法（判断窗口已经运行）

对于某些情况，我们可以通过判断窗口是否正在运行来保证只有一个程序实例运行。

永不妥协 0喜欢 / 0评论 2010-10-19

HIVE QL

https://cwiki.apache.org/confluence/display/Hive/HiveQL#HiveQL-Set%2Fgetsystemproperties

taisenki 0喜欢 / 0评论 2013-04-26

解决淘宝客户端获取sessionKey的问题。

appkey={appkey} 授权后会在页面上得到一个字符串。当然通过神马httpclient啊之类的抓取页面源码都是抓取不到的。只有通过swt的不知道神马版本里面有一个browser.getText();才能得到源代码。之后把得到的字符串解码就OK了。

mwx 0喜欢 / 0评论 2012-09-01

All you need of Email/PDF

SDNWikiisagreateplace http://wiki.sdn.sap.com/wiki/display/ABAP/Sending%20Mails%20-%20Home%20Page http://wiki.sdn.sap.co

托尼写代码 0喜欢 / 0评论 2010-09-15

display tree

<!<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">. vartemp,temp2,cookieArray,cook

高超ELEMENTS 0喜欢 / 0评论 2009-11-26

css实现水平垂直居中

纯CSS实现水平垂直居中最近的几场面试都问了这个问题，自己也只答了2种，感觉面试官不满意，特地总结了几种在开发中比较实用的方法，与大家分享。</div>因为margin/padding的百分比值是参照父元素的width，所以无法用百分比。

Alisa0 0喜欢 / 0评论 2019-07-01

Jenkins Wiki

https://wiki.jenkins-ci.org/display/JENKINS/Use+Jenkins

leonranri 0喜欢 / 0评论 2016-06-12

solr(6)Version 5.2.0 and Information

References:. solrtoprod

年轻就要对味 0喜欢 / 0评论 2015-07-13

springMVC的一个demo

首先到引入jar包，懒得分类，直接把下载的spring所有都copy进去了，自己查查各个jar包都是干嘛的。

lhhhoo 0喜欢 / 0评论 2015-04-24

CSS中的多种居中方式

居中的多种方式flex布局居中是我目前使用最多的一种方式，flex布局也是现在最方便的一种布局，广泛用于pc端和移动端。}grid布局居中grid布局是一种比flex更加强大的布局，但是目前兼用性并不好，我使用的并不多，但也能实现居中。}display:

afeichuanqi 0喜欢 / 0评论 2019-06-29

控件和背景图片一样大小

static Display display = Display.getDefault();static Image backgroundImage = new Image(display, UsingImage.class. static Image i

dazhi00 0喜欢 / 0评论 2013-12-13

Dubbo简介

Dubbo地址。开源地址

夫子与歌 0喜欢 / 0评论 2013-05-11

6种不同的CSS实现垂直水平居中

<!DOCTYPE html>. width: 200px;height: 200px;background: #cccccc;margin-top: 10px;display: table-cell;vertical-align: middl

冰蝶 0喜欢 / 0评论 2018-08-17

Css3中display:flex与display:box区别

答案：没区别,是不同阶段w3c草案命名的不同，W3C 2009年第1次草案：display:box;W3C 2011年第2次草案：display:flexbox | inline-flexbox;-W3C 2012年第5次草案及以后的候选推荐标准：disp

怀抱清风 0喜欢 / 0评论 2018-08-06

前端入门-day2（常见css问题及解答）

写在前面今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了，是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~display: none;不会再占据空间，就跟不存

懵懂听风雨 0喜欢 / 0评论 2019-06-28

一个高度不固定的div，里面的文字如何垂直居中？

我也找了老半天，后来发现一个很强势的写法简单暴力// 加在父级div中垂直居中：align-items:center; display: -webkit-flex;水平居中：justify-content:center; display: -webkit

FZfeng 0喜欢 / 0评论 2018-04-04

css之display

<p>当一个元素中的display属性是none时，浏览器不会渲染这个元素里的任何内容，不会占据浏览器窗口空间，但它存在与文档流当中。<div class="content">display属性为inline的元

coulder 0喜欢 / 0评论 2019-06-28

html布局之table表格布局

使用与表格相关的display属性值只是声明了某些元素在浏览器中的样式而不包含语义。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿table对象，使其符合table/inline-table

caiselangren 0喜欢 / 0评论 2017-09-25

css控制图片不改变原比例居中显示，图片超出div部分隐藏

<!DOCTYPEhtml>. display:flex;flex-direction:row;width:200px;height:200px;overflow:hidden;display:flex;justify-content:cent

hhhkhhh 0喜欢 / 0评论 2017-07-20

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

前言还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不

k韶华 0喜欢 / 0评论 2019-06-28

CSS布局 ——从display，position， float属性谈起

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和

cfang00 0喜欢 / 0评论 2017-03-06

css实现居中、自适应

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法。.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元素。.child{display:t

realitycss 0喜欢 / 0评论 2019-06-28

Jquery点击弹出遮罩层

<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv" />

刁连通 0喜欢 / 0评论 2016-05-06

gulp常用的plugin描述（陆续更新）

用来将对应管道中的文件生成.map文件，而.map文件的作用就是让浏览器在对应加载的代码上找到映射的源，比如通过加载的css找到对应的sass. 用来启动一个web服务，是的可以通过HTTP的方式来调试web页面，也可以在里面进行配置访问代理，总的来讲就是

json 0喜欢 / 0评论 2016-04-13

css在JQuery、JS、HTML中的写法

//不止一个属性 $.css;在js中写法：

hjfbluesky 0喜欢 / 0评论 2016-03-29

CSS属性中Display与Visibility的区别

两者都可以用来控制元素的显示和隐藏，visibility属性用来确定元素是显示还是隐藏来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据所在文档流中

vavid 0喜欢 / 0评论 2016-03-20