兼容性前缀:
谷歌:webkit
火狐:moz
ie:ms
欧鹏:o
选择器:
属性选择器:
* = 包含 {href * = 'www'}
^ = 以什么开头
$ = 以什么结尾
伪类选择器:
第一个:first-of-type
最后一个:last-of-type
第几个:nth-of-type()
选中前n个:nth-of-type(-n)
选中后5个:nth-of-type(n + 5)
第4个到第8个::nth-of-type(-n + 8):nth-of-type(n + 4)
奇数个:nth-of-type(2n + 1)odd
偶数:nth-of-type(2n)even 子级:
child:first-child
:last-child
:nth-child 空的元素:empty
除了:not()
可用的::not(:disabled) / :enabled
禁用的::disabled
获得焦点::focus
当前激活元素::target
选项卡实例:
<a href="#p1">123123</a>
<a href="#p2">123123</a>
<a href="#p3">123123</a>
<p id="p1">sadadsada23</p>
<p id="p2">3123123123</p>
<p id="p3">31asfegerg123</p>
同级 后一个:+
同级后所有个:~
直系子级:>
所有的元素:*
选中的:checked
第一个字母:first-letter
第一个词:first-word
第一行:first-line 文本:
描边:text-stroke
文字阴影:text-shadow x轴偏移量 y轴偏移量 模糊范围 颜色
盒子阴影:box-shadow x轴偏移量 y轴偏移量 模糊范围 模糊半径 颜色 阴影位置
盒子倒影:box-reflect:above上 、 below下 、 left左 、 right右 偏移量
滤镜:filter:blur()
径向渐变:radial-gradient(circle圆形 / ellipse椭圆 、 半径 、颜色 、 范围)
线性渐变:linear-gradient(方向 颜色 范围)
重复渐变:repeating- 外部字体:@font-face{font-family:; src:url{''}}
单行文本截断:text-overflow:ellipsis(溢出变成3个点) clip(溢出裁减掉)
还有另外两个值:overflow:hidden
white-space: nowrap;
多行文本截断:display: -webkit-box;
text-overflow:ellipsis:
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow:hidden;
强制换行:word-wrap:break-word; 颜色:rgba 边框多色:border-colors
边框图:border-image: 图片路径 url() 、 裁剪大小 、 平铺方式 repeat(重复) round(拉伸)
圆角:border-radius : 左上角:border-top-left-radius
右上角:border-top-right-radius
左下角:border-bottom-left-radius
右下角:border-bottom-right-radius
背景基点:background-origin:border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
背景裁剪:background-clip:border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
背景大小:background-size:宽度 / 高度 contain按宽平铺/cover按高平铺(重点)
背景固定方式:background-attachment:fixed不随着滚动条滚动而滚动/scroll随着滚动条滚动(重点)
背景:background : 多个背景用逗号隔开 变形:transform:位移translate、旋转rotate、缩放scale、倾斜、skew
过渡:transition:
过渡属性transition-property all所有的 每一组用逗号隔开
过渡时间transition-duration
过渡延迟transition-delay
过渡运动方式:transition-timing-function
1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
动画:animation
动画名称:animation-name
动画时间:animation-duration
动画次数:animation-iteration-count infinite无限
动画方向:animation-direction normal 正向 reverse 反向 alternate 来回(一次正一次反)
动画状态:animation-play-state running运动 paused暂停
动画的运动方式:animation-timing-function:
1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
动画时间外状态:animation-fill-mode
forwards 动画结束时停在最后一帧
backwards 动画结束时返回到第一帧
both 动画立即执行第一帧,结束时停在最后一帧
none 结束完之后无
写动画:@keyframes 多列布局:columns
间隙:column-gap
列数:column-count
列宽:column-width
边框:column-rule
边框样式:column-rule-style
边框粗细:column-rule-width
边框颜色:column-rule-color
跨列:column-span 弹性盒子:display:flex;
父盒子:
方向:flex-direction
row/row-reverse/column/column-reverse
横向对齐方式:justify-content
flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐
纵向对齐方式:align-items
flex-start上对齐 / flex-end下对齐 / center居中对齐 / stretch等高 / baseline基线对齐
纵向行对齐方式:align-content
flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐
换行:flex-wrap
wrap换行 / nowrap不换行
缩写(方向和换行的缩写):flex-flow
子盒子:
扩展空间:flex-grow(对剩余空间进行划分)
压缩空间:flex-shrink
1份宽度 = (子元素总宽-容器宽)/总份数(每个元素占一份,flex-shrink:3 + 2)
压缩后的空间 = 子元素宽 - 1份宽度 * 份数
宽度:flex-basis
缩写:flex 先写扩展空间、再写压缩空间、最后写宽度 顺序:order 值越小越靠前,越大越靠后 可以是负数,不可以为小数
单独样式:align-self 媒体查询:
@media (min-width)and(max-width){}
screen屏幕
all所有的
prient打印设备

h5css样式的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. BootStrap_02之全局样式及组件

    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...

  3. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  4. x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法

    这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...

  5. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  6. WPF样式之画刷结合样式

    第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...

  7. JavaScript特性(attribute)、属性(property)和样式(style)

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

  8. 邮件中嵌入html中要注意的样式

    工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...

  9. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

随机推荐

  1. JAVA线程中的发牌题

    发牌题主要考虑的就是线程的问题,一个buffer缓冲区的问题, 首先,发牌的优先级当然是最高的了,但是取牌不能有优先级,否则会一直有牌先取,因此需要一个信号量order,当order=线程的数字时,取 ...

  2. nginx配置的记录

    基本使用 语法规则: location [=|~|~*|^~] /uri/ { - } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url ...

  3. Lombok - 使用注解让你的JavaBean变得更加简洁

    Lombok - 工具简介: Lombok是一个编译时注释预处理器,有助于在编译时注入一些代码.Lombok提供了一组在开发时处理的注释,以将代码注入到Java应用程序中,注入的代码在开发环境中立即可 ...

  4. MRR,BKA,ICP相关

    MRR Multi-Range Read,多范围读,5.6以上版本开始支持 工作原理&优化效果: 将查询到的辅助索引结果放在一个缓冲(read_rnd_buffer_size = 4M)中 将 ...

  5. vue的就地复用--- v-for与:key

    v-for遵循的是vue的就地复用原则.文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染. 就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出.[比如表单输入值的列表渲染 ...

  6. Docker 学习笔记(二):Dockerfile 定制镜像

    镜像的定制实际上就是定制每一层所添加的配置.文件. 如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题.镜像构建透明性的问题.体积 ...

  7. BSGS和EXBSGS

    也许更好的阅读体验 \(Description\) 给定\(a,b,p\),求一个\(x\)使其满足\(a^x\equiv b\ \left(mod\ p\right)\) \(BSGS\) \(BS ...

  8. C#不支持XPATH2.0

    .net中的XPATH是1.0版本的,很多2.0中的函数是不兼容的,比如lower-case().replace()函数等,下面中的XPATH语句在运行时会报错 //table[contains(lo ...

  9. ReLU函数的缺陷

    ReLU激活功能并不完美. 它有一个被称为 “ReLU 死区” 的问题:在训练过程中,一些神经元会“死亡”,即它们停止输出 0 以外的任何东西.在某些情况下,你可能会发现你网络的一半神经元已经死亡,特 ...

  10. springboot学习入门简易版二---springboot2.0项目创建

    2 springboot项目创建(5) 环境要求:jdk1.8+ 项目结构: 2.1创建maven工程 Group id :com.springbootdemo Artifact id: spring ...