HTMLCSS--使用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

怪异盒模型的使用：呼吸灯

<!DOCTYPE html>
<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中引用*/
<span class="iconfont icon-aixin"><span>

其他规则

属性	属性值
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

动画案例的实现：

<!DOCTYPE html>
<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	适用所有的设备
print	适用于打印用纸或打印预览视图
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代替