盒子模型
div：
用来定义文档中的分区(division，可以把网页分成多个不同的独立部分
盒子模型简介：
<style>
body{
background-color: green;
}
div{
height: 200px;/*内容的高度 */
width: 200px;
background-color: aliceblue;
padding-left: 30px;
padding-top: 50px;
border: 10px solid red;
margin-top: 30px;
margin-left: 50px;
}
</style>
</head>
<body>
<div>
文字内容
</div>
</body>
一个盒子模型，主要是由内容、内边距、边框、外边距、宽度、高度组成
整个盒子的宽度和高度:width+padding+border height+padding+border
边框
统一设置:border:blue solid 2px;
边框颜色：
|--------------------------------------|----------------------------|----------------------------|
| 属性 | 说明 | 案例 |
| border-top-color | 上边框颜色 | border-top-color: pink; |
| border-right-color | 右边框颜色 | border-right-color: pink; |
| border-left-color | 左边框颜色 | border-left-color: pink; |
| border-bottom-color | 下边框颜色 | border-bottom-color: pink; |
| border-color | 四个边框的统一颜色 | border-color: red; |
| border-color: red green; | 上下是red 左右是green | |
| border-color: red yellow green; | 上是red 下是green 左右是yellow | |
| border-color: red green yellow pink; | 按顺时针赋值，上->右->下->左依次填入颜色 | |
边框粗细(宽度)：
border-width：
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
边框样式：
border-style:
solid 实线
dotted 小圆点线
double 双实线
dashed 虚线
也可以按照前面的格式指定改变是哪条线
外边距
margin：0px auto 控件居中对齐
内间距
padding属性
padding-left
padding-right
padding-top
padding-bottom
<style>
div{
width: 30px;
border:1px solid red;
padding: 10px 20px;
}
</style>
</head>
<body>
<div>
<div>
333
<br>
444
</div>
</div>
</body>元素默认样式
p段落的默认样式:上下margin:16px
标题
ul
重置默认样式
*{
margin: 0;
padding: 0;
}
元素分类
行级元素
块级元素
内联块元素
行级元素inline：
<a></a>
<b></b>
<strong></strong>
<i></i>
<span></span>
特点:默认同行可以继续跟同类型标签
宽度是内容决定的
不支持用户设置宽度
也不支持用户设置高度
也不支持上下外边距
块级元素block
<p></p>
<div></div>
<ul>
<li></li>
</ul>
默认是独占一行
支持CSS所有控制的指令(长宽高等)
如果没有设置宽度，默认占满行
内联块元素inline-block：
<img>
特点：
元素还是在一行显示
支持宽和高的设置
<img src="https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/top-interview-150/cover" style="width:20px;height:10px">
也支持外间距的设置，但是要和其他保持在一行上
元素显式转换的属性display
使用display可以实现元素显示或不显示
可以控制的显示方式:行级显示 块级显示 内联块显示
|--------------|-------|
| 取值 | 描述 |
| block | 块级元素 |
| inline | 行级元素 |
| inline-block | 内联块元素 |
| none | 不显示 |
<style>
div{
height:100px;
width:100px;
border:2px red solid;
display: inline;
}
a{
display: block;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
<a href="">百度</a>
<a href="">阿里</a>
<a href="">腾讯</a>
</body>Flex布局
Flex是Flexible Box的缩写，表示"弹性布局"
采用flex布局的元素称为flex容器，里面的元素称为flex item
flex容器默认存在两条轴 水平方向上有一个主轴(main axis)垂直方向上交叉轴(cross axis)
主轴开始的位置称为main start 结束的位置main end
交叉轴开始的位置称为cross start 结束的位置cross end
单个的flex item，占据主轴的空间叫做main size，占据的交叉轴空间叫做cross size
flex-direction:控制flex item排列方向(主轴的方向)
flex-direction: column-reverse;/*row/row-reverse*/
row-reverse:主轴为水平方向，起点在右侧
column:主轴为垂直方向、起点在上沿
flex-wrap:控制flex item显示不下，是否进行换行处理
nowrap:默认值，不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方
justify-content:定义元素在主轴上的对齐方式
flex-start:从main start起始位置对齐
flex-end:从main end结束位置对齐
center:居中对齐
space-between:两端对齐，项目之间间隔相等
space-around:每个项目之间间隔相等
边框圆角：
border-radius:50%;
15px;
50% 0 50% 0;效果：
<style>
div{
width:100px;
height: 100px;
background-color: pink;
border:1px red solid;
}
div.out{
background-color: purple;
width: 600px;
height: 300px;
display: flex;
flex-direction: row-reverse;/*row/row-reverse*/
/* flex-wrap: wrap-reverse; */
justify-content: space-around;
}
.x{
width: 100px;
height: 100px;
background-color: antiquewhite;
border:2px solid red;
border-radius: 50% 0 50% 0;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="out">
<div class="x">1</div>
<div class="x">2</div>
<div class="x">3</div>
</div>
</body>表格：
网页元素中，类似于下面的，都属于表格处理
基本标签使用：
table标签:表格最外层元素的定义
tr标签:定义一行
td标签:定义单元格
th标签:表头的单元格，默认文字居中加粗
caption标签:表格的标题
thead、tbody、tfoot是表格语义化，来标识表头、表身、表脚部分，没有实质意义
<body>
<table border="1" width="300" cellspacing="0" cellpadding="10">
<caption>NBA排名</caption>
<thead>
<tr>
<th>球队</th>
<th>排名</th>
</tr>
</thead>
<tr>
<td>
内容1
</td>
<td>
内容2
</td>
</tr>
<tr>
<td>
内容3
</td>
<td>
内容4
</td>
</tr>
</table>
</body>
表格样式的处理
<style>
table,td,th{
border: 1px black solid;
border-collapse: collapse;/*边框塌陷的问题*/
text-align: center;
padding: 10px;
}
table{
margin: 0 auto;
width: 300px;
}
.g{
background-color: rgb(90, 89, 89);
}
</style>
</head>
<body>
<table>
<caption>NBA排名</caption>
<thead class="g">
<tr>
<th>球队</th>
<th>排名</th>
</tr>
</thead>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr class="g">
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>合计</td>
<td>数量</td>
</tr>
</table>
</body>表格的合并
跨占列：
colspan
<body>
<table>
<tr>
<td colspan="4">11</td>
<td colspan="4">22</td>
</tr>
<tr>
<td colspan="2">33</td>
<td colspan="2">44</td>
<td colspan="2">55</td>
<td colspan="2">66</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</table>
</body>
跨占行：
rowspan
<body>
<table>
<tr>
<td rowspan="4">A</td>
<td rowspan="2">B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
</table>
</body>