CSS学习
十四.定位
9.固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position: fixed;
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置->已脱标
应用场景：让盒子固定在屏幕的某个位置
10.定位小结
11.元素的层级关系
不同布局方式元素的层级关系：定位>浮动>标准流
不同定位之间的层级关系：相对，绝对，固定默认层级相同，写在HTML下面的元素层级高
12.更改元素层级
场景：改变定位元素的层级
属性名：z-index
属性值：数字，数字越大，层级越高
十五.装饰
1.垂直对齐方式
（1）基线
基线：浏览器文字类型元素排版中存在用于对齐的基线
行内块元素，默认基线对齐，图片默认与文字的基线对齐
（2）垂直对齐方式
属性名：vertical-align
| 属性值 | 说明 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
（3）vertical-align应用场景
- 文本框和表单按钮无法对齐问题
- input标签和img标签无法对齐
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，img标签无法贴底
- 使用line-height让img标签垂直居中问题
2.光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
| 属性值 | 说明 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
3.边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px，百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
应用
- 画一个正圆：border-radius:50%(盒子为正方形)
- 胶囊按钮:border-radius:盒子高度的一半(盒子为长方形)
4.overflow溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示，隐藏，滚动条…
属性名：overflow
| 属性值 | 说明 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
5.元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：hover之后元素隐藏
常见属性：visibility: hidden，display: none
区别：
- visibility: hidden隐藏元素本身，并且在网页中占位置
- display: none隐藏元素本身，但在网页中不占位置
注意点：开发中经常会通过display属性完成元素的显示隐藏切换(display: none<->dispaly: block)
e.g. : .father:hover .son{display: block}
6.元素整体透明度
属性名：opacity
属性值：0~1之间的数字（1为完全不透明，0为完全透明
注意点：opacity会让元素整体变透明，包括里面的内容，如：文字，子元素等
7.边框合并
代码：border-collapse: collapse;
8.用CSS画三角形（面试）
实现原理：用盒子边框完成（边框实际是个梯形）
实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个，将其它三角形（边框）设置颜色为透明
9.用CSS画任意三角形
原理：通过改变border-top(上边框宽度),border-right(右边框宽度),border-bottom,border-left实现
十六.伪类选择器
1.链接伪类选择器
场景：选中超链接的不同状态
| 选择器语法 | 说明 |
|---|---|
| a:link{} | 选中a链接未访问过的状态 |
| a:visited{} | 选中a链接访问之后的状态 |
| a:hover{}（多） | 选中鼠标悬停的状态 |
| a:active{} | 选中鼠标按下的状态 |
注意点：如果需要实现四种伪类状态效果，书写顺序建议为lvha
2.焦点伪类选择器
场景：选中元素获取焦点时的状态，常见用于表单控件
选择器语法：input:focus{css}
效果：表单控件获取焦点时会默认显示外部轮廓线
3.属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择input标签
| 选择器语法 | 说明 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=“val”] | 选择具有attr属性并且属性值等于val的E元素 |
十七.精灵图
1.精灵图
场景：项目中将多张小图片合成大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器压力，提高页面的加载速度
使用步骤
- 创建一个盒子
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y
2.背景图片大小
语法：background-size: 宽度 高度;
| 取值 | 说明 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子 |
| cover | 覆盖，将图片等比例缩放，直到刚好填满整个盒子没有空白 |
3.background连写拓展
完整连写：background: color image repeat position/size;
注意点：background-size和background连写同时设置时可能会覆盖
解决方法：将background-size写在background连写的下面 或写在连写的里面
4.文字阴影
属性名：text-shadow
| 取值 | 说明 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
e.g. : text-shadow: 10px 10px 5px red;
拓展：阴影可以叠加设置，每组阴影通过逗号隔开
5.盒子阴影
属性名：box-shadow
| 取值 | 说明 |
|---|---|
| h-shadow | 必须，水平偏移量 |
| v-shadow | 必须，垂直偏移量 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
| spread | 可选，阴影扩大 |
| inset | 可选，将阴影改为内部阴影(扩张到图片内部) |
6.过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
| 取值 | 说明 |
|---|---|
| all：所以能过渡的属性都过渡或width：只有width有过渡 | 过渡的属性 |
| 数字+s(秒) | 过渡的时长 |
注意点：
- 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有
十八.项目前置认知
1.网页与网站的关系
网页：相当于每页纸
网站：相当于一本书
网页是网站的每一页
网站是提供特定服务的一组网页集合
2.骨架结构标签
<!DOCTYPE html>文档声明类型，告诉浏览器该网页的HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
<html lang=“en”>标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文，en英文
<meta charset=“UTF-8”>标识网页使用的字符编码
作用：保存和打开的字符编码需要统一，否则会乱码
常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+汉字
- GBK：20000+汉字
注意点：开发中统一使用UTF-8字符编码即可
3.SEO三大标签
SEO：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
SEO三大标签：
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
4.有语义的布局标签
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
5.ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：<link rel=“shortcut icon” href=“ico图标路径” type=“image/x-icon”>
6.版心
场景：把网页的主体内容束缚在网页中间
作用：让不同大小的屏幕都能看到网页的主体内容
代码：.container{width: 1240px; margin: 0 auto;}
注意点：版心类名常用：container，wrapper，w等
7.CSS书写顺序
| 顺序 | 类别 | 属性 |
|---|---|---|
| 1 | 布局属性 | display,position,float,clear,visibility,overflow |
| 2 | 盒子模型+背景 | width,height,margin,padding,border,background |
| 3 | 文本内容属性 | color,font,text-decoration,text-align,line-height |
| 4 | 点缀属性 | cursor,border-radius,text-shadow,box-shadow |
注意点：开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个
十九.项目结构搭建
1.文件和目录准备
2.基础公共样式
场景：一般项目开始时，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便项目后续开发
代码例子：
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
/* 默认有边距，都要清除 /
margin: 0;
padding: 0;
/字体设置/
font-size: 14px;
font-family: “Microsoft Yahei”,sans-serif;
color: #ccc;
/ 去掉列表的原点 /
list-style: none;
/ 默认鼠标 */
cursor: default;
}
/可选/
html,body{
width: 100%;
height: 100%;
font-size: 100px!important;
}
/行内块元素/
input,img{
margin: 0;
padding: 0;
border: 0 none;
outline-style: none;
vertical-align: bottom;
}
/行内元素/
a,a:active,a:visited{
/下划线和颜色/
text-decoration: none;
color: #ccc;
}
a:hover{
color: #333;
}
textarea{
/* 边框清零 /
border: none;
/ 轮廓线清零 /
outline: none;
/ 防止文本域被随意拖拽 */
resize: none;
}
i{
/文字样式/
font-style: normal;
}
table{
/边框合并/
border-collapse: collapse;
border-spacing: 0;
}
/* 设置左右浮动 */
.f_l{
float: left;
}
.f_r{
float: right;
}
/* 使用伪元素清除浮动 */
.clearfix::before,
.clearfix::after{
content: “”;
height: 0;
line-height: 0;
display: block;
visibility: none;
clear: both;
}
/* 设置定位 */
.p_a{
position: absolute;
}
.p_r{
position: relative;
}
/* 版心*/
.container{
width: 1883px;
margin: 0 auto;
}
/可选/
/单选框和复选框的配置，一般是分开的/
input[type=“radio”],input[type=“checkbox”]{
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
label{
display: inline-block;
cursor: pointer;
}
label input[type=“radio”]+span,label input[type=“checkbox”]+span{
width: 16px;
height: 16px;
display: inline-block;
background: url(“…/images/nocheck.png”) no-repeat;
}
label input[type=“radio”]:checked+span,label input[type=“checkbox”]:checked+span{
background: url(“…/images/check.png”) no-repeat;
}
label input[type=“radio”]:checked~i,label input[type=“checkbox”]:checked~i{
color: #38d6ff;
}
/可选/
/* 自定义数字框配置 */
input[type=“number”]{
width: 76px;
height: 36px;
background-color: rgba(5,45,82,0.4);
border: 2px solid #ccc;
border-radius: 4px;
color: #fff;
font-size: 20px;
padding: 0 10px;
}
input[type=“number”]::-webkit-inner-spin-button{
-webkit-appearance: none;
}
input[type=“number”]+div{
width: 30px;
height: 40px;
padding-left: 2px;
cursor: pointer;
}
input[type=“number”]+div > .count_add{
display: block;
width: 28px;
height: 19px;
background: url(“…/images/count_add.png”) no-repeat;
background-size: contain;
margin-bottom: 2px;
}
input[type=“number”]+div > .count_subtract{
display: block;
width: 28px;
height: 19px;
background: url(“…/images/count_subtract.png”) no-repeat;
background-size: contain;
}
3.index页面骨架设置
4.header部分开发（common）
建议类名：xxx-shortcut：快捷菜单，xxx-main-nav：主导航
对于主导航的logo部分，建议用h1标签包裹
5.footer部分开发（common）
建议类名：xxx-service：宣传服务，xxx-copyright：版权信息，xxx-contact：联系方式
6.entry网站入口模块（index）
建议类名：banner：轮播图(焦点图)，category：分类侧边栏
CSS进阶
一.字体图标
1.基本使用
iconfont：阿里巴巴提供的矢量图标库
方法：
- 下载css样式表
- 引样式表：<link rel=“stylesheet” href=“iconfont.css文件的路径如：./iconfont/iconfont.css”>
- 调类名：e.g.：<i class=“iconfont 某个矢量图的类名如：icon-favorites-fill”></i>
2.iconfont类
所有iconfont的图标都属于iconfont类
修改使用的iconfont的图标：.iconfont{css}或直接设置类，直接修改标签样式
3.svg-上传矢量图
若图标库没有所需图标：
- 与设计师沟通，得到svg矢量图
- iconfont网站上传图标，下载使用
二.平面转换
1.介绍
平面转换：改变盒子在平面内的形态(位移，旋转，缩放)，2D转换
平面转换属性名：transform
2.平面转换-位移
语法：transform: translate(水平移动距离, 垂直移动距离);
取值：数字+px或百分比
注意点：
- 正负均可
- 百分比取盒子自身的长度的百分比
- x轴正方向向下
- y轴正方向向下
3.位移-技巧
translate()如果只给出一个值，只水平移动
单独设置某个方向的移动距离：translateX() & translateY()
4.平面转换-定位盒子居中
使用translate快速实现绝对定位的元素居中：
transform: translate(-50%, -50%);
本周demo
代码部分：
html部分：
css部分：
效果呈现：
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
