<!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>Document</title>
<style>
/* 清除样式 */
* {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
border: 10px dotted red;
margin: 100px;
padding: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
盒子模型:
width:宽度
height:高度
width和height指的是内容的宽度和高度
border:边框,第一个值代表线的粗细 第二个值代表线的类型solid实线 dashed虚线 dotted点线 第三个值代表的是线的颜色
margin:外边距, 四个方向
padding:内边距,边框和内容的留白 增加内边距,标签的占位增加
border margin padding都可以只设置一个方向
border(border、padding)-top/left/right/bottom
很多时候我们书写完html页面后,再到浏览器上运行会发现部分样式可能显示不了,这时候用调试工具可以快速找到问题所在,而浏览器大多自带调试工具,只需摁下F12键,便可以进入调试状态,只需要按下Ctrl+Shift+c,再选中要调试的元素,最后在查看和修改源代码。