web前端小记20201216

布局

• 大部分布局都使用div标签块来进行分割调整，div可以加上class类选择器进行样式添加，将样式封装起来可以进行复用而且修改时只需要改一处即可。
• 最好能进行多层div嵌套使用，但也不能过多嵌套。
• class类选择器的命名，导航栏head，banner，内容container，页脚bottom；命名时最后使用下划线（_），因为中划线（-）是很多开源CSS文件使用的命名规则可能会与自己的命名重复造成样式覆盖，命名时都是小写即可使用下划线分开。

<div class="container">xxx</div>

<style>
.container {
     width: 1000px;
	 margin: 0 auto; // 相对div内部居中
}
</style>

标签

• 常用的标签有form表单 、列表、超链接等

CSS样式

样式添加位置

• 使用style对样式进行设定时，最好不要再标签上添加style，会给修改造成很大的工作负担，最好将样式都写进CSS文件中，打成CSS文件进行统一修改

居中

• 最大的布局div内部内容居中
  使用margin来进行居中操作，因为相对最大的div来说是不会有很大改动的

.container {
     width: 1000px;
	 margin: 0 auto; // 相对div内部居中
}

• 内部小布局div的内容居中操作
  内部居中如果使用margin来进行居中操作的话，他的margin-top、margon-left等会失效，所以使用盒子相对布局来进行对盒子内部的居中，进行居中操作的话需要设定盒子的宽高，否则盒子里内容的宽高就是盒子的宽高

.container {
   height: 500px;
   display: flex; // 相对布局
   display: -webkit-flex; // 两个结合一起使用,兼容浏览器
   flex-direction: row; // 默认方向：横向，可以改为纵向：column
   justify-content: center; // 横向居中，根据方向变化
   align-items: center; // 纵向居中
}