@规则(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>
运行效果
浮动的细节规则
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动