关于bootstrap".container"容器默认的before与after样式效果作用

最新推荐文章于 2024-07-11 21:11:19 发布
最新推荐文章于 2024-07-11 21:11:19 发布
阅读量5.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzzattack03x/article/details/53442238
版权

使用bootstrap后,class为container的容器,会被默认加入以下样式

.container:before,.container:after{

display:table;

content:"";

clear: both;

}

这一段代码是防止上下边距崩塌,如何理解"上下边距崩塌"这个概念?比较直观的效果如下图所示



msn-06-s
关注
云原生之容器编排实践-OpenEuler23.09在线安装Kubernetes与KubeSphere
Heartsuit的博客
06-30 1734
前几篇文章中介绍了如何将ruoyi-cloud项目部署到Kubernetes集群中，包括网关服务、认证服务和系统服务并且对全部服务采用YAML文件的方式来进行部署，这虽然有助于理解K8S组织管理资源的风格与底层机制，但是对于团队中不太熟悉命令行操作的成员不太友好，现在我们借助由青云开源的容器平台KubeSphere来进行可视化的服务部署。KubeSphere是在Kubernetes之上构建的面向云原生应用的分布式操作系统，完全开源，支持多云与多集群管理，提供全栈的IT自动化运维能力；KubeKey一键安装。
在CSS中创建蒙砂玻璃效果的两种方法
Web design 教程小屋
07-09 977
在本教程中，我将向您展示如何在CSS中创建磨砂玻璃效果。 您将在MacOS和iOS等UI中，甚至在当今的Windows中，都已经看到了这种效果，因此这绝对是一种趋势。 我们可以使用CSS在网站上模拟毛玻璃，在本教程中，我将向您展示两种实现方法。 CSS中的毛玻璃效果 方法一 第一种方法具有相当广泛的浏览器支持，但是比第二种方法需要更多CSS。 首先创建一个带有.container类的...
浮动会造成什么样的后果?怎么清除浮动?
AS_Tammy的博客
03-07 917
首先看一段代码: HTML: <div class="container"> <div id="div1"></div> <!--<div id="div2"></div>--> </div> CSS: .container,
利用CSS3中：after和：before属性制作bootStrap中的toolTip
Mr_Yan的博客
03-16 3247
                第一次写博客，不免还有点小激动，希望博文中有差错的地方欢迎大家勘正，指导~                前几天看了看bootStrap中的toolTip觉得蛮好看的，就想着自己试着写一写。                先贴上两个伪元素的兼容性   分为三个部分解决这个问题：①html布局问题②toolTip提示框的拼接③toolTip的定位问题         ...
Bootstrap
黄黄黄一边敲代码一边写出来的博客
04-19 295
PART3_2 响应式布局 ​ 利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。 ​ 媒体类型 取值 含义 all 用于所有设备。 print 用于打印机和打印预览。 screen 用于电脑屏幕，平板电脑，智能手机等。 speech 应用于屏幕阅读器等发声设备。 常见选项： ​ 媒体类型 ​ and，not ​ min-width、max-width ​ orientation:portrait、orientation:
Bootstrap之树形菜单css after打造
pt_sm的博客
09-12 854
利用Bootstrap的折叠插件，就可以实现树形菜单，不用写js,引入Bootstrap到工程中。 1、HTML部分： 基本笔画
关于伪类伪元素以及：after与：before
SuperCoooooder的博客
03-12 1315
在使用bootstrap并结合网页进行调试的时候，经常看见：before与:after这两个东西，而刚开始并没有在意，只是经常使用:hover :focus :visited :link :active这些比较常见的伪类，这些都顾名思义，表示了一个元素的某个状态，直到发现有些艺术的效果竟然是用:after :before来做出来的，随后才真正重视起来。        伪类主要有以下几种：
清除浮动
Wen_Tao98的博客
01-18 210
css中清除浮动的几种方式 一、为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的为题 1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了 小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要
纯CSS3 Bootstrap步骤箭头按钮样式
11-04
总结来说，纯CSS3与Bootstrap结合，可以轻松创建具有箭头样式的步骤按钮。这不仅提升了用户体验，也展示了前端开发中的创新与灵活性。通过深入理解CSS3的新特性，以及熟练运用Bootstrap框架，开发者可以构建出更加...
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
09-01
然而，Bootstrap的一些默认样式有时可能会与其他组件产生冲突，比如在本文提到的问题：Bootstrap的box-sizing样式导致UEditor图片无法正常缩放。 在CSS中，`box-sizing`属性是用来控制元素的盒模型如何解析其内容、...
Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式
Stan的专栏
11-27 2961
如何用webpack去加载bootstrap的css/scss 及JS呢，先准备一个bootstrap 模板b-index.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
08-31
在本文中，我们将深入探讨BootStrap框架中的图片样式、辅助类样式以及CSS组件的实现。BootStrap是一个流行的前端开发框架，它提供了一系列预先设计的样式和组件，以简化网页设计过程，使得开发者能够快速构建响应式...
bootstrap(一)
一个半路出家的人
10-28 886
bootstrap是一个前端框架,包括:基本结构,bootstrap CSS,Bootstrap 布局组件,bootstarp插件几个部分. 基本结构包括:栅格系统,连接样式,背景的基本结构, CSS: bootstrap子代以下特性:全局的css设置,定义基本的HTML元素样式,可扩展的class,以及一个先进的网格系统 组件: 有十几个组件,包含创建图像,下拉菜单,导航,警告框,弹出框 ...
进阶的元素选择器#CSS
SamaelzzZ的博客
03-31 148
Hellow大家好！不知道之前几个选择器大家练习的怎么样了呢，平时也要勤加练习啊，今天啊我们来学习几个进阶的选择器 这个是个伪类选择器，我们先来看代码 .container{ width: 300px; background-color: #008c8c; color: white; } <div class="container"> 醉后不知天在水，满船清梦压星河。 </div> 还是几个很熟悉的代码哈，来看看效果 这个选择器呢可以给内容前后文添加样式 .
CSS 中的 ::before 和 ::after 伪元素
最新发布
m0_65029152的博客
07-11 1万+
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
css2的特性—:after 和：before
yuxuan89814的专栏
08-16 545
css的伪元素
css学习中遇到的一些问题
qq_51463807的博客
09-03 404
css重点分为三个部分：选择器 盒子模型 浮动和定位 1.浮动和定位 我觉得浮动主要是实现环绕而定位实现了堆叠。 一个浮动的元素位置的判断由上一个元素决定，如果上一个元素是标准流中的元素，那么浮动元素相对的垂直位置不会改变（顶部与上一个元素底部对齐），如果上一个元素是浮动的，则跟随在上一个元素后面，一行放不下则会被挤到下一行。 1）关于文本浮动时文字环绕却未被掩盖 W3C早期规定浮动即是为了文字环绕，float:left理解为“将元素放置在容器左侧，并将右侧所有内容都环绕显示”，浮动虽然脱离了文档流，
CSS中的before和after伪元素及其应用
boluobn的专栏
09-11 968
before和after伪元素 所谓伪元素，可以理解为浏览器为某元素附加的元素（根据名字，附加在这个元素之前/之后）。用来完成特定的效果，before/after需要和content属性一起使用： 1 2 3 4 5 6 .css-class:before { content: " "; } .css-class:after { content: "
:after和:before的作用及使用方法
weixin_30896763的博客
01-07 4563
1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例： HTML代码： <p>你好</p> CSS代码： p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值