css盒子模型的几种bug

1.设置padding、borde、margin

问题:盒子变大

解决办法:把width、height值减小

2.浏览器的默认样式

​ *通用选择器,选中页面中所有的标签

​ * {

​ margin: 0;

​ padding: 0;

​ }

3.盒子模型的真实宽高

​ 宽:witdh+padding-left+padding-right+border-left+border-right

​ 高:height+padding-top+padding-bottom+border-top+border-bottom

4.设置重复区域,显示较大值

​ 解决方法:上面的盒子加下边距,左边的盒子加右边距

5.margin允许设置负值,padding不允许设置负值
6.只有普通文档流转农化工块框的垂直外边距才会发生外边距叠加
7.行内标签只有左右外边距,没有上下外边距
8.margin-top的BUG:(五个条件同时具备)

问题:给子元素添加margin-top,作用到父元素身上

1.子元素是父元素的第一个子元素

2.父元素没有内填充

3.父元素没有边框

4.子元素没有浮动

5.父元素没有浮动

​ 解决方法:

​ 1.用父元素的padding-top模拟子元素的margin-top

​ 2.给父元素添加overflow:hidden

​ 3.子元素浮动

​ 4.父元素浮动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,179评论 1 92
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 4,417评论 9 85
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 2,075评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,195评论 0 1
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 854评论 0 3

友情链接更多精彩内容