《css设计彻底研究》读书笔记之 盒子模型
一、在给元素设置背景时
IE作用域：content + padding
Firefox作用域：content + padding + border
二、border
border-color : red green; 上下为红色，左右为绿色
border-width : 1px 2px 3px; 上边宽为1px，左右边宽为2px，下边宽为3px
border-style : dotted dashed solid double; 上右下左的边线分别为：点线、虚线、实线、双线
三、margin
1、若有两个上下排列的块级元素，分别为第一个块级元素设置 margin-bottom ，第二个块级元素设置 margin-top，则两块元素之间的距离并不是
margin-bottom + margin-top的总和，而是两者中的较大者，这个现象称为margin的“塌陷”现象，意思是说较小的margin塌陷到了较大的margin中，因此在实际操作中，当修改某些margin值后，页面效果而无变化的情况时，不要被表象所迷惑
2、当两个元素产生父子关系时，即一个元素包含另一个元素时，子块的 margin 将以父块的 content 为参考。当父块和子块高度确定，且子块的高度超过父块的高度，则IE和Firefox会有两种完全不同的处理方法：
IE : 会自动扩大父块，以保持子元素的margin-bottom的空间和父元素自身的padding-bottom的空间
Firefox : 子元素将超出父元素的范围
从css的标准规范来说，IE的处理方法是不合规范的，虽然此处它可能更符合前端开发人员的初衷，但它的这种方式，本应该由min-height属性承担
转载于:https://www.cnblogs.com/zhupinglei/archive/2012/05/08/2490912.html
《css设计彻底研究》读书笔记之 盒子模型相关推荐
- CSS设计指南（读书笔记 - 选择器）
本文转自william_xu 51CTO博客,原文链接:http://blog.51cto.com/williamx/1142763,如需转载请自行联系原作者
- CSS设计指南（读书笔记 - 背景）
本文转自william_xu 51CTO博客,原文链接:http://blog.51cto.com/williamx/1140006,如需转载请自行联系原作者
- 领域驱动设计DDD之读书笔记
查看文章 领域驱动设计DDD之读书笔记 转载原地址:http://hi.baidu.com/lijiangzj 2007-08-17 16:53 一.当前Java软件开发中几种认识误区 Hibe ...
- Redis 设计与实现 读书笔记（菜鸟版）
Redis 设计与实现 读书笔记(简略版) 写在前面 第一章(内部数据结构) SDS List Dictionary Rehash Rehash 与 COW 渐进式Rehash 字典收缩 Skipli ...
- 实体 联系 模型mysql_数据库系统概念读书笔记――实体-联系模型_MySQL
bitsCN.com 数据库系统概念读书笔记--实体-联系模型 前言 为了重新回顾我写的消息系统架构,我需要重新读一下数据库系统概念的前三章,这里简单的做一个笔记,方便自己回顾 基本概念 实体-联系( ...
- 《CSS 禅意花园》读书笔记1
最近有点忙..但有的事情开始写博客就不能停下来. <<CSS 禅意花园>>读书笔记1(基础篇---------上) 在假期中买一本<<CSS 禅意花园>> ...
- 《H5 移动营销设计指南》 读书笔记整理
一个前端工程师最近迷上了营销类的H5页面,被五花八门的H5页面迷的眼花缭乱,兴趣使然,于是买了一本<H5 营销设计指南>,看完以后对营销类的H5页面有了更深的理解,感觉很实在,所以参考读书 ...
- 【软件设计】5本软件设计书籍的读书笔记
文章目录 前言 1.<简约之美:软件设计之道> 1.1 软件设计的准则 1.2 小结 2.<软件设计精要与模式> 2.1 软件架构 2.2 软件设计 2.3 软件设计模式 2. ...
- CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标 理解: 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能 ...
- 阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
走的越远你就越会发现 真正能在危难之时拉你一把的人 只有你自己 前段时间跟家里打视频电话 每每看到家人关怀的目光以及她们逐渐苍老的面庞 就不忍心再对他们言哭言累 有时午夜辗转反侧脑海里一想到他们 就会 ...
最新文章
- 一文看懂https如何保证数据传输的安全性的
- 俄亥俄州立大学计算机专业排名,美国俄亥俄州立大学各专业的排名情况介绍
- 使用with 创建视图
- leetcode那些算法都用在了哪里
- STM32F103单片机输出相位可调PWM波
- go nil json.marshal 完是null_字节跳动踩坑记#3：Go服务灵异panic
- 普通人能用华为P30拍出银河么？这是我们在北京实拍的结果
- chrome插件开发详解
- P2525 Uim的情人节礼物·其之壱
- 雷电模拟器手游辅助制作教程
- 前端VUE学习总结（一）
- 理解马尔可夫决策过程
- 《迷你世界》亿级玩家都在用的游戏场景推荐系统长啥样？
- JAVA第三方工具类
- 卷积神经网络使用到的公式
- linux系统启动的第一个进程是,CentOS6开机启动过程详解
- Mybatis配置文件——全配置解析
- Unet网络搭建（Pytorch）
- 复旦大学EMBA深圳校友胡盛龙专访:“非洲手机之王”如何应对“群雄逐鹿”
- C++生成的exe在windows系统打开显示缺少dll动态库