目前学习关于css3的相关内容
css3
层叠样式表
1) 在html中应用
css嵌入到html的头部的style标签内
css嵌入到元素style属性内
css规则与html结构分离（解耦）
高内聚低耦合
css规则可以复用
css单独写入到.css文件，通过link引入到html2) 语法
注释： /* 注释内容 */ 唯一注释表示
语法：
选择器 {
样式规则 每一条规则后加分号(;)
}
.box {
background-color:lightcoral;
color: #fff;
width: 300px;
margin-bottom: 1em;
}
3) 选择器
1. 核心选择器
id选择器 利用了html元素的id属性，唯一
#one {} 选中id为one的元素
class选择器 利用html元素的class属性，非唯一
.box {} 选中class为box的元素
标签选择器 利用标签名进行选择
div {} 选中所有的div元素
并且选择器
div.box {} 选中div元素，并且这个div的class为box
和选择器
div,.box{} 选中div元素和class为box的元素
普遍选择器
* {} 选中所有元素id选择器 > class选择器 > 标签选择器 > 普通选择器
2. 层次选择器( 两个选择器配合使用)
子选择器 通过父元素选择子元素 最多4层
>
eg： 只有class="menu"下的两个li.menu > li {}后代选择器
空格
eg： 所有li.menu li {}<ul class="menu"><li></li><li><ul><li></li><li></li></ul></li></ul>兄弟选择器 (不包括当前元素)
~ 当前元素之后的所有兄弟
eg： 第二个li之后的所有liul.rank > li:nth-child(2) ~ *{}+ 当前元素之后的下一个兄弟
eg： 第三个liul.rank > li:nth-child(2) + *{}3. 属性选择器(属性过滤器)，一般应用在表单元素
input[name] //具有name属性input元素 input[name='username'] //具有name属性，并且name属性值为username的input元素 input[name^='u'] //具有name属性，并且name属性值以'u'作为开始 input[name*='u'] //具有name属性，并且name属性值包含'u' input[name$='u'] //具有name属性，并且name属性值以'u'作为结尾4. 伪类选择器(伪类过滤器)
:first-child 第一个孩子:last-child 最后一个孩子:nth-child(n) 第n个孩子节点 :visited 访问过的:hover 光标悬浮上去:active a标签:focus 聚焦5. 伪元素选择器
1） ::afterul.menu::after { }在class为menu的ul元素中追加一个子元素<ul class="menu"><li>one</li><li>two</li>::after</ul>2） ::beforeul.menu::before { }在class为menu的ul元素中插入一个子元素<ul class="menu">::before<li>one</li><li>two</li></ul>4) 计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。1. 权重（积分）
1000 style
100 id
10 class、伪类
1 元素选择器、伪元素/*1+10 + 1 + 10 + 1+ 10 + 1*/
ul.menu > li.menu_item > ul.sub_menu > li {
color: lightcyan; /* 34*/
}
#introduce {
color:lightcoral /*100*/
}
2. 顺序（排名）
当权重值相同的情况下，后者覆盖前者
3. 特权（!important）
脱离了权重和顺序规则
.si {
color: gray !important;
}
5) 样式规则
1. 字体规则
可被继承font-family 字体字体栈 "Microsoft YaHei","宋体"在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体 font-size 字体大小 12px font-weight 字体粗细程度 100~900 bold 等价于700 bolder 比继承的字体更粗一些 font-style 是否是斜体 italic 斜体 normal 正常 color 字体颜色 line-height 行高长度的相对单位
1px 像素
em 相对于当前元素上的字号
rem 相对于根元素上的字号font 速写形式
font: font-style font-weight font-size/line-height font-familyfont: normal normal 14px/1.2 '宋体','微软雅黑'; ---------字体之间用逗号
font: 14px/1.2 '宋体','微软雅黑'; --------ont-style font-weight可以省略
网络字体(iconfont)
应用
分析实现过程
@font-face {
font-family:"iconfont"
src:
}
eg:
.iconfont {
font-family:"iconfont"
}
.icon-Backward-Button:before {
content: "\e82e";
}
2. 文本规则text-align 文本在容器中显示方式centertext-decoration-line 文本装饰的线underline 下划线overline 上划线line-through 穿过文字的线 text-decoration-style 线的类型double 双划线dotted 虚线text-decoration-color 线的颜色text-decoration: none; -------常用，取消默认线的样式text-indent 缩进text-transform 控制大小写 -----只针对英文text-shadow 阴影3px 3px 1px gray -------水平方向 垂直方向 模糊半径 颜色white-space 容器内的文本是否会主动换行nowrap 不换行overflow 容器内的内容超出部分如何处理hidden 超出部分隐藏scroll 超出部分产生滚动条text-overflow 文本超出部分如何显示提示ellipsis 以'...'形式表现3. 列表规则
用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
list-style:none;
4. 其他规则
cursor: pointer; 光标形状为手型 help 出现问号visibility:hidden 隐藏元素，实际占用空间opacity:0.2 设置透明度，范围为0~1，实际占用空间display:改变元素的显示方式none 隐藏元素，不占用空间block 将行内元素转换为块元素 行内元素不能指定宽高inline 将块元素转换为行内元素inline-block 行内块元素与其他行内元素共享一行空间可以指定宽高overflow:容器，容器的内容的大小超过容器本身overflow-x,overflow-y 速写overflow:hidden; 多余部分隐藏，不显示overflow:scroll; 多余部分使用滚动条进行显示overflow:auto; 内容小于父容器时，显示正常；内容大于父容器时，显示滚动条outline外圈线框outline-color: pink; outline-width: 2px;outline-style: solid;outline-offset: 1px;outline:
5. 盒子规则
盒子 - 块元素margin 外边距（盒子外边框距离其他元素的距离）margin: 10px; 上右下左margin: 10px 20px; 上下，左右margin: 10px 20px 30px; 上 左右 下margin: 10px 20px 30px 40px; 上 右 下 左速写形式，外边距，上下外边距会进行重叠margin-topmargin-rightmargin-bottommargin-leftborder 边框border-width 宽度border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-style 样式border-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-color 颜色border-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder 速写border: 2px solid #ccc; border-width border-style border-color; padding 内边距(内容距离盒子内边框的距离)padding: 10px; 上右下左padding: 10px 20px; 上下，左右padding: 10px 20px 30px; 上 左右 下padding: 10px 20px 30px 40px; 下 右 下 左速写形式，外边距，上下外边距会进行重叠padding-toppadding-rightpadding-bottompadding-left width/height宽高
box-sizing(盒子模式)
内容盒子（普通盒子 ， 默认盒子） width = 内容宽
content-box;
盒子实际占据的宽度 2borderWidth + 2padding + width
盒子实际占据的高度 2borderWidth + 2padding + height
边框盒子（怪异盒子 ie低版本）
border-box;
盒子实际占据的宽度 :width
width = 2borderWidth + 2padding + 内容宽 ------宽度一定，边框变大，内边距变大，则内容宽度一定变小
盒子实际占据的高度 :height
6) 默认文档流 （y轴）
块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列
7. 浮动布局（x轴）
float:left
浮动元素：
1) 脱离文档流
2) 块元素的宽度不再是100%，由内容决定
3) 块元素不再支撑其父元素
4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
clear 清理浮动
left 不与左浮动元素在同一水平线上
right 不与右浮动元素在同一水平线上
both 两边都不允许有浮动 -----更常用
8. 伸缩盒布局（x轴）
div.container > div
ul.container > li
1) 概念
伸缩盒容器 div.container 、ul.container
伸缩盒元素 div、li
主轴 默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
2) 规则
伸缩盒容器
display:flex;
强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
flex-direction:row;
定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
flex-wrap:nowrap
当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
align-items: stretch;
定义伸缩盒容器中的子元素在交叉轴上的排列方式
justify-content:space-around;
定义伸缩盒容器中的子元素在主轴上的排列方式
伸缩盒元素
flex-basic: 主轴上的基础长度（基本工资）
flex-grow: 主轴上剩余空间分配的份数（分红）
flex-shrink: 主轴上亏损空间的分摊份数（亏损）
9. 定位布局(z轴)
position:
static 静态（默认、非定位元素）
relative 相对（定位元素）
absolute 绝对（定位元素）
fixed 固定（定位元素）
sticky 粘滞（定位元素）
定位元素的特点: 可以使用定位规则。top right bottom left
1) 相对定位 relative
1. 不脱离文档流
2. 相对于它原来所在位置移动
2) 绝对定位 absolute
1. 脱离文档流
2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动
一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用
3) 固定定位 fixed
1. 脱离文档流
2. 相对于浏览器视口进行定位
4) 粘滞定位 sticky
1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）
2. 通过left、top、right、bottom来设定阈值定位布局的应用：
1. 二级栏目
2. 模态框
3. 特殊布局
7) 动画
设计师；美工；前端（实现）
动态网站（具有动画 错误！）数据是动态的。
1) 实现步骤
1. 定义动画帧
@keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}@keyframes 动画名{
0% {
// 开始帧
}
20% {}
...
100% {
// 结束帧
}
}
2. 设定动画（贺卡）animation-name: move;动画名animation-duration: 2s;持续时间animation-timing-function: linear;时间曲线函数（自由落体，贝塞尔曲线）animation-fill-mode:forwards;填充模式，动画结束后保留哪一帧规则animation-iteration-count: 2; 动画迭代次数 infiniteanimation-direction: alternate-reverse; 动画执行的方向 from->to , to->fromanimation-play-state: paused;动画状态animation-delay: 1s;延迟时间animation: move 2s 1s 2 linear; 名称 持续时间 延迟时间 迭代次数 时间函数 -----没有固定位置，还可以加
动画的速写形式
2) 案例（呼吸灯）
3) 案例（梦幻西游）
11. 动画库 animate.css
动画帧、动画设定规则都有第三方完成，我们直接使用class即可
1) 引入动画库
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
2) 使用
1. 直接调用动画设定类
<div class="box animate__animated animate__infinite animate__bounce"></div>
2. 引用关键帧
<style>
.bounce {
animation: flash 10s linear infinite;
}
</style>
<div class="box bounce"></div>
12. 过渡
过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。
一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）transition-property: width;过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性transition-duration: 2s;过渡持续时间transition-delay: 0;过渡延迟时间transition-timing-function: linear;时间曲线函数transition:transform,background-color 2s,2s 0s linear; -----没有固定位置
速写形式
13. 变形
transform:变形函数
1. 缩放
scale(2)
2. 平移
translate(100px,50px)
3. 旋转
rotate(360deg)
4. 拉伸
skew(45deg)
8) 媒体查询（响应式布局）
pc、 pad 、phone (中小型网页)
一套网页(pc、pad、phone)网易严选（非响应式）
pc 定宽
mobile 响应式
腾讯视频 （半响应式）复杂，to-c
pc (响应 ：4k 2k 1080p 普通) https://v.qq.com/
1. 定宽？ 1190px (淘宝)
2. 非定宽（响应 4k 2k 1080p 普通）
mobile (响应) https://m.v.qq.com/
newbalance (全响应)中国、汇智网
pc、mobile - 简单，小众
https://www.newbalance.com.cn/
https://www.newbalance.com.cn/黑话：
to-C client 个人（抖音、淘宝、京东）互联网
to-B business 企业级
to-G 政府 学校/政府 - 监控终端、大屏、二手房交易网、健康码1. 如何实现
1) 非响应式
2套
- pc
1190px 宽度写死 400px 700px
- mobile(响应式)
2) 半响应式
- pc（4k 2k 1080p 普通）
- mobile(响应式) 宽度尽可能使用百分比
3) 全响应式
-pc、mobile (4k 2k 1080 普通 pad phone)
2. 技术
@media 判断媒体类型（屏幕类型）
@media screen and (min-width:900px) and (max-width:1200px) {
/* 当屏幕满足上述条件，执行该代码块内部的css*/
.container {
background-color: pink;
}
}
3. bootstrap中响应式
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
9) 补充样式
verticle-align 行内元素在垂直方向上的排列规则。-------这个规则只能应用于行内元素
1. 前提
盒子中存在多个行内元素
2. 基线
行内元素默认在基线上下排列
网页类型（产品生态）
pc网页 （html5/css3）
火狐 淘宝、网易严选
h5（移动端）网页 (html5/css3)
uc/safari 淘宝、网易严选
app(移动端)
html5、css3 -(ionic webview)
webapp【ios不允许上架，andriod】
混合式开发 原生/h5css3
混合式开发 框架（rn/weex - js）+ mvvm思想（vue）
原生开发语言 android
android/ios 淘宝、网易严选
* 后台管理系统（适配 - 自动适配，响应式vue ）
大屏（特殊屏幕）网页
第三方库(职业技能)
iconfont
字体图标库，原理：网络字体 @font-face() font-family
bootstrap
栅格布局（grid layout，原理：flex、float
animate.css
动画库，原理：animation
目前学习关于css3的相关内容相关推荐
- 学习笔记--Ubuntu优化相关内容
Note from 2014-06-28 20:59:40.126 Ubuntu 优化相关的知识 一.基本知识 1.进程简介 广泛得说,所有在系统中运行的,用于执行各种各样任务的,都是 ...
- 音频处理相关内容学习——自动编码器——变分自动编码器——频谱图
文章目录 概述 一.Approaches And Challenges 生成的声音是什么类型 训练模型使用的是什么特征 原始音频Raw Audio 频谱图Spectrograms 声音生成模型常用的结 ...
- 学习图神经网络相关内容
本周学习情况 本周学习任务: 学习图神经网络相关内容 图基本知识(连通分量.度中心性.特征向量中心性.中介中心性.接近中心性.PageRank.HITS)并使用networkx包简单实践. 学习了相关 ...
- 数据挖掘课程学习——序列模式发现相关内容调研
数据挖掘课程学习--序列模式发现相关内容调研 本次实验完成"序列模式发现"的相关内容调研,主要内容包括:什么是序列模式发现:应用在哪些领域:经典的算法有哪些:应用在怎样的数据上:得 ...
- MMAction2 学习笔记 （一）——骨骼动作识别模型相关内容
MMAction2 学习笔记 (一)--骨骼动作识别模型相关内容 0- 写在前面 好久不用CSDN发东西了,近期研究可以说有进展却又没什么进展,达到方向切换到了动作识别,目前正在实习,具体的内容方向是 ...
- nuxt3.0学习-二、nuxt3.0的请求相关内容、状态管理(useState/Pinia)、cookie管理(useCookie)、token续期
请求相关内容 nuxt3.0提供的多种数据访问 API 上一次是nuxt3.0的安装和约定式的使用 接下来就是使用请求调整,Nuxt3 中提供的多种数据访问 API: $fetch: 使用时机: 首屏 ...
- css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- 学习HTML5+CSS3
目录 一,HTML5学习概述 1,认识HTML5 概述 发展历程 HTML5和HTML4的区别 2,HTML5 的语法与结构 HTML5 标签 HTML5 标签属性 HTML5 文档注释 HTML5 ...
- golang实践LSM相关内容
LSM LSM(log-structured merge-tree)是一种分层,有序,面向磁盘的数据结构,其核心思想是充分了利用了,磁盘批量的顺序写要远比随机写性能高出很多,在计算机科学中,日志结构的 ...
最新文章
- mybatis源码阅读(五) ---执行器Executor
- js 字符串、数值之间的转换
- 第十五天 图【下】（大结局）
- wps图表xy轴颠倒_用EXCEL来搞艺术之图表类型变换
- 网页版bpc电波对时_电波表对时软件下载-BPC(中国码)电波表对时模拟软件 20170308 官方版 - 河东下载站...
- “由于应用程序配置不正确，应用程序未启动。重新安装应用程序可能会纠正这个问题。”解决思路
- ATX电源接口定义及颜色定义 （转载）
- 2021年中国及各省市结婚登记人数、离婚登记人数、结婚率、离婚率、婚姻的正负面效应及政策建议分析[图]
- Kubernetes operators
- 物联网产品的发展简介（二）【产品篇02】
- wi7计算机桌面删除,win7系统删除桌面右键多余选项
- android wight
- Kafka 发送消息 Idempotent
- android hook方法替换,Android Hook入门教程
- flask 返回图片
- python列表增加行_openpyxl追加行、指定位置插入行
- EasyNVR是怎么做到Web浏览器播放RTSP摄像机直播视频延时控制在一秒内的
- Java面试题集（1-50）
- 深入浅出GUI线程安全（三）
- 玩转Redis-干掉钉子户-没有设置过期时间的key
热门文章
- error: (-215:Assertion failed) size.width0 size.height0 in function 'cv::imshow'解决
- 加油站、加气站应该应用什么样的车牌识别？如何识别三轮车 摩托车牌照
- Python标准库shutil的使用（ 文件复制删除、文件夹复制删除、压缩包 压缩解压处理模块）
- 友情链接：对网站排名作用都深入了解吗？
- 若依 修改默认跳转页面
- commons-pool2(2.6.2)实现对象池-jdk8
- MySQL如何创建用户
- 双臂二指魔方机器人的制作（二）--视觉识别
- hide show toggle
- 只能获取fixed语句初始值_VBA使用Sleep API暂停函数实现延时获取数据