第二章:HTML、CSS、JavaScript晋级篇
盒子模型
任何的标签都有盒子模型
比喻:
盒子模型类似于快递盒
1.快递盒与快递盒之间的距离(外边距 margin)
2.快递盒盒子的厚度(边框 border)
3.盒子内部物体距离盒子内部外壳的距离(内边距/内填充 padding)
4.内部物体的大小(content 文本内容)
实际:
1.外边距其实就是标签与标签之间的距离
2.标签的边框厚度
3.标签内文本与标签边框之间的距离
4.标签内填写的内容
注意:
body标签默认有8px的外边距,我们在构建网页的时候基本上都会将改外边距去除
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
可以简写
body {
margin:0 0 0 0;
}
顺序
/*1.上右下左 顺时针*/
/*margin: 1px 2px 3px 4px;*/
/*2.上 左右 下*/
/*margin: 1px 2px 3px;*/
/*3.上下 左右*/
/*margin: 1px 2px;*/
/*4.影响四边*/
margin: 10px;
/*padding规律跟marigin一致 也有四种写法 也是以用的顺序影响*/
padding: 10px;
浮动
主要用于前期的页面布局
/*使用频率不高*/
/*display: inline-block;*/
float: left;
}
浮动的影响
浮动的元素是脱离正常文档流,会造成父标签塌陷的问题
1.方式1(推导)
再加一个专门用来撑的div
height: 100px;
}
<div id="d4">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
2.方式2(推导)
利用clear参数
clear: both;
}
3.方式3(结论)
无论你是业余前端还是专业前端基本上都是用方式3
你只需要提前写好固定的解决浮动带来的负面影响的效果,之后
"""谁塌陷了就给谁加上clearfix类属性即可"""
.clearfix:after {
content: '';
display: block;
clear: both;
}
<div id="d4" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
</div>
溢出属性
p {
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
利用溢出属性制作圆形头像
height: 200px;
width: 200px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}
img {
/*max-width: 100%;*/
width: 100%;
}
<div id="d1">
<img src="111.jpg" alt="">
</div>
定位
1.static静态定位
所有的标签默认都是静态定位,意思