1. 盒模型的大小与位置的设置与计算
- 位置调整
使用margin-top:50px; 调整块的上边距，使用margin-left:50px;调整块的左边距。
效果如图：
- 大小计算
<style>.container{width:300px;height:200px;background-color:lightgreen;/* 位置调整 */margin-top:10px;margin-left:10px;/* 大小与计算 */border:5px solid red;padding:10px;/* 此时该块的大小为 内边距10*2+宽300+边框5*2=330 经QQ截图工具测量计算正确 */}</style></head><body><div class="container">盒模型大小与位置</div></body>
- 总结：外边矩margin的上边框和左边矩影响块的位置 块的大小 由内边距+自身内容大小+边框大小组成。
2. box-sizing解决了什么问题,实例演示
经查 box-sizing 一共有三个值分别是 content-box(内容) border-box（边框） inherit（继承）
个人理解：
- 当为content-box 时，块的大小只包含内容区 （这个是默认值）
- 当为border-box时，块的大小是内容区+边框区大小（改变了默认的块大小计算方式）
- 当为inherit时，块的大小继承父级的计算方式。
使用box-sizing 改为border-box时，块中内容区域大小发生变化。
3. 绝对定位与相对定位的区别与应用,实例演示
- 相关知识点
position 规定元素的定位类型,其实就是改变元素的定位参照物。
值分别为：
absolute 生成绝对定位，相对static定位以外的第一个父元素定位
relative 生成相对定位，相对于自己定位
fixed 生成绝对定位元素，相对浏览器窗口定位（固定定位）
static 默认值 没有定位
inherit 继承区别：绝对定位position的值使用absolute，相对定位值使用relative。前者参照物是父级包含块，后者参照物是自己本身的位置。
4. 固定定位与绝对定位的区别是什么,实例演示
区别：绝对定位一定要有定位父级，没有就相对窗口定位，固定定位（fixed）始终以窗口作为定位。
<style>*{padding:0;margin:0;}.container{width:390px;background-color:coral;right:10px;bottom:10px;/* 使用下面定位语句后，位置才发生变化 */position:fixed;/* 外观简单设置 */text-align:center;/* 设置圆角 */border-radius:8px;color:white;padding:5px;font-weight:600px;}</style></head><body><div class="container">固定广告位</div>
5. 为什么垂直居中如此困难, 使用绝对定位如何实现
在网页中高度是无限的所以垂直居定比较麻烦。
6. 使用绝对定位实现二列布局
7. 使用浮动实现三列布局
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动实现三列布局</title><style>*{margin:0;padding:0;box-sizing:border-box;}.main{width:800px;min-height:700px;background-color:lightcoral;}.left,.right{width:200px;background-color:lightgreen;min-height:700px;}.left{float:left;border:5px solid white;}.content{width:400px;background-color:lightskyblue;min-height:700px;float:left;border:5px solid white;}.right{float:right;border:5px solid white;}</style></head><body><div class="main"><div class="left">左侧</div><div class="content">中间</div><div class="right">右侧</div></div></body></html>
效果
8. 默写出圣杯布局的思想,并用圣杯布局实现三列布局
- 把主内容区必须写在最前面且主内容区的宽度为自适应即100%.
- 三个块内容都要左浮动
- 左侧通过设置左侧margin-left 为100%将左侧内容放到正确位置 右侧通过margin-left设置为右侧宽度负值,把右侧放到正确位置
- 再设置主内容区的内边距左右两侧值(值为左右侧的宽度)把左右两侧的位置挤出来.
- 需要注注意的是把三个区域的父元素overflow属性设置为hidden,以完全包住子元素.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>圣杯布局</title></head><style>.container {background-color: lightcoral;overflow: hidden;padding: 0 200px;}.container > * {min-height: 600px;float: left;}.main {width: 100%;background-color: lightgreen;}.container > .left,.container > .right {width: 200px;background-color: lightskyblue;position: relative;}.container > .left {margin-left: -100%;right: 200px;}.container > .right {margin-left: -200px;left: 200px;}</style><body><div class="container"><div class="main">内容主体内容主体内容主体内容主内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容</div><div class="left">左侧</div><div class="right">右侧</div></div></body></html>
实现效果
