一.盒子模型
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;
}