@规则（at-tule）
at-rule:@规则，@语句，css语句，css指令，翻译很多种叫法
在css 文件中导入另一个css文件
-
import
@import "路径"; 导入另外一个css文件 -
charset
@charset "utf-8"; 告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行
web字体和图标
-
web字体
问题：用户电脑上没有安装相应字体，强制让用户下载该字体 解决：使用@font-face指令 制作一个新字体 例：<style> @font-face{ font-family:"good night"; src:url("./font/晚安体.ttf"); //每个浏览器字体格式可能不一样，需要设计师把所有格式给你 } //使用 p{ font-family:"good night"; } //临时安装，每次打开页面都要重新下载字体，一般用的不多。影响渲染速度。 </style> -
字体图标
开发过程中用在线引入css文件，部署的时候下载文件到本地
iconfont图标网站： 点我点我
-
注册iconfont，选择图标置购物车，打开购物车下载代码
2.在根目录创建一个font文件夹，把下载好的文件复制过去。
3.字体引入<style> @font-face { font-family: 'iconfont'; src: url('../font/iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg#iconfont') format('svg'); //只需要引用这5个文件， } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>4.打开文件里面的demo_index.html文件，点击打开
里面有对应的图标实体字符
5：使用<i class="iconfont">㖺</i>
-
块级格式化上下文
全称Block Formatting Context 简称BFC
他是一块独立的渲染区域，它规定在该区域中，**常规流块盒**的布局
-
常规流块盒在水平方向上，必须撑满包含块。
-
常规流块盒在包含块的垂直方向上依次摆放。（独占一行）
-
常规流块盒若外边距无缝相邻，则进行外边距合并。（margin合并）
-
常规流块盒的自动高度和摆放位置，无视浮动元素。（记得清除浮动）
1.BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
1.根元素，意味着，元素创建的BFC区域，覆盖了网页中所有的元素
2.浮动和绝对定位元素
3.overflow不等于visible的块盒不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部与外部的练习，内部的渲染不会影响到外部具体规则：
1：创建BFC的元素，他的自动高度需要计算浮动元素
<style>
.container{
background: lightblue;
//触发BFC，浮动和绝对定位，overflow不等于visible的块盒
/* position: absolute; */
/* float: left; */
/* 副作用最小的方式，如果单纯的是用来清除浮动，建议还是用clear三件套清除 */
/* overflow: hidden; */
}
.clearfix{
overflow: hidden;
}
.item {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: red;
}
</style>
<body>
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
代码运行效果
2.创建BFC的元素，它的边框盒不会与浮动元素重叠
（就像行级元素可以看到浮动元素的效果一样，触发BFC后会避开浮动盒子，）
这个方法的优点是，可以固定左边，右边盒子宽度自适应。
<style>
.float{
width: 200px;
height: 200px;
margin: 20px;
background: red;
float: left;
}
.container{
height: 500px;
background: #008c8c;
/* bfc */
overflow: hidden;
}
</style>
<body>
<div class="float"></div>
<div class="container"></div>
</body>
运行结果
3.创建BFC的元素，不会和它的子元素进行外边距合并
可以解决mrgin塌陷问题
<style>
.container{
background: #008c8c;
height: 500px;
margin-top: 30px;
overflow: hidden;
}
.child{
height: 100px;
margin: 50px;
background: red;
}
</style>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
运行结果
4.定位元素是完全脱离文档流的，触发bfc对其无效果
<style>
.container{
float: left;
background: #008c8c;
position: relative;
}
.item{
/* float: left; */
position: absolute;
left: 0;
top: 0;
margin: 20px;
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
运行结果
布局
俩栏布局
左边元素设置float：left；右边设置overflow: hidden;使其触发bfc
这样布局 左边定宽，右边可以自适应
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container {
background: lightblue;
width: 90%;
margin: 0 auto;
}
.aside{
float: left;
background: #008c8c;
color: #fff;
width: 300px;
margin-right: 30px;
}
.main{
overflow: hidden;
background: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
lorem1000
</aside>
<div class="main">
lorem1000
</div>
</div>
</body>
运行效果：
三栏布局
左右定宽，中间自适应。需要先把左右浮动元素写在代码的前面，中间区域写在最后。如果公司有要求，主要内容必须写在代码的前面，那么可以用定位处理。
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
padding: 30px;
border: 3px solid;
}
.left {
float: left;
width: 300px;
background: lightblue;
margin-right: 20px;
}
.right {
float: right;
width: 300px;
background: lightblue;
margin-left: 20px;
}
.main{
overflow: hidden;
border: 2px solid;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="left">
lorme1000
</aside>
<aside class="right">
lorme1000
</aside>
<div class="main">
lorme1000
</div>
</div>
</body>
运行效果
浮动的细节规则
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
