css基础 块级元素嵌套发生的外边距合并问题
2018-02-11 11:19
465 查看
礼悟:
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
ide:visual studio 2017
browser:Chrome
os:win7
browser:Chrome
os:win7
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="给最苦 https://www.cnblogs.com/jizuiku https://github.com/GratefulHeartCoder"/> <title></title> <style type="text/css"> .father { width:200px; height:200px; background-color:crimson; margin-top:50px; } .son { width:100px; height:100px; background-color:rebeccapurple; margin-top:40px; } </style> </head> <body> <!-- 在视频中是这样说明的: 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框, 则父元素的上外边距会与子元素的上外边距发生合并, 合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。 解决方法:http://www.cnblogs.com/jizuiku/p/8440850.html --> <div class="father"> <div class="son"> </div> </div> </body> </html>
效果
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
相关文章推荐
- css基础 BFC 解决div块外边距合并问题
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题 问题表述: 那天晚上一个同学给我发来一个问题,原型大概是“一个maindiv嵌套了一个div.class="he
- css基础 margin 上下外边距合并问题 小例子
- css基础 margin 上下外边距合并问题 小例子
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- css基础 行内元素的外边距只有左右,没有上下
- html初级p标签带来的块级元素与内联元素的嵌套问题
- css + div 布局之 CSS盒模型 外边距合并问题
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- css 外边距合并问题
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
- CSS基础学习十五:盒子模型补充之外边距合并
- 【css基础】垂直外边距的合并
- CSS页面布局基础4——元素可见性、溢出和元素重叠问题
- WEB手机端界面绝对定位分辨率扩大导致错乱问题和块级元素旋转角度CSS
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- 【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容
- css基础 嵌套的块元素设置外边距
- CSS--基础块级元素与内联元素
- html和css基础--float属性给父元素带来的问题及方案