HTML&CSS--使用CSS完成页面布局及排版（附案例代码）
CSS简介
CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档的语言，可以将文档以更优雅的形式呈现给用户。
在html中引入css
1、将css规则直接填写在style属性中
<div class="box" style="height: 2000px; background-color: palegreen;">div>
2、将样式嵌入到style标签
<style>
.box {
height: 2000px;
background-color: palegreen;
}
style>
3、将样式写在.css文件中，再通过link将这个文件引入到html中
<link rel="stylesheet" href="../样式.css">
CSS选择器
核心选择器
| 选择器 | 实例 |
|---|---|
| 标签选择器 | div{ } |
| 类选择器 | .nav{ } |
| id选择器 | #id{ } |
| 组合选择器 | body , ul { } |
| 并且选择器 | ul.nav { } |
| 普遍选择器 | * |
层次选择器
| 选择器 | 实例 |
|---|---|
| 父子选择器 | .nav > li { } |
| 后代选择器 | .right_nav li {} |
| 下一个兄弟选择器 | ul>li.one + li |
| 之后所有兄弟选择器 | ul>li.one ～ li |
伪类选择器（过滤器）
- 与状态相关
| 选择器 | 含义 |
|---|---|
| :link | 没有被点击之前 |
| :hover | 鼠标悬浮之后 |
| :active | 被激活 |
| :visited | 已访问过 |
- 与子元素相关
| 选择器 | 含义 |
|---|---|
| :first-child | 第一个孩子 |
| :last-child | 最后一个孩子 |
| :nth-child(n) （n的取值：数字、公式、关键字even，odd） | 第n个孩子 |
伪元素选择器
| 选择器 | 含义 |
|---|---|
| ::after | 在元素之前 |
| ::before | 在元素之后 |
| ::first-letter | 选中文本中第一个字符 |
| ::first-line | 选中第一行 |
属性选择器
| 选择器 | 含义 |
|---|---|
| [name] | 选择具有name属性的元素 |
| [name~=u] | 选择具有name属性,并且属性值之一为u的元素 |
| [name=username] | 选择具有name属性,并且属性值为username的元素 |
| [name^=u] | 选择具有name属性,并且属性值以u开头的元素 |
| [name$=u] | 选择具有name属性,并且属性值以u结尾的元素 |
| [name*=u] | 选择具有name属性,并且属性值包含u的元素 |
优先级
特权：！important
权值：
- 行内样式：1000
- #id：100
- .class类 、伪类：10
- 元素、伪对象：1
盒子样式
针对于块元素讨论盒子样式
| 基本概念 | |
|---|---|
| 边框 | border：1px solid #ccc； |
| 外边距 | margin=10px； |
| 内边距 | padding=10px； |
| 宽度 | width：100px； |
| 高度 | height：100px； |
盒子模型：
| 怪异盒模型 | 传统盒子模型 |
|---|---|
| box-sizing:border-box; | box-sizing:content-box; |
| 盒子所占的宽度 = width（包含了border + padding + 内容实际宽） | 盒子所占的宽度 = border + padding + width |
怪异盒模型的使用：呼吸灯
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>呼吸灯title>
<style>
.outer ,.inner {
border: 2px solid #cccccc;
border-radius: 50%;
}
.outer {
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 20px;
}
.outer:hover {
padding: 40px;
}
.outer > .inner {
height: 100%;
}
style>
head>
<body>
<div class="outer">
<div class="inner">div>
div>
body>
html>
背景规则
| 属性 | 属性值 |
|---|---|
| background-color | pink |
| background-image | url(“图片地址”)、linear-gradient(pink red)、radial-gradient(pink red) |
| background-size | contain、cover、100px 200px（等比例缩放） |
| background-position | center、bottom right、50px 100px（固定位置） |
| background-repeat | repeat、repeat-x、repeat-Y、no-repeat |
| background-origin | border-box、padding-box |
| background-clip | border-box、padding-box |
文本规则
修饰文本样式，具有可继承性
| 属性 | 属性值 |
|---|---|
| text-align | center 、left、right |
| vertical-align | middle 、top、bottom |
| text-indent | 2em |
| line-height | 32px |
| text-transform | lowercase、uppercase、capitalize |
| text-decoration | underline、light-through、overline、none |
| text-decoration-color | pink |
| text-decoration-style | solid、dotted、dashed |
| overflow | visible 、hidden、scroll |
字体规则
修饰字体本身样式，具有可继承性
| 属性 | 属性值 |
|---|---|
| font-family | ‘Microsoft YaHei’,‘微软雅黑’,‘宋体’ |
| font-size | 12px |
| font-weight | normal、bold |
| font-style | normal、italic |
| color | #333 |
网络字体
1、获取字体文体：.woff、.eot、…
2、定义网络字体
@font-face {
font-family: "iconfont";
//字体文件
src: " "
}
3、 使用
/*基础样式*/
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
}
/*特殊样式*/
.icon-aixin:before {
content: "\e8ab";
}
/*在html中引用*/
"iconfont icon-aixin">
其他规则
| 属性 | 属性值 |
|---|---|
| display | block、inline、inline-block |
| list-style | none |
| border-collapse | collapse |
| opacity | .2 |
单位
| 单位 | 属性值 |
|---|---|
| 绝对单位 | 10px |
| 相对单位 | 1em（相对于当前元素的字体大小） |
| 1rem（相对于html选择器中设定的字体大小） | |
| 颜色 | 关键字：pink |
| 十六进制：#ffffff、#000、#f4f4f4 | |
| 函数：rgb(114,141,153) | |
| 函数：rgba(114,141,153,1) |
浮动布局（float）
块元素脱离默认文档流，默认宽度为0，失去了对父元素支撑的能力。在浮动流中，多个同级别浮动元素在一行中显示，当这一行容纳不下，会自动换行。
ul.list > li {
float:left;
}
清理浮动，为容器内部添加一个子元素，一般使用伪元素较方便。
ul.list::after {
content:"";
display:block;
clear:both;
}
盒子居中。
margin:0 auto;
定位布局（position）
relative（相对定位）
- 相对点：该元素在文档流中初始的位置
- 是否脱离文档流：不脱离
- 最佳实践：一般不移动，作为相对点
.box {
position: relative;
left: 100px;
top: 200px;
}
absolute（绝对定位）
- 相对点：距离它最近的父定位元素，如果没有父定位元素，就相对于浏览器窗口
- 是否脱离文档流：脱离
.box{
position: relative;
}
.box > .box1 {
position: absolute;
left: 0;
top: 0;
}
fixed（固定定位）
- 相对点：浏览器视口，并且不会随着屏幕的滚动而滚动
- 是否脱离文档流：脱离
.box{
position: relative;
}
.box > .box1 {
position: fixed;
left: 50%;
margin-left: -150px;
}
sticky（粘性定位）
- 结合了相对定位和固定定位功能于一体，达到阈值之后是固定定位
.box {
float: right;
position: sticky;
top: 40px;
}
伸缩盒布局（flex）
作用：与浮动布局类似，用于将一个容器中多个子元素【块元素】在一行中多列排列。常用于响应式布局（移动端）
概念：
- 子元素都是沿着主轴来排列的，主轴由flex-direction定义，row-x；column-y
- 一般建议给容器添加宽高，子元素在容器中排列
ul{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
ul > li{
flex:1;
}
响应式布局
- PC端
- 类似于腾讯视频，容器的宽度随着屏幕的分辨率大小的改变而改变
- 纯响应式(与mobile兼容)，完全兼容移动的设备
- mobile端
- 不要给容器【块元素】指定宽度，让他默认为100%，因为手机型号不同，宽度不同
- 子元素【列元素】宽度使用相对单位,百分数
栅格布局（bootstrap）
多页面程序：（jquery + bootstrap）
单页面程序：教务系统（vue vuex vueRouter elementui【组件库】）
bootstrap：
- 全局样式的重置
- 布局规则：栅格系统
- 样式：表格、列表、表单…
- 组件：模态框、轮播图、轮子（框架）
bootstrap3 ：栅格布局使用float
bootstrap4 ：栅格布局使用flex
布局的使用：引用bootstrap.css【cdn】链接：https://cdnjs.com/
动画（animation）
关键帧定义
@keyframes 动画名称 {
from{
margin-left: 0;
}
to{
margin-left: 100px;
}
}
动画属性设定
| 属性 | 属性值 |
|---|---|
| animation-name | 动画名称 |
| animation-duration | 10s、10000ms |
| animation-delay | 10s、10000ms |
| animation-timing-function | linear、steps、ease、ease-in… |
| animation-direction | alternate、reverse、alternate-reverse |
| animation-iteration-count | infinite、n |
| animation-fill-mode | forwards、backwards、both |
| animation-play-state | paused |
打开动画库网页时可能出现白屏
- 加强服务器
- faster mini：图片压缩、图片合并、cdn加速（将库【iconfont、】放到cdn服务器 ）
使用动画库
- 获取cdn连接
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
- 使用class
- 基础规则：animate__animated
- 特殊规则：animate__pulse
动画案例的实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猪八戒title>
<style>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: -1600px;
}
}
.box {
width: 200px;
height: 180px;
overflow: hidden;
margin: 100px auto;
}
.box > img {
animation-name: move;
animation-timing-function: steps(8);
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
style>
head>
<body>
<div class="container">
<div class="box">
<img src="../image/猪八戒.png" alt="">
div>
div>
body>
html>
过渡（transition）
过渡属性设定
| 属性 | 属性值 |
|---|---|
| transition-property | all |
| transition-duration | 2s |
| transition-timing-function | linear、steps（）、ease |
| transition-delay | 0s |
过渡的实现：
.box{
width: 300px;
height: 300px;
transition: all 2s linear;
}
.box:hover {
width: 400px;
}
变形（transform）
变形属性设定
| 变形 | 属性值 |
|---|---|
| 缩放（scale） | scale(2)、scale(0.5,2) |
| 旋转（ rotate ） | rotate、rotateX、rotateY(45deg) |
| 倾斜（skew） | skew、skewX、skewY(30deg) |
| 移动（translate） | translate、translateX、translateY(10px) |
变形的实现：
.box:hover > .box1 {
/*transform-origin 用于指定一个元素变形的原点*/
transform-origin: top left;
transform: scale(2);
}
媒体查询
CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。
| 媒体类型 | 介绍 |
|---|---|
| all | 适用所有的设备 |
| 适用于打印用纸或打印预览视图 | |
| screen | 适用于电脑/手机/平板等智能设备屏幕 |
| speech | 适用于语音合成器 |
| Tv | 电视设备 |
通过以下代码简单认识一下媒体查询是如何进行的。
.products {
width: 990px;
margin: 0 auto;
}
.products > ul > li {
width: 19.5%;
height: 100px;
}
@media screen and (min-width: 1300px) {
.products {
width: 1200px;
}
.products > ul > li {
width: 16.5%;
}
}
@media screen and (min-width: 1500px) {
.products {
width: 1400px;
}
.products > ul > li {
width: 14%;
}
}
css3中常用的@语法
@charset：用于提示css文件使用的编码方式，必须在最前面使用
@import：用于引入一个css文件，除了@charset规则不会被引入，可以引入一个文件的全部内容。
@media：能对设备的类型进行一些判断，在media的区块中，是普通规则列表
@page：用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。
@counter-style：产生一种数据，用于定义列表项的消息
@key-frames：产生一种数据，用于定义动画关键帧
@fontfacce：定义一种字体，icon-font技术就是利用这个特性实现的
@support：检查环境的特性，它与media类似
@namespace：用于跟xml命名空间配合的一个规则，表示内部的css选择器全都带上特定的命名空间
@viewport：用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被heml的meta代替