before伪类元素边框样式与行内元素相同

最新推荐文章于 2021-12-03 18:10:20 发布
最新推荐文章于 2021-12-03 18:10:20 发布
阅读量171 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42802725/article/details/113744775
版权
本文探讨了当HTML元素的边框宽度相等且内容尺寸为0时，如何形成矩形边框的现象。关键在于理解border属性如何围绕元素的光标，即使内容为空，边框依然会显示为预设形状。通过对CSS边框和内容的理解，可以更好地掌握页面布局的控制。
摘要由CSDN通过智能技术生成

现象：当上下左右边框宽度相同，内容宽高为0时，四条边框组成了矩形。
代码及结果如图
在这里插入图片描述
在这里插入图片描述
形成原因：border是围绕着光标的（光标是一条竖线）

陈婷婷婷婷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中的before与after
m0_48844699的博客
09-25 6300
before与after是css中的两个伪元素。其实before与after的编码是非常的简单的，就像我们在css中对他进行操作，比如设置他的背景颜色、设置它的大小、设置他的定位等等。只不过伪元素多加了一个content属性，如果我们对他不进行设置，那么我们设置的伪元素就会不起作用，我们可以设置content的内容为一个空字符串。当我们添加的content为字符串的时候，字符串作为伪元素的内容添加到主元素中，这个字符串是直接原样输出内容，里面即使有html的转义符，也不会被转译。来进行转换为块级元素。
cssbefore图片大小_css ：after和：before
weixin_39990410的博客
12-21 932
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。举例：1.结合border写个对话框的样式。.test-div{position: relative; /*日常相对定位*/width:150px;height: 36px;border:black 1px solid;border-radius:5px;...
::before(:before)和::after(:after)使用
duidandan的博客
12-03 1002
CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用::before时必须要用content:" " /* CSS3 语法 */ element::before { 样式 } /* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */ element:before { 样式 } li::before { content: ""; width: 21px; height: 1
CSS3高级选择器关于 :before 的问题
XXX51129的博客
09-22 1743
:before p:before在每个<p>元素的内容之前插入内容 主体示例： <body> <span> <p>星星</p> <p>月亮</p> <p>一起</p> <p>闪耀</p> </span> </body> 样式示例： bef...
关于行内元素，内联元素before和after的大小设置问题
qq_34665877的博客
03-30 7047
:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的 就像你对a元素设置width/height一样 设置position: absolute;后这个元素的display属性计算为block值； 但是设置的width/height针对的是:before/:after生成的匿名替换元素，而不是其中的content 所以图片的大小是没有效果的
css不规则图形实现原理及代码
12-13
此外，CSS3引入的伪元素 `::before` 和 `::after` 也是构建不规则图形的重要工具。它们可以添加额外的内容到元素的前面或后面，而无需在HTML中增加额外的元素。通过结合边框和伪元素，我们可以构造更复杂的图形，...
csspage2
03-02
- 伪类和伪元素：`:hover`, `:active`, `:focus`等伪类用于在特定交互状态改变元素样式；`::before`和`::after`伪元素则可在元素前后插入内容。 - 层叠上下文：CSS3引入了层叠上下文，用于确定具有相同选择器的...
css3学习笔记(新增功能，粗略版本)
01-30
### CSS3 学习笔记（新增...- 使用伪元素如 `::before` 或 `::after` 结合 `clear` 属性可以有效地清除浮动。例如，在父元素的末尾添加一个空的伪元素，并设置 `clear: both`，可以确保父元素正确包裹所有浮动子元素。
css入门笔记
05-15
选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态 ...
aakiyanova.github.io
03-19
2. **选择器类型**：包括元素选择器（如`p`）、类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attr]`）、伪类（`:hover`）和伪元素（`::before`）等。 3. **盒模型**：CSS中的每个元素都可视为一个矩形...
CSS3
无区新手的博客
04-06 484
Pink老师整理 CSS3 CSS3 选择器 属性选择器
CSS3的新特性 行内盒子before和after
dfl2099的博客
03-08 802
CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style t...
CSS之伪类
weixin_46820017的博客
05-05 1702
伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。 静态伪类和动态伪类 伪类选择器分为两种。 （1）静态伪类：只能用于超链接的样式。如下： :link 超链接点击之前 :visited 链接被访问过之后 PS：以上两种样式，只能用于超链接。 （2）动态伪类：针对所有标签都适用的样式。如下：
html伪类选择器行内样式,css nth-child()伪类选择器实现奇偶行样式（精讲）
weixin_35592186的博客
06-04 1889
在css伪类选择器中 :nth-child() 伪类可以指定单双(奇偶)数的交叉样式。不仅是奇偶数，还可以指定倍数，比如3n，5n 这种。nth-child语法:nth-child(an+b)描述：伪类:nth-child()的参数是an+b，或者说是n，指的是第几个元素。例子：:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素；p:nth-c...
css ::before和:befor的用法和区别以及伪元素和伪类的区别
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-29 3365
前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。 下面我们来说一下::befor和:befor的用法及区别？ 在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要...
使用CSS制作斜边矩形原理分析
热门推荐
jerrylearner的博客
03-26 1万+
一。先上一张图 二。上代码 .pick{ position: absolute; z-index: 999; left: 0; top: 0; background: #fd3a51; line-height: 20px; padding: 0 6px 0 8px; color: #fff; font-size: 20px; text-align:...
伪元素加行内样式问题
weixin_30646505的博客
04-29 4498
今天遇到一个问题，要给伪元素加样式（:before）,由于种种原因，只能给通过内联样式的方法去加，但伪元素没法通过内联加。。。。尴尬。。。。 解决方法： 可以给伪元素的父级动态添加加class，在样式中给这个class的：before写对应的样式，啦啦啦啦，解决啦～ 转载于:https://www.cnblogs.com/kaiqinzhang/p/10791923.html...
伪类实现下边框
caimaomaocai的博客
09-25 4845
.JTBabs.active:before { content: ''; position: absolute; left: 20px; bottom: 0px; right: 20px; border-top: 3px solid red; }   把要加的下边框的那个元素设置为相对定位 position:relative;...
before,after伪类元素一点感触，以及利用border边框制作小图形
h1234561234561的博客
12-27 3823
顾名思义，before，after是往某个标签前部，后部插“值”的。且这“值”可以是文字，图片，链接，border图形，图标，清除浮动after（较为常用）等…。且before和after必须要有个属性值content，否则他们就罢工了。此外要注意这两个家伙默认是内联元素（也称行内元素）简单描述 用法： 文字` &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;
js 动态修改伪类元素的样式
最新发布
09-01
另外，在支持伪类元素样式修改的浏览器中使用此方法是可行的，但并不是所有浏览器都支持这种方式。 综上所述，使用JavaScript动态修改伪类元素的样式，可以通过获取到要修改的元素，并通过修改其style属性来改变伪...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值