父级div比子级大一个小的白色边框，我不知道为什么 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【专业技术】CSS知识点总结

3) 3、CSS层叠样式默认规则后者覆盖前者，特殊情况除外—!important优先级最高，高于上面一切。...用一句话概括就是：块级元素不论内容有多少只要有两个元素就会换行，如果有两个行内元素则会以并排的形式展示不会换行。...盒子模型（它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器）例子：padding，border和margin，即内边距、边框、外边距...他们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一个小小的iphone，收到的确实那么大一个盒子。...因为iphone白色的包装盒和iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。例子： ? ?

76810 0

matlab中clc和clear作用_clc,clear

大家好，又见面了，我是你们的朋友全栈君。 cacl()用法解析可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。...2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。...3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。...解决浮动、清除浮动的方法这里DIVCSS5为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性...同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px

1.1K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动

类选择器根据class属性来匹配，同理 id选择器根据id属性来匹配，但优先级比类选择器高。...注：CSS优先级从大到小为：行内CSS>内嵌式CSS>外联CSS and CSS优先级从大到小为：ID选择器>伪类选择器>类选择器>标签选择器>通用选择器（两种分类不同）其中在属性值的后面加上“！...，比如父元素只有一个子元素，等等。.../定位浮动 ---- 盒模型指的是比较像盒子的一个模型，就像浏览器调试窗口的这样蓝色部分为内容部分，padding为内容和边框的间距，border为边框，margin为边框外侧离父容器的距离。...其中浅绿色部分为浏览器调试窗口的选中效果（即padding属性的20px）。黑色的粗实线（solid）为border属性的10px效果，最外面的白色部分为该组件离父组件（）20个px。

1352 0

前端-如何只用 CSS 完成漂亮的加载

为什么要做加载只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载我是如何做的不同的页面...动画直通车开始入门在开始一起构建它前, 我们先看看它最后的效果正如你所看到的, 我们将经历 4 个步骤 1、边框一个接一个地出现 2、红/橙/白色方块向里滑入 3、方块向外划出 4、边框消失我们只需要...-- Tags for CSS and JS files --> 构建 logo 本身一开始我们先实现 logo 本身, 而不是最终版本的效果父级元素 logo..., 不同颜色的方块都是它的子元素 <div..., 采用其他的办法来实现我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素废话少说, 就让我们开始吧, 我们先做出它最初始的样子.

8982 0

只需5分钟！一文读懂CSS布局（二） -- flex布局

（IE：“你直接报我身份证算了”）在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，应当在分析页面结构时就考虑清楚，不应该先设置完子元素布局后再使用...注意：不同于grid布局，flex布局是一维布局方式，按行或者按列也就是父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。 ?...space-between：两端对齐，项目之间的间隔都相等 ? space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 ?...space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 ? stretch（默认值）：轴线占满整个交叉轴 ? 项目属性项目属性就是写在项目身上的！...3. flex-shrink flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，和flex-grow算是相对的属性，一个放大一个缩小 ?

6781 0

CSS再学

可以使用类选择器列表方法为一个元素同时设置多个样式子选择器(>) 用于选择指定标签元素下的第一代子元素。...p{color:red;} 三年级时，我还是一个胆小如鼠的小女孩。...important;} p{color:green;} 三年级时，我还是一个胆小如鼠的小女孩。...十六进制颜色 p{color:#00ffff;} 长度值（px） css样式设置小技巧水平居中 html代码：我想要在父容器中水平居中显示...css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

1.9K7 0

CSS

先看这个问题昂：在给c2的div标签加上浮动之前是下面这样的效果：　　　　我并没有给c1那个div标签设置高度，但是你发现c1这个div标签是有高度的，这是因为里面两个c2div我设置了高度了，这两个...div将c1这个div标签撑起来了　　　　当我们加上浮动之后，你再看这个c1的div标签的高度：发现c1这个div的高度没有了，显示的高度是1.99，是因为我给它设置了边框，上下边框加起来正好2px，...我们不想让粉色的这个标签顶上去怎么办，看一下c1这个标签的子标签的高度(内边距+外边距+边框宽度+标签高度)，然后给c1这个父标签的高度设置成这个值，当然是可以的，但是如果两个子标签的高度不相等呢，你按照哪一个来算高度啊...>img { max-width: 100%; #相当于将图片的大小设置为父级标签的大小来显示了，因为用户上传的头像的像素我们是不知道的，就让它按照父级标签的大小来，就能放下整个头像了，就不会出现头像显示不全的问题了...　　　　#直接写width:100%就行，上面写max-width的意思是如果图片大于咱们设置的标签高宽的时候，就按照父级标签的大小来，比父级标签的高宽小的时候，就不需要按照父级标签的大小来了，了解一下就行了

1.8K1 0

CSS基础（二）

伪元素概念：使用CSS模拟标签，创建网页中不重要的图用法：找父级，在父级中添加子标签伪元素作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...先找已经定位的父级（一般是相对定位），以这个父级为参照物子绝父相就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。...相邻表格边框进行合并，得到细线边框效果。...通过PxCook量取小图片大小，将小图片的宽高设置给盒子 3. 将精灵图设置为盒子的背景图片 4.

1.8K2 0

CSS3

，父盒子有内容子盒子居中效果消失 */ } 浮动 为什么使用浮动？...(行内块) 下一个浮动会挨着上一个浮动浮动标签的margin: 0 auto;居中失效，但可外面嵌套div实现 ---- 清除浮动作用：清除浮动带来的影响场景：父盒子不方便设置高度，子孩子有多少内容展示多少...例如：a，input，span…… 2.浮动可以让原本垂直布局的块级元素变成水平布局,子元素嵌入进父元素上方，父元素内容环绕浮动子元素，上方有介绍，类似于图层的概念或微软word中图片环绕文字四周概念...(后来者居上；div1添加z-index: 1;会让第一个块盖住第二个块) ---- 绝对定位 position:absolute; 需要找父级(子绝对定位，父相对定位。...—>子绝父相)： 1.若父级(/爷级…..)有定位属性，根据父级为参照进行定位 2.若父级无定位属性，根据浏览器窗口进行定位且具备了行内块特点，可设置宽高。在页面中不占位置—>已经脱标。

7559 0

前端学习笔记之CSS属性设置 CSS属性设置

起作用：你需要给这个元素的所有父元素的高度设定一个有效值。...1、块级元素block 独占一行可以设置宽高若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body...div一般用于排版，而span一般用于局部文字的样式 1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行 2、站在CSS的角度：div是一个容器级标签...如果不想改变实际大小，那就在用宽高减掉padding对应方向的值2 padding是添加给父级的，改变的是父级包含的内容的位置3 内边距也会有背景颜色 <!...我 7、清除默认边距 #1、为什么要清空默认边距（外边距和内边距）浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等编写代码之前的第一件事情就是清空默认的边距

5.8K3 0

为什么我的样式不起作用？

还有一个Child的子组件，红底黑字。那么实际渲染出的样式是什么样子的呢。如下图: ? 实际看到的效果确实蓝底白字与红底白字，为什么与写的代码有出入呢。...究其原因 为什么子组件的字体颜色不是黑色确是白色? ?...打开调试工具，看到子组件被渲染成一个Child 但是样式却被父组件的样式给覆盖变成了白色，原因：这是因为在w3c 规范中，CSS 始终是「全局的...为什么同样.parent .component 和.child .component是父级覆盖子级? ?...最后文章首发于：为什么我的样式不起作用？参考：浏览器渲染原理与过程参考：CSS选择器从右向左的匹配规则 DEMO地址

4.2K2 0

CSS布局(二) 盒子模型属性

所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...background-color: lightblue; display:inline-block; width: 100%; } 兄弟一兄弟二 2、父级元素和第一个或最后一个子元素...: 1em; background-color: lightblue; } 子级...【为什么margin:auto无法实现垂直居中】水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间垂直方向不可以居中是因为块级元素的高度默认是内容高度...，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0 margin: 0 auto; 【为什么图片使用margin:auto不能水平居中】图片无法水平居中，类似于块级元素无法垂直居中

1.9K7 0

掌握这些CSS知识点，Coding如飞！

浏览器渲染HTML文档流，背景色默认为白色，如果文档中的html、body标签设置了背景色，这两个标签的背景色实际设置的是浏览器视口的背景色。.../DYBOY/pen/JjbZgeE 2.2 border-radius百分比和像素 border-radius属性用于描述边框圆角半径，根据资料如果是百分比单位，则根据所在**盒子模型的矩形宽和高（包含...水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。.../post/6960866014384881671 2.3.1 实例&解决方案 2.3.1.1 父子高度塌父级margin，子级的margin-top无效高度塌陷代码&演示：https://codepen.io.../DYBOY/pen/poNxjOP 解决方案：原因是父子组件的margin-top取最大值，上面例子中父子组件的包含块都是body，属于同一个BFC（html标签）内的子元素，因此需要将父/子元素变成

9862 0

【CSS】最强大的布局之grid布局精讲

> 元素就是容器，内层的三个元素就是项目。...除了设置绝对值之外，也能设置百分比数（根据父级大小的百分比）等。...3, 33.33%); /* auto-fill 表示自动填充可以最大限度的填满父级容器用多个100px的大小填满宽度*/ grid-template-columns: repeat...grid-template-areas: 'a . c' 'd . f' 'g . i'; } 如果父级设置了高度...所以，项目之间的间隔比项目与容器边框的间隔大一倍。 space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

2.8K2 1

前端硬核面试专题之 CSS 55 问

清除浮动的方式父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...结尾处加空 div 标签 clear: both，原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。...父级 div 也一起浮动。...父级 div 定义 display: table 。父级 div 定义伪类 :after 和 zoom 。...例如 50010 的图片比 10500 的图片更加小。

2K2 0

CSS基础知识

下面代码是正确的：三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。... 上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。 5-4 子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。... 到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。...3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...--相对定位元素--> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2.7K3 0

一篇文章搞定多列布局--等宽，等高，自适应

但如果我给上面第一个child再套一个容器，使用overflow:hidden;他就成了一个BFC，根据BFC的特性，BFC的子元素不会影响外面的元素，margin就不会合并，两个child的间距就是30px...flex 又遇到flex了，用flex做这种布局太简单了，直接父级设置display: flex, 左子级定宽，右子级设置flex:1就行了，如果要间距，可以直接用margin。...假如父级元素总宽度为500px,现在有A, B, C, D, E五个子元素，他们的flex-shrink分别为1, 1, 1, 2, 2,他们的flex-basis都是120px。...计算可知，五个子元素总宽度为120 * 5 = 600px，超出了父级100px，所以需要对子元素进行收缩。...在前面定宽+自适应的基础上给左右子元素都写一个极大的padding-bottom，这样两个子元素的高度都很大了，然后我们用一个同样的大的负的margin-bottom和父级的overflow:hidden

2.7K1 0

CSS 中重要的层叠概念

，当处理层叠时只考虑子元素，这里类似于BFC 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠 2....，都属于根层叠上下文中的元素，且都是层叠顺序第6级，所以按HTML中的出现顺序层叠：红->绿->蓝 5.3 给子元素增加 z-index 红绿位于一个div.first-box下，蓝黄位于div.second-box...的z-index设置的比second-box的大，那么此时无论蓝的 z-index 设置的多大z-index: 999，蓝都位于红绿的下面；如果我们只更改红绿的z-index值，由于这两个元素都在父元素...，且设置了一个很大的正 z-index，属于层叠元素中第7级；虽然蓝的 z-index 很大，但是因为second-box的层叠等级比first-box小，因此位于红绿之下；所以这个例子中从低到到显示的顺序...：蓝->红->绿 (我遇到的的情况就属于这个例子类似情形) 5.5 给子元素设置 opacity 红绿位于div.first-box下，蓝位于div.second-box下，红绿蓝都设置了position

7352 0

CSS 中重要的层叠概念

，当处理层叠时只考虑子元素，这里类似于BFC 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠 2....，都属于根层叠上下文中的元素，且都是层叠顺序第6级，所以按HTML中的出现顺序层叠：红->绿->蓝 5.3 给子元素增加 z-index 红绿位于一个 div.first-box下，蓝黄位于 div.second-box...：黄->红->蓝->绿 5.4 在不同层叠上下文的父元素内的情况红绿位于一个 div.first-box下，蓝位于 div.second-box下，红绿蓝都设置了 position:absolute，...级；蓝属于层叠上下文 second-box，且设置了一个很大的正 z-index，属于层叠元素中第7级；虽然蓝的 z-index 很大，但是因为 second-box的层叠等级比 first-box...小，因此位于红绿之下；所以这个例子中从低到到显示的顺序：蓝->红->绿 (我遇到的的情况就属于这个例子类似情形) 5.5 给子元素设置 opacity 红绿位于 div.first-box下，蓝位于

6493 0

CSS中的层叠上下文与顺序

缺失的关键信息包括：位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。...下面我要向大家发问了，大家有没有想过，为什么内联元素的层叠顺序要比浮动元素和块状元素都高？ 为什么呢？我明明感觉浮动元素和块状元素要更屌一点啊。 ?...差别就在于，z-index:0所在的元素是层叠上下文元素，而z-index:auto所在的元素是一个普通的元素，于是，里面的两个妹子的层叠比较就不受父级的影响，两者直接套用层叠黄金准则...要满足两个条件才能形成层叠上下文：条件1是父级需要是display:flex或者display:inline-flex水平，条件2是子元素的z-index不是auto，必须是数值。...此时，这个子元素为层叠上下文元素，没错，注意了，是子元素，不是flex父级元素。眼见为实，给大家上例子吧。

9231 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭