深入解析CSS第三章容器内的元素间距——读书笔记

最新推荐文章于 2022-12-27 17:49:49 发布
最新推荐文章于 2022-12-27 17:49:49 发布
阅读量846 收藏
点赞数
分类专栏： HTML\CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/113110637
版权

容器内的元素间距

  • 给侧边栏加上，两个社交按钮
    在这里插入图片描述
    在这里插入图片描述
  • 设置侧边栏按钮的大小、字体、颜色
    在这里插入图片描述
    此时，没有外边距的它们直接上下堆叠在一起。现在有两个选择，分别或同时指定他们的上下外边距，两个按钮之间会发生外边距折叠
    然而不管选择哪种方式，都会遇到一个问题：侧边栏的内边距需要跟按钮的外边距接触。如果加上margin-top: 1.5em，最终效果如图3-20所示。
    在这里插入图片描述
  • 有以下几种方法解决上述问题
    ——————————————
    相邻的兄弟组合器
    在这里插入图片描述
    ——————————————
    使用相邻兄弟组合给按钮之间加上一个外边距
    在这里插入图片描述
    在这里插入图片描述

3.5.1 如果内容改变了

如果在侧边栏添加更多的内容，则会再次出现间距问题
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.5.2 更通用的解决方案：猫头鹰选择器

  • 定义：就像是给一个物体的一侧涂了胶水，而你还没有决定是否要将它贴到某处，或者还没想好要贴到什么东西上

  • 式子：＊ + ＊（开头通用选择器可以选中所有元素，后面是一个相邻兄弟选择器，最后是另一个通用选择器）

  • 用猫头鹰选择器全局设置上下堆叠的元素的间距
    在这里插入图片描述

  • 因为侧边栏是主列的相邻兄弟元素，所以它也会有顶部外边距
    所以要移除猫头鹰选择器 设置的顶部外边距在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 最终的样式表
    在这里插入图片描述

Anita-Sun
关注
专栏目录
深入解析CSS （1）
q1ngqingsky的博客
08-09 734
对于想要精通CSS的人而言，这本书是一张宝贵的“地图”，覆盖了CSS世界的大部分“疆土”，从CSS基础知识开始（如层叠、优先级、继承、相对单位、盒模型等），到多种布局（如浮动布局、Flexbox、网格布局、响应式设计等），再到大型应用程序中的CSS（如模块化CSS和模式库），最后是关于CSS的高级话题（如背景、阴影和混合模式，对比、颜色和间距，以及排版、过渡、变换、动画等）。........................
CSSCheckStyle——CSS的解析、检查、修复和压缩
03-02
说起来也比较奇怪，同样是前端开发的三大语言之一，CSS的检查工具备受冷落，而JS的代码规范检查工具则层出不穷。JSLint/JSHint/gjslint等神器不断涌现，且检查的严格程度令人瞠目结舌，但是CSS的检查工具却寥寥无几...
元素间的间隙
The * summer with you
08-17 398
解决css中两个div、button等元素左右，上下之间的间隙
css之元素的间距
weixin_30408739的博客
08-25 130
参考：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/ 觉得比较有用的是：加注释 <p class="space">应付金额：<!-- --></--><strong class="price">￥20元&l...
元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）
weixin_30307921的博客
03-31 325
scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象...
css解决内联元素之间的有间距的问题
yang68668的博客
09-25 593
当内联元素在一行挨着排列时，两个之间会有间距，解决办法就是在它们的父元素添加一个 font-size：0；就可以让它们这之间没有间距。
HTML元素间距问题
热门推荐
EchoCaiCai的专栏
10-13 2万+
在利用CSS布局时，经常会遇到一些没有定义间距padding、margin之类的内容，但是页面上却总会有一些不知从何而来的间距出现，下面就是我在自己的工作中遇到的一些常见情况的总结，及其消除方法。 1.并排div之间的间距。      多个div元素在定义属性：display:inline-block;后，多个div元素之间并排排列，但是它们之间总是隔着那么几像素的距离，即便你一次又一次修改
CSS让子容器超出父元素(子容器悬浮在父容器效果)
01-19
第一步：父容器定位设置为 relative（相对定位）。 第二步：子容器定位设置为 absolute（绝对定位）。 我要浮出去！ #a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素...
css使用flexbox布局容器内多元素水平居中
09-24
在CSS布局中，Flexbox（弹性盒模型）是一种强大的工具，尤其在处理复杂布局时，如容器内元素的水平居中。本篇文章将详细介绍如何利用Flexbox实现这一目标。 首先，要实现容器内多元素的水平居中，我们需要在父元素...
【css要点总结】012 css间距
AhCola
08-17 4078
css间距 本节深入研究如何更好的调整元素之间的间距（margin和padding）。 文章中deom无法实时预览，可以在这里获得更好的阅读体验。 first，假设有三个box，从上往下堆叠在一起。现在你想在它们之前添加一个间距，你有几种方式处理这个问题呢？ margin属性也许正好能满足你现在的要求，但是它可能会添加了额外的边距，超出了你的预期。例如，你如何调整边距正好处在这些元素的之间？可能gap属性更适合这种情况。调整元素的间距有很多方式，每种方式都有它们的优点和使用场景。 一.HTML间距 HTM
flex如何设置子元素间距?
weixin_43045869的博客
12-02 1万+
如果只是自定义的间距距离, 设置margin就好了. 如果是想让两个div每个div占百分之n的宽度. 比如想让第一个div占宽度的百分之30. 第二个占百分之70.可以设置第一个div:flex:3; 第二个div:flex:7; 如果你已经设置这两个div的宽高了, 想让他们均分排列,或者考两边排列. 可以了解下justify-content: space-around; 这个属性.属性值有多个.具体怎么排列的.多去了解一下. <div style="display:flex;"> .
css中一些莫名的元素间距
qq_37918241的博客
07-30 402
开发中会碰到类似的这样的问题 <body> <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> <div c...
css让每个元素之间隔开
最新发布
qq_35353972的博客
12-27 1903
css让每个元素之间隔开
css行内（块）元素之间默认间距问题
weixin_41440480的博客
07-01 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
行内块元素之间默认间距问题
心灵刈博
07-27 1万+
前言 为了个文档结构条理性，我也来个前言，虽然不知道写个啥。但向大神学习态度不能丢。因为这个问题简单，逻辑性不强，就直接上问题上代码上解决方案了。大神勿喷，有什么问题，别的解决方案方法，希望大神们多多指点 问题描述 行内块元素之间，浏览器会有一个默认的间距，例如照片之间的间距，或者是别的元素类型直接转换过来的行内块元素，浏览器都会有默认的间距。话不多说，直接上图解释其中的bug。
行内元素间距问题
皮哥不皮
03-11 1万+
问题描述： 经常遇到给display:inline-block的元素设置间距3px; 实际情况其间距一定大于3px(加float情况除外) 元素解释特点：在标准文档流里面，块级元素具有以下特点： 1. 总是在新行上开始，占据一整行； 2. 高度，行高以及外边距和内边距都可控制； 3. 宽度始终是与浏览器宽度一样，与内容无关； 4. 它可以容纳内联元素和其他块元素。
html块元素和间距
Theworld007的博客
10-13 3968
html里的元素分为两大类 块元素：div块元素独占一行的.有宽高的 浮动：可以使块元素在一行上显示 内联元素：不独占一行，没有宽高 span 写文字的， 改变元素位置的方法 margin(外边距): 子父级margin-top会合并为1个 同级相邻的top和bottom会合并为一个 缺点：margin会有合并问题，margin重叠,在垂直方向上，同级关系的元素top和bottom加在一起不会都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值