盒子就是把网站分割成一小块一小块的吧，然后方便移动或者管理
布局属性
所谓的布局就是依靠css布局让html元素，可以按照UI设计师提供的设计稿进行HTML网页的内容排版并实现页面的布局效果。
布局的学习关键就是：1. 布局方式，2. 盒模型，3. css样式。
css中提供了4种布局方式：分别是流式布局（默认方式），浮动布局，定位布局，弹性布局（伸缩盒）。
布局属性
表格相关
border-spacing 合并边框
列表相关
list-style: 列表
元素显示模式
display:
inline 设置当前元素为行内元素
block 设置当前元素为块级元素
inline-block 设置当前元素为行内块级元素
none 设置当前元素为隐藏元素
元素浮动相关[让元素脱离文档流，在浮面上进行排版]
float:
left 设置当前元素基于浮面进行靠左浮动
right 设置当前元素基于浮面进行靠右浮动
none 设置当前元素不进行浮动
clear:
left 清除左边浮动带来的影响
right 清除左边浮动带来的影响
both 清除两边浮动带来的影响
overflow: 溢出内容处理
hidden 溢出隐藏
auto 自动显示滚动条
scoll 不管是否溢出，固定显示滚动条
元素定位相关
position 设置元素指定类型的定义元素
static 默认值，不进行定位处理
relative 相对定位，设置当前元素基于当前自身所在位置进行定位处理
absolute 绝对定位，设置当前元素基于父级定位元素进行定位处理
注意：如果当前元素的父元素没有设置定位，则往外需要更外层的父级定位元素进行定位，最终直到body元素，就参考body进行定位了
fixed 固定定位，设置当前元素基于浏览器窗口进行定位处理
默认情况下，只要元素设置了定位(绝对和固定)，都会脱离文档流，被浏览器排版到浮面上，其中相对定位因为需要基于自身原来位置进行定位，所以相对定位的元素原有的占位空间不会被回收，其他的定位都会被回收位置。
top 设置元素当前距离参考目标的上边距离
bottom 设置元素当前距离参考目标的下边距离
left 设置元素当前距离参考目标的左边距离
right 设置元素当前距离参考目标的右边距离
注意：一般情况下，设置了top就不要设置bottom，设置了left以后就不要设置right,除非特殊用途
z-index 设置定位元素的深度
弹性布局【flex布局】界面效果相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
<title>Title</title> <!-- 设置文档标题 -->
<style>
.box{ <!-- 定义一个类选择器，用于设置盒子样式 -->
width: 200px; <!-- 设置盒子宽度为200像素 -->
height: 200px; <!-- 设置盒子高度为200像素 -->
background: red; <!-- 设置盒子背景颜色为红色 -->
cursor: pointer; /* 爪子 */ <!-- 设置鼠标悬停在盒子上时的鼠标样式为手型 -->
}
input[type="text"]{ <!-- 定义一个属性选择器，用于设置文本输入框样式 -->
/*outline: 1px solid red;*/ <!-- 设置文本输入框的轮廓为1像素红色实线 -->
outline: none; <!-- 去掉文本输入框的默认轮廓 -->
}
textarea[name="desc"]{ <!-- 定义一个属性选择器，用于设置文本域样式 -->
width: 200px; <!-- 设置文本域宽度为200像素 -->
height: 80px; <!-- 设置文本域高度为80像素 -->
resize: none; /* 禁止 */ <!-- 禁止用户调整文本域的大小 -->
}
</style>
</head>
<body>
<!--<div class="box"></div>--> <!-- 创建一个盒子元素 -->
<!--<input type="text"><br>--> <!-- 创建一个文本输入框元素 -->
<textarea name="desc" id=""></textarea> <!-- 创建一个文本域元素 -->
</body>
</html>
弹性布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
这种布局方式是把HTML网页中每一个元素都看成1个能够进行自由伸缩的盒模型。
任何一个html元素都可以指定为 Flex 盒模型
.box{
display: flex; // 行内元素也可以通过 display: inline-flex; 设置为flex盒模型
}注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
flex-direction: 这个属性用于指定 flex 容器中的主轴方向
flex-wrap: 这个属性用于控制 flex 容器中的 flex 子项是单行还是多行显示
flex-flow: 这个属性它允许同时设置主轴方向和 flex 子项换行的行为
justify-content: 这个属性用于控制 flex 容器中 flex 子项在主轴方向上的对齐方式
align-items: 这个属性用于控制 flex 容器中 flex 子项在交叉轴方向上的对齐方式
align-content: 这个属性用于控制多行的 flex 容器中 flex 子项在交叉轴方向上的对齐方式
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
有四个值
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}一共有3个可能的值
nowrap ：不换行
wrap：换行，第一行在上行
wrap-reverse：换行，第一行在下方
flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}justify-content属性
justify-content属性定义了项目在主轴（x轴）上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
一共有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
一共有5个可能的值，具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴
布局属性-表格相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table, tr,th, td{
margin: 0;
padding: 0;
}
table{
width: 400px;
/*border-spacing: 2px; !* 设置单元格之间的间距 *!*/
border-collapse: collapse; /* 合并边框 */
}
tr th{
background-color: rgba(255,0,0,0.2);
border-bottom: 1px solid red;
}
tr td {
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<table>
<tr>
<th>ID </th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>浪潮之巅</td>
<td>99.60</td>
</tr>
<tr>
<td>2</td>
<td>人月神话</td>
<td>85.50</td>
</tr>
<tr>
<td>3</td>
<td>代码之髓</td>
<td>35.50</td>
</tr>
<tr>
<td>4</td>
<td>编程珠玑</td>
<td>25.50</td>
</tr>
</table>
</body>
</html>布局属性-表格相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: #333;
text-decoration: none;
}
a:hover {
color: #0c82ff;
}
ul{
padding: 0;
margin: 0;
list-style: none; /* 去除列表项目符号，改用普通图片或者元素背景来实现项目符号。 */
}
.contest {
width: 440px;
margin: 0 auto;
}
.contest li {
height: 36px;
line-height: 36px;
padding-left: 2rem;
background: url("assets/images/sprites-0.png") no-repeat 0 -489px;
}
</style>
</head>
<body>
<div class="contest">
<ul>
<li><a href="">26年世界杯举办城市：美国11座 墨西哥3加拿大2</a></li>
<li><a href="">9大交易签约动态：哈登将执行选项 湖人追比尔搭档詹眉</a></li>
<li><a href="">门将罕见两失误送礼！长春亚泰0-4惨负山东泰山</a></li>
<li><a href="">心态崩了！亚泰门将一场两次低级失误 将球送进自家球门</a></li>
<li><a href="">英超新赛季8月6日开赛 水晶宫vs阿森纳打响揭幕战</a></li>
</ul>
</div>
</body>
</html>文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, h1, p{
margin: 0;
padding: 0;
}
.article{
width: 1160px;
margin: 0 auto;
}
.article .title{
margin-top: 15px;
color: #333333;
text-align: center;
font-size: 22px;
line-height: 40px;
}
.article .created_time{
font-size: 14px;
color: #999999;
line-height: 32px;
text-align: center;
}
.article content{
font-size: 17px;
line-height: 24px;
color: #666;
}
.article content p{
text-indent: 2rem;
}
.article content img{
width: 50%;
max-width: 50%;
margin-top: 26px;
}
</style>
</head>
<body>
<!-- HTML5.0以后新增的语义化标签：menu，article, content, section等等
https://www.bilibili.com/read/cv16747716
-->
<article class="article">
<h1 class="title">在营销角度下，企业网站优化该怎么做</h1>
<p class="created_time">发布时间：2015-08-30</p>
<content>
<p>从事企业网站优化也有一些年头了，从业的前两年，一门心思只想着把网站排名优化到前面，至于网站的构架，内容、以及用户体验等基本不考虑，后来才慢慢懂得了网络营销是怎么一回事。网站排名是重要，但是做网站优化的最终目的确是为企业网站带来营销价值。如果站在这个更高的角度来看网站优化的话，网站优化就不单单只是排名了。企业网站在营销角度下，我们优化过程中一定要注意的问题。</p>
<img src="assets/images/photo--6.png" alt="">
<p>第一，分析你的目标群体。网络营 销非常关键的一个问题就是网站定位，具体到企业站而言就是我们的目标群体分析，对企业产 品需求的是哪一类群体？群体特征都有哪些？用户年龄段分布情况、身份是工薪阶层还是学生或者是老板？制作一张目标群体分布表。然后根据分布表针对性的分析出他们对于产品的兴趣点所在。那么我们在网站策划、设计以及内容制作的时候，就会有针对性的策略。</p>
</content>
</article>
</body>
</html>元素浮动的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1, .box2, .box3, .box4, .box5, .box6{
width: 400px;
height: 200px;
background: orange;
}
.son1, .son2, .son3, .son4, .son5, .son6{
width: 80px;
height: 80px;
}
.son1{background: gray;}
.son2{background: blue;}
.son3{background: red;}
.son4{background: yellow;}
.son5{background: purple;}
.son6{background: pink;}
</style>
</head>
<body>
<p>box1：正常情况下，网页中2个表示网页一个板块的块级元素是不能在同一行中显示的。</p>
<div class="box1">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
<hr>
<p>box2：元素使用了浮动，就相当于让元素移动到了2楼（此时的元素属于浮动元素，没有使用浮动的元素就是处于1楼的文档流元素）。<br>
各个浮动元素会自动遵循排列先后循序。<br>
如果存在一个浮动元素，另一个文档流元素在同一个父级元素下，则可能出现浮动元素覆盖文档流元素的情况。<br>
被覆盖的文档流元素中如果存在文本内容，则会被溢出</p>
<style>
.box2 .son1{float: right;}
.box2 .son2{float: right;}
.box2 .son3{float: right;}
.box2 .son4{float: right;}
.box2 .son5{float: right;}
/*.box2 .son6{float: right;}*/
</style>
<div class="box2">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
<div class="son4">son4</div>
<div class="son5">son5</div>
<div class="son6">son6</div>
</div>
<hr>
<p>box3：如果多个浮动元素，集体往左浮动，那么所有的浮动元素，从左往右排列，直到满行，重新在第二行从左往右排列</p>
<style>
.box3 .son1, .box3 .son2, .box3 .son3{float: left;}
</style>
<div class="box3">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
<hr>
<p>box4：如果多个浮动元素，集体往右浮动，那么所有的浮动元素，从右往左排列，直到满行，重新在第二行从右往左排列</p>
<style>
.box4 .son1, .box4 .son2, .box4 .son3{float: right;}
</style>
<div class="box4">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
<hr>
<p>box5：如果多个浮动元素，如果占满了一行，后续的元素会被挤到第二行根据自己的浮动方向从新排列。</p>
<style>
.box5 .son1{float: left;}
.box5 .son2{float: left;}
.box5 .son3{float: right;}
.box5 .son4{float: right;}
.box5 .son5{float: right;}
.box5 .son6{float: left;}
</style>
<div class="box5">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
<div class="son4">son4</div>
<div class="son5">son5</div>
<div class="son6">son6</div>
</div>
<hr>
<p>box6：浮动元素排列过程中，如果存在前面的元素是文档流元素，则后续的浮动元素，会在文档流元素的下方排列。</p>
<style>
.box6 .son1{float: left;}
.box6 .son2{float: left;}
.box6 .son4{float: left;}
.box6 .son5{float: right;}
</style>
<div class="box6">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
<div class="son4">son4</div>
<div class="son5">son5</div>
</div>
<hr>
<p>box7：如果子元素全部浮动，而父级元素没有设置高度，则会因为子元素浮动而导致父级元素失去高度。<br>
因为父级元素没有进行浮动，因此还属于文档流元素，因为父级元素在没有高度时需要依靠子元素的内容来支撑高度的。<br>
而子元素被浮动了，与父级元素不在同一层，会导致父级元素无法依靠子元素来进行内容支撑。<br>
此时如要让父元素恢复原有的高度有3种解决方案：<br>
1. 让父元素也浮动起来，这样的话，父子元素都在同一层了，父元素的高度自然恢复<br>
2. 让父元素在末尾追加一个伪对象元素，让这个伪元素使用clear清除浮动给父元素带来的影响，让伪对象元素处于文档流元素中，父元素的高度也会自然恢复。
</p>
<style>
.box7{width: 400px; background: orange;}
.box7 .son1{float: left;}
.box7 .son2{float: left;}
.box7 .son3{float: left;}
/* 第一种解决方案 */
/*.box7{ float:left; }*/
/*第二种解决方案*/
/*.son7::after{*/
/* display: block;*/
/* clear: both; !* 清除浮动给父父元素带来的影响 *!*/
/*}*/
/*第三种解决方案*/
.box7{
overflow: hidden;
/* 溢出文本内容的处理方式，使用这句属性，也可以清除掉浮动元素给当前元素带来的影响。
overflow本身的作用是处理溢出元素范围的文本的隐藏方式，所以浏览器会调用css重新计算当前元素实际需要占据的空间
是多少，这样的话，css会重新计算浮动的子元素的实际占据空间，并提供给当前元素，所以当前元素会恢复原有计算高度。
*/
}
</style>
<div class="box7">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
<div style="height:400px;width:600px;">结束的DIV</div>
</body>
</html>元素的文本内容溢出处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
hello world<br>
</div>
</body>
</html>浮动布局效果--图文排版效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
article{
width: 400px;
}
article .img1{
width: 200px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<article>
<p><img class="img1" src="./assets/images/3f7f689039c6c5b5cbfb6a4c4cae5079.jpeg" alt="">从事企业网站优化也有一些年头了，从业的前两年，一门心思只想着把网站排名优化到前面，至于网站的构架，内容、以及用户体验等基本不考虑，后来才慢慢懂得了网络营销是怎么一回事。网站排名是重要，但是做网站优化的最终目的确是为企业网站带来营销价值。如果站在这个更高的角度来看网站优化的话，网站优化就不单单只是排名了。企业网站在营销角度下，我们优化过程中一定要注意的问题。</p>
</article>
</body>
</html>
![[leetcode] all-nodes-distance-k-in-binary-tree 二叉树中所有距离为 K 的结点](https://img-blog.csdnimg.cn/direct/6d8eceafdb9b46a6888119f7de3829bd.png)
