1.盒子模型分为四个区
由内到外分为内容区,填充区,边框区,外边距区
2.内容区:width(宽),height(高) div一般不设置高
3.填充区:padding:顺时针,上右下左
padding=:1px 1px 1px 1px;
padding-top(上)
padding-right(右)
padding-bottom(下)
padding-left(左)
4.边框区:border 有四个方向和三个方面
border-(上下左右)-style:边框的样式
border-width:边框的宽度
border-color:边框的颜色
border-style: solid;border-color: green;border-width: 20px;
border:10px solid green;
5.外边距区:margin
margin:100px
margin:auto(左右居中)
6.去掉默认的距离
在head里 <style> *{ margin:0; padding:o; } </style>
7.内部样式
<head> <!-- 内部样式 -->
<style>
* {
margin: 0;
padding: 0;
}
/*selecter {
property:value;
...
...
}*/
.boy {
/*class选择器*/
background-color: red;
width: 200px;
height: 200px;
display: inline;
}
#ll {
/*id选择器*/
background-color: rgb(54, 41, 41);
width: 200px;
height: 200px;
display: inline;
}
.girl {
background-color: rgb(134, 158, 98);
width: 200px;
height: 200px;
display: inline;
}
.content {
background-color: red;
width: 100px;
height: 100px;
padding: 10px 20px 30px 40px;
border-style: solid;
border-color: green;
border-width: 20px;
}
div {
/*元素选择器*/
}
div,
body,
span {
/*组合选择器*/
}
</style></head>
<body>
<div class="boy" id="ll">div1</div>
<div class="boy">div2</div>
<div class="girl">div3</div>
</body>
8.class可以重复,id不允许重复
9.外部样式
head中
<link href="index.css" rel="stylesheet">
.css文件中
写修饰代码,也是各种选择器
10.优先级:行内样式>内部样式>外部样式
11.如果子div用float修饰,父div要加overflow:hidden(自适应)
12.box-sizing: border-box;
盒子的大小是整个盒子的大小
13.display: flex; 弹性盒子布局,横着布局。可以嵌套使用
如果要竖着布局,用flex-direction: ;(控制排列方向)
row 横着 -reverse 反转
column 竖着
flex-wrap: wrap; 换行
/* 排列方向的分布方式 /
/ justify-content: space-between; */
baseline(以基准线对齐)