你不知道的几个css面试细节问题？

最新推荐文章于 2022-07-21 22:09:04 发布
最新推荐文章于 2022-07-21 22:09:04 发布
阅读量181 收藏
点赞数
分类专栏： 前端天天面试题积累 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43342105/article/details/107176755
版权

文章目录

什么是margin纵向重叠

在这里插入图片描述

在这里插入图片描述

margin的几个属性设置负值会怎样

margin-top和margin-left设置负值，元素向上向左移动
如下图：

测试原图
在这里插入图片描述
如果针对item1设置
在这里插入图片描述

原图中的item1发生改变向上移动20px
在这里插入图片描述
如果针对item3元素设置在这里插入图片描述
item3就会被向左移动20px如下图
在这里插入图片描述

margin-right设置负值，右侧元素左移，自身不受影响
如果用以上原图针对item3设置在这里插入图片描述
item4就会向左移动20px和item3重叠如下

在这里插入图片描述
margin-bottom负值，下方元素上移，自身不受影响

如果以上面的原图设置item1
在这里插入图片描述
item2就会向上移动20px和item1重叠
在这里插入图片描述

怎样理解BFC

在这里插入图片描述
形成BFC的常见条件

  1. float不用none
  2. float不用none
  3. overflow不用visible
  4. display用flex 和inline-block

BFC具体细节可以看这篇文章（转载）

看完觉得有用的兄弟评论配合说一句
在这里插入图片描述

_阿锋丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不错的10个你未必知道的CSS技巧
10-30
不错的10个你未必知道的CSS技巧
margin取负值详解
weixin_42718310的博客
09-08 3047
Margin取负值 Margin-left: （1） 子集总宽度宽度不超过父级宽度时（不换行） margin-left取负值表示包含块向左移动，使包含块的左边距减去前面元素的右边距为指定负值。 实际应用情况： .wrapper { background-color: black; margin: 0 auto; width: 600px; height: 300px; } .left, ...
浅谈margin负值问题
Sun_blog
06-09 4420
说到margin负值问题，很多都小伙伴都一脸懵逼。哈哈，没错说到margin大家用到的最多的还是它的正值。例如：margin-top: 20px 等等。但是margin负值的情况也十分重要，比如经典三栏布局中的圣杯布局和双飞翼布局中就应用了margin负值。那么接下来我就带大家看看什么是margin负值。 margin负值 margin负值顾名思义，就是margin属性的值为负值的情况，例如：margin-left: -20px。看到这个例子各位小伙伴们就对margin负值的情况有了初步的了解。接下来我们就
margin为负值怎么解释？
SCUhzs
10-01 2988
文章目录前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值 前言 margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵，故整理一下margin为负值的情况。 margin四值顺序 【1个值】margin: top|right|bottom|left; 【2个值】margin: top|bottom left
margin为负值产生的影响和常见布局应用
沉着前进
08-19 1万+
所以今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理） 一、margin为负值产生的影响 对于自身的影响 当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，看下下面的例子 class="container"> class="box1">
margin负外边距
zwzxa的专栏
03-11 884
css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。   负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而
你必须要知道的几个CSS技巧
01-19
有些经典的CSS技巧，我们还是需要记住的，这样可以节省我们大量的时间，下面零度就为大家推荐几个比较好的CSS技巧： 1、在不同页面上使用同样的导航代码 许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就...
你所不知道的 CSS 动画技巧与细节
01-19
怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。 废话少说，直接进入正题，本文提到的动画不加...
几个高级CSS属性技巧美化网站显示
03-02
要说学习CSS3的确很简单，但要精通并掌握那可不容易，现在分享给大家几个常用的CSS属性给人以不同的效果。因为在尝试的过程中始终会出一点小差错。所以那些美丽的CSS站点一定是通过精心调制才得来的。真是在此过程中...
我知道你不知道的负Margin
农村的我的专栏
09-19 950
原文转自：http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ 现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。 负margin理论： 在说明什么是
[css] margin-left 为负值的应用
weixin_36210698的博客
05-09 3318
margin-left 为负值的应用 按钮组中双边框隐藏 要点：按钮设置为浮动，按钮组中非第一个按钮设置为向左浮动边框的距离 <style type="text/css"> .btn { padding: 6px 12px; border: 1px solid #ccc; display: inline-block; vertical-align: middle; ...
CSS布局--使用margin-left负值布局
Micircle的前端笔记
07-20 1873
CSS布局--使用margin-left负值布局 如下图所示，在一个容器中整齐排列N行、N列宽度固定的元素，并且元素与容器左右没有间距： 一种方法是，设置li的margin-right值，然后使用js遍历li为第(n+1)%4==0的li添加样式margin-right:0； 但在这里我采用另一种方法，为每个li设置margin-left值，然后为ul设置margin
margin为负值的几种情况
weixin_30653023的博客
07-18 3231
1、margin-top为负值像素 margin-top为负值像素，偏移值相对于自身，其后元素受影响，见如下代码： 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv=...
普通流中的margin负值原理
ashuashuashu的专栏
03-22 1359
参考资料：https://www.cnblogs.com/LiveWithIt/p/6024864.html 该文对浮动框的负边距讲得很棒，这里就只讲清楚普通流的情况。此文的关键点是，负值表示套近乎，正值表示离远点，要顺流而行！阅读前，先记住，margin-left负值移动自己，而margin-right负值一般是移动后面的元素。一切都是框，所有框处于流动中，水将他们往一个方向推。1、块级框   ...
圣杯布局(margin-left为负值的特殊情况)
weixin_51212460的博客
07-21 341
圣杯布局
margin 负值 理论
zhuchunyan_aijia的博客
07-08 2552
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移 当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
css：margin为负数的情况
彼方_的博客
06-15 2292
虽然margin可以应用到所有元素，但display属性不同时，表现也不同 【1】block元素可以使用四个方向的margin值 【2】inline元素使用上下方向的margin值无效 【3】inline-block使用上下方向的margin负值看上去无效 （inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果） 　　　　 以下以display：block的div标签作为示
margin为负值详解
热门推荐
你想要的都有
03-27 2万+
一、对元素自身的影响 1.margin-left,margin-right为负值 1）元素本身没有宽度，会增加元素宽度 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证</title> &...
flex布局的从认识到深刻认知到熟悉使用（详细图解）
weixin_43342105的博客
05-28 2143
文章目录flex布局的初步认知兼容性怎么开启一个flex布局flex的布局模型两个坐标系main axis和cross axis的一些重要念flex的container中的属性flex-directionJustigy-contentalign-itemsflex-wrapflex-flowalign-contentflex-item中的属性orderalign-selfflex-growflex-shrinkfelx-basisflex flex布局的初步认知 兼容性 flex布局的兼容性是杠杠的，几乎
如何解决 css 文件乱码问题？
最新发布
09-11
关于您的问题，CSS 文件编码问题可能会导致乱码的情况发生，可以尝试以下几种方法来解决： 1. 确认编码方式：确认 CSS 文件编码方式是否正确。常见的编码方式有 UTF-8、GBK、GB2312 等。可以通过编辑器或者转码工具...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值