一.盒子模型
1.关于边框与边距的基本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是盒子模型</title>
<style>
div {
background-color: lightblue;
margin: 25px;
border: 25px red solid;
width: 500px;
padding: 25px;
}
</style>
</head>
<body>
<p>盒子模型本质</p>
<div>本质就是css，盒子里面封装了内外边距，边框，填充内容和具体内容</div>
</body>
</html>- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
margin在英语中就是边缘白边的意思，其他的意思也是由这两个主要意思衍生出来的
padding在英语中就是衬料的意思，衍生为内边距
2）计算这块代码的长度与高度就根据内外边距即可
比如上述网页的内容界面宽度就是400+25+25+25+25
3）注意html和css可以分开文件编写（在html文件中添加链接即可）
css的编写加上.就可以指定到html中的div元素，或者用header
2.基本思想
1）写法
在html内写基本的内容信息，并定义div，head...
在css文件中具体进行修改
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
font-size: large;
color: burlywood;
}
body{
background-color: #edeef0;
}
.container{
width: 90%;
margin: 30px auto;
margin-top: 30px;
background-color: #fff;
/*顺时针转动 ,左右可以控制是否居中*/
padding: 20px;
border-radius: 5px;
}
.container img{
width: 100%;
/*相当于container的90% */
}
.container h1{
font-size: 40px;
margin: 20px 50px;
}
.container a{
color: black;
}
.container :hover{
color: pink;
}先*进行全选清空，因为edge或者火狐等浏览器可能会有差别，例如px差别。
在里面有box-sizing属性目的是让盒子是向外扩展还是向内扩展。
.container设置为页面的90%（也就是盒子是页面的90%），然后image中的100%是相当于盒子的100%
（<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。）
二.视口，流式布局与浮动
1.视口when why how
1）视口可以帮助代码适应pc网页和移动端
因为其是按比例显示的：换算：百分比宽度=目标元素宽度/父盒子宽度
具体用法：body >*就可以用于选取body元素的第一级子元素，再设置宽度长度什么的就会按比例生成了。
2.浮动
1）存在意义：就是字面意思，让这个块浮动起来，从而达到脱离的效果。
2）理解：就是排队的意思，这个浮动了，下面的块就会挤上来，都浮动的话也要看顺序，浮动也有弊端，大div块里面的小div若浮动的话，会导致高度丢失，需要用到
.container(大div的class类)::after{
content='';
display:block;
clear:both;
}
3883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
