css外边距自动代码,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了。
我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是多少,不会出现什么异常,即浏览器的兼容性方面,但外边距就不一样了。
设置外边距,首先想到的是应该是双边距的问题。如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么做,因为这无形中增加了代码的质量,带宽很贵的哦,最好的办法就是在浮动的方向不设置margin 值,因为这个可以用其他的方法实现的,比如padding,或者设置在父层节点的style。
在一个问题就是垂直双编剧的合并问题。当两个垂直的双边距相遇时,它们将形成一个边距,合并后的边距等于发生合并的边距的较大值。
复制代码代码如下:
*{padding:0;margin:0;}
.box{width:200px;height:120px;margin:0 auto;background:#FFC;}
.d1,.d2{height:40px;width:100%;overflow:hidden;}
.d1{background:#f00;margin-bottom:20px;}
.d2{background:#0033CC;margin-top:10px;}
看到这样的代码,顺着代码的思维看,这段代码的效果应该是d1模块和d2模块有个间距,间距值是d1的margin-bottom的20和d2的margin-top的10相加的和,但其实不然。看一下效果图吧。
实际两个模块的间距是20,这就是垂直双编剧的合并问题了。有时候遇到这样的情况不知所然,不知怎么回事,后来才知道了垂直双边距。知道了问题 的根源,那么解决这个问题的最好办法就是避免这个问题的出现了。我是这么做的,比较懒惰的作法,不过绝对有效哈。
还有一个很不人性化的规范,就是一 个盒子,即一个模块如果没有上边距(margin-top)或者上边框(border-top),那么这个盒子的上边距会和这个盒子的第一个子元素的上边 距重合。不说什么了,把代码和效果贴上,直观,易理解。知道了问题所在就知道了怎么避免问题的出现了。
复制代码代码如下:
*{padding:0;margin:0;}
.box{width:200px;height:120px;margin:0 auto;background:#FFC;}
.d1,.d2{height:40px;width:100%;margin-top:10px;overflow:hidden;}
.d1{background:#f00;}
.d2{background:#0033CC;}
我对这些的理解都是基于css中的盒子模型,不知道大家有没关注过,我会在后来博文中补上盒子模型这一点,希望大家关注。第一次写博客,感觉有点不习惯,我会坚持,提高自己的文字水平,努力让自己有一个提高,同时也能将我的观点和大家分享。
css外边距自动代码,CSS外边距合并代码相关推荐
- Git实战技巧-多人协作开发出现代码冲突,如何合并代码
Git实战技巧-多人协作开发出现代码冲突,如何合并代码 1.企业场景 小智和小黑两个人交叉修改同一个文件,这个时候小智修改完提交.问题来了,如果小智提交成功,那么就相当于忽略了小黑提交的内容.这个时候 ...
- Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- git 怎么拉取线上代码到本地进行合并_android studio如何使用git提交、拉取、合并代码的操作...
我们在实际做项目开发时,一般都需要多人协同开发,这就产生了代码管控的需求,一些版本控制的工具就应运而生了.现在常用的一种是Git,另外还有些svn等,本人感觉git工具比较好用,这篇文章也只讲述git ...
- html设置外边距不合并,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法 ...
- php外边距的代码,CSS 外边距
CSS 外边距 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
- CSS盒模型之内边距、边框、外边距 十九问 (持续更新)
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法 第五问:描述一下下面盒子的大小,颜色什么的(content ...
- CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...
- CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式...
CSS 框模型概述 术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
- html外边距有哪些,css外边距是什么?css外边距属性的介绍
在学习css的时候,会css外边距这一概念,所以,css外边距是什么呢?边框以外就是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素,接下来本篇文章将来给大家介绍关于css外边距属性的相关内容. ...
最新文章
- kali linux 2.0 web 渗透测试 电子书
- leetcode596. 超过5名学生的课(SQL)
- Java框架数据库连接池比较(c3p0,dbcp和proxool)
- Java关键字static
- AD维护管理工具详解(一)dcdiag
- 查看进程占用内存cpu信息,Linux命令—TOP
- 转载:网关的概念以及形象的比喻
- java 添加jbutton_在java中怎样在JLabel上添加JButton呢
- 树莓派4B:连接windows远程桌面
- 10万微商被骗100亿,最大微商集团被爆涉嫌传销
- cordova获取手机IMEI
- vue 跳转页面删除当前tab
- linux查看用户名
- uniapp+极光做消息推送
- adapter.notify()、notifyAll()、notifyDataSetChanged ()、notifyDataSetInvalidated ()的区别
- 这才叫爷们! --转载
- 【TV Picture Quality - 03】TV屏幕解读
- BZOJ 1057 棋盘制作(最大黑白相间子矩阵)
- WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框
- 互联网环境下决策支持系统的发展变迁
热门文章
- 美国电商如何用大数据玩转“双11”?
- IDEA部署Tomcat(超详细)
- linux命令执行进度显示工具progress
- 快速列出windows10中所有已安装的应用列表(兼容win11)(长期有效)【伸手党福利】
- POJO/DTO/DO/EO/VO/BO/PO/AO的含义和使用
- C++ 性能优化篇二《影响优化的计算机行为》
- 软件开发需要学习什么
- 让 new bing 使用 GPT-4 编写一个令人满意的程序全过程赏析
- android nsd和udp广播,Android网络服务发现(NSD)使用
- 知识点 —— Python进阶-3