亚马逊网站入口,遂溪手机网站建设公司,深圳微商城网站建设,wordpress建站详解一、基本概念#xff1a;标准IE模型
盒模型#xff1a;margin border padding content 标准模型#xff1a;将元素的宽度和高度仅计算为内容区域的尺寸#xff08;content-box#xff0c;默认#xff09; 当CSS盒模型为 标准盒模型 #xff08;box-sizing: conten…一、基本概念标准IE模型
盒模型margin border padding content 标准模型将元素的宽度和高度仅计算为内容区域的尺寸content-box默认 当CSS盒模型为 标准盒模型 box-sizing: content-box 时 元素的宽度 内容区域的宽度(content) 200px 200px IE模型将宽度和高度包括了内边距和边框的尺寸border-box 当CSS盒模型为 IE盒模型 box-sizing: border-box 时 元素的宽度 内容区域的宽度 内边距 边框 (content padding border) 200px 178 10 * 2 1 * 2
二、标准和IE的模型区别
计算宽度和高度的方式不同
三、CSS如何设置两种模型
通过css设置标准模型
box-sizing: content-box;通过css设置IE盒模型
box-sizing: border-box;四、JS如何设置获取盒模型对应宽和高
通过dom.style属性获取, 只能获取内联样式的宽和高
let dom document.getElementById(title)
console.log(宽度,dom.style.width) // 只能获取内联样式的宽
console.log(高度,dom.style.height) // 无法外部样式表的高
宽度 100px
高度 1-1. 扩展知识css 三种样式表
// 内联样式直接在html标签中使用style属性设置的样式
p stylecolor: red;这是内联样式的文本/p// 内部样式表: 内部样式表是在HTML文件的头部使用style标签定义的样式
head
style
p {
color: blue;
}
/style
/head// 外部样式表外部样式表是单独的CSS文件与HTML文件分离
head
link relstylesheet typetext/css hrefstyles.css
/head通过dom.currentStyle.width/height, 获取浏览器渲染以后的宽和高但是这个属性只有IE支持window.getComputedStyle(dom).width/height , 获取浏览器渲染以后的宽和高兼容性好
let dom document.getElementById(title)
console.log(宽度,window.getComputedStyle(dom).width)
console.log(高度,window.getComputedStyle(dom).height)
// 宽度 200px
// 高度 100pxdom.getBoundingClientRect().width/height, 通过计算该元素top、left、bottom、right到浏览器的距离可以算出元素的宽高
let dom document.getElementById(title)
console.log(宽度,dom.getBoundingClientRect().width)
console.log(高度,dom.getBoundingClientRect().height)
// 宽度 100
// 高度 100五、实例题根据盒模型解释边距重叠
父子元素的边距重叠取两者之间的最大值
style
.parent {background-color: aqua;
}
.child {height: 100px;margin-top:20px ;background-color: brown;
}
/style
bodydiv classparentdiv classchild/div/div
body父元素margin-top: 0 和 子元素margin-top: 20px取margin-top:20px 2. 兄弟元素的边距重叠取两者之间的最大值
style
.brother1 {height: 100px;background-color: blueviolet;margin-bottom: 10px;
}
.brother2 {height: 100px;background-color: burlywood;margin-top: 20px;
}
/style
body
div classbrother1brother1/divdiv classbrother2brother2/div
/bodybrother1 margin-bottom: 10px; brother margin-top:20px; 取 margin-top:20px 3. 空元素的边距重叠取两者之间的最大值
style
.empty {margin-top: 20px;margin-bottom: 40px;
}
/style
body
div classempty/div
/body.empty margin-top: 20px; margin-bottom: 40px; 取margin-bottom: 40px
六、BFC (边距重叠解决方案)
overflow:hidden;解决边距重叠的问题使用BFC 什么是BFC 块级格式化上下文 BFC的原理渲染规则 2-1. BFC的子元素垂直方向的边距会发生重叠
!-- BFC的子元素的垂直方向边距重叠 --section idmarginstyle#margin {background-color: pink;overflow: hidden;}#margin p {margin: 5px auto 25px;background-color: red;}/stylep1/pp2/pp3/p/section解决方案如何消除边距重叠需要给相邻的元素添加父元素并创建BFCoverflow: hidden
section idmarginstyle#margin {background-color: pink;overflow: hidden;}#margin p {margin: 5px auto 25px;background-color: red;}/* 添加父元素新增样式overflow: hidden; 创建BFC,防止边距重叠 */.bfc{overflow: hidden;}/stylep1/pdiv classbfcp2/p/divp3/p/section2-2. BFC的区域不会与float元素的box重叠用于清除浮动布局
!-- BFC的区域不会与float元素的box重叠用于清除浮动布局 --section idlayoutstyle mediascreen#layout {background-color: red;}#layout .left {float: left;width: 100px;height: 100px;background-color: pink;}#layout .right {height: 110px;background-color: #ccc;}/stylediv classleft/divdiv classright/div/section2-2-1为什么左侧会和右侧发生重叠 因为浏览器会先渲染文档流中的元素 然后浏览器再文档流的基础上再渲染脱离文档流的元素浮动元素所以发生了重叠 如何防止普通元素和浮动元素重叠文档流元素和脱离文档流的元素重叠 把普通元素变成BFC
!-- BFC的区域不会与float元素的box重叠用于清除浮动布局 --section idlayoutstyle mediascreen#layout {background-color: red;}#layout .left {float: left;width: 100px;height: 100px;background-color: pink;}#layout .right {overflow: hidden;height: 110px;background-color: #ccc;}/stylediv classleft/divdiv classright/div/section2-3. BFC再页面上是一个独立容器外面的元素和里面元素不会互相影响 2-4. 当元素为BFC高度时浮动元素也会参与高度计算
!-- 浮动元素不参与高度计算所有父元素高度为0父元素为BFC时浮动元素参与高度计算所以父元素高度为40 --section idfloatstyle mediascreen#float {background-color: red;overflow: hidden;}#float .float {float: left;font-size: 30px;}/stylediv classfloat浮动元素/div/section如何创建BFC 3-1 overflow:visible、auto、hidden; 3-2 float≠ none 3-3 position: ≠ static 或 ≠ relative 3-4 dipslay: inline-table、table-caption、table-cell、table
