css盒子模型实验报告总结_前端知识点总结—

1、盒子模型盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。

标准盒子模型

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子模型

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

2、css 外边距合并(叠加)

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3、box-sizing属性

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

4、margin越界

以第一个子元素的margin-top 为例：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

(1)给父元素加边框border (副作用)

(2)给父元素设置padding值 (副作用)

(3)父元素添加 overflow：hidden (副作用)

(4)父元素加前置内容生成。(推荐)

以第四种为例：

.parent {

width : 500px;

height : 500px;

background-color : red;

}

.parent : before {

content : " ";

display : table;

}

.child {

width : 200px;

height : 200px;

background-color : green;

margin-top : 50px;

}

css盒子模型实验报告总结_前端知识点总结——盒子模型相关推荐

盒子模型实验报告总结_真刀真枪模块化（2）——图解Service模型
: [说在前面的话] 在前面一篇文章<真刀真枪模块化(1)--一本糊涂账>中,我们讨论了: 在工程开发中进行模块化的本来目的--为了复用已有的代码,节省当前项目的开发时间: 实际操作过程中 ...
大学计算机实验报五告,大学计算机实验报告二_相关文章专题_写写帮文库
时间:2019-05-12 01:07:32 作者:admin 大学计算机实验报告一长文档的组织.编辑与排版姓名: 学号: 专业: 年级: 指导教师: 年月日1 实验目的学会长文档的组织.编辑. ...
隐马尔可夫模型实验报告
隐马尔可夫模型实验报告 1. 任务说明 2. 实验环境 3. 方法描述 3.1 问题一 3.1.1 前向算法 3.1.2 后向算法 3.1.3 绘制结果 3.2 问题二 3.2.1 Viterbi ...
web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
mysql实验报告四_实验报告四
实实验报告课程名称数据库实验及课程设计实验项目数据查询实验仪器 ___________________________ 系别______信息管理学院______ 专业_____ ...
优化模型实验报告_BERT微调效果不佳？试试这种大规模预训练模型新范式
BERT模型自发布至今已整整两年了,但是其余热仍未消减.从一经问世的轰动,简单应用/微调便可达到某个领域或者任务的SOTA效果:到如今的各种『被吊打』,BERT巨人肩膀上的新宠大致可以分为以下这么几类 ...
时间序列分析实验报告总结_时间序列实验报告.doc
<时间序列实验报告.doc>由会员分享,可在线阅读,更多相关<时间序列实验报告.doc(15页珍藏版)>请在装配图网上搜索. 1.重庆交通大学学生实验报告实 ...
plc实验报告流程图_中南大学plc实验报告(共6篇).docx
中南大学plc实验报告(共6篇) 中南大学 <电气控制及PLC应用技术> 设计报告设计题目邮件分拣机控制系统设计指导老师张涛吴同茂设计者张黎专业班级测控12级01班设计日期XX年7月目 ...
时间序列分析实验报告总结_时间序列实验报告R.doc
时间序列实验报告R 实验报告课程名称时间序列分析实验项目名称 ARCH建模班级与班级代码 1125040 实验室名称(或课室) 北4-602 专业统计学任课教师陈根学号: 1125 ...
python飞机大战实验报告心得_飞机大战实验报告
飞机大战实验报告专业: 网络工程 1 32班学号: 13 9074 298 ﻩ姓名:孙仁强计算机科学与技术学院二零一六年十二月一.软件运行所需要得软硬件环境本系统就是以Windows ...

css盒子模型实验报告总结_前端知识点总结——盒子模型

css盒子模型实验报告总结_前端知识点总结——盒子模型相关推荐

最新文章

热门文章