本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记,欢迎学习交流。同时感谢陆老师的精彩传授!
一、课程目标
- 无语义性div与span标签与语义性结构化标签
- float属性
- margin与padding属性
- position属性
- 弹性布局
二、详情解读
01.div与span
1.div与span两个标签没有实质的意义,仅用于布局
2.div属于块标签,可以包含其他块标签或者行标签
3.span属于行标签,可以包含其他行标签
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div与span</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
border: 1px solid #f00;
display: inline-block;
}
span {
width: 200px;
height: 200px;
border: 1px solid #f00;
// 因为span标签是行标签,如果不设置display:block,则上面的width和height属性无效
display: block;
}
</style>
</head>
<body>
<div class="container">
块级标签
</div>
<div class="container">
divbox
</div>
<span>
行级标签,当设置样式display:block时,变为块级标签
</span>
<span>
span
</span>
</body>
</html>
运行结果:
02.float属性:
1.float可以控制元素的浮动位置
2.通过float可以打破原来文档流顺序
3.如果要恢复标准文档流,需要使用clear属性清除浮动
- 块级元素默认是由上往下排列的,加了float就会像浮动一样,从左往右排列,或者从右往左排列
- float是改变文档流,而inline-block是单纯的排列方式
- 当只设置display为inline-block而不设置vertical-align时,盒子无法水平对齐
- 当不设置float属性时,div默认是上下排列
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* float是改变文档流,而inline-block是单纯的排列方式
当只设置display为inline-block而不设置vertical-align时,盒子无法水平对齐
当不设置float属性时,div默认是上下排列
*/
div {
/* float: left; */
display: inline-block;
vertical-align: bottom;
}
.box1 {
width: 200px;
height: 100px;
border: 1px solid #f0f;
}
.box2 {
width: 200px;
height: 100px;
border: 1px solid #039AE3;
}
.box3 {
width: 200px;
height: 100px;
border: 1px solid #F0AD4E;
}
/* .box4_1 {
width: 30%;
height: 30%;
background-color: #EF5618;
display: none;
}
.box4_2 {
width: 30%;
height: 30%;
background-color: #EF5618;
display: none;
} */
ul {
width: 500px;
}
li{
width: 100px;
float: left;
}
</style>
</head>
<body>
<!-- <div class="box1">
box1
</div>
<div class="box2">
盒子2asdfasdfasd
</div>
<div class="box3">
box3
</div>
<div class="box3">
box3
</div> -->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
03.margin和padding属性
1.margin称为外边距,即元素外边框 留白距离
2.padding称为内边距,即元素内边框与内部内容的距离,即留白位置
3.由于各浏览器黑夜margin不一致,存在兼容性问题
- 1.外边距重叠,当两个块级元素上下排列的时候,边距并不是重叠的,而是选择其中比较大的一个边距,左右的时候,边距是叠加计算的
- 2.设置内边距会影响元素的实际宽高
- 3.margin, padding简写顺序:top,right,bottom,left
- 4.margin:auto 水平居中
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/* 清除浏览器默认margin值 */
marign:0;
}
/* div{float: left;} */
.container1 {
width: 200px;
height: 200px;
border: 1px solid #00ff00;
/* margin-top: 10px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px; */
margin: 10px 30px 20px 30px;
padding: 30px;
}
/* 1.外边距重叠,当两个块级元素上下排列的时候,边距并不是重叠的,
而是选择其中比较大的一个边距,左右的时候,边距是叠加计算的
2.设置内边距会影响元素的实际宽高
3.margin, padding简写顺序:top,right,bottom,left
4.margin:auto 水平居中
*/
.container2 {
width: 200px;
height: 200px;
border: 1px solid #00Fffe;