CSS属性简表(通常)

位置、布局

======================================

position: relative | absolute | fixed
z-index: 整数(可负)
top right bottom left: 长度/百分比
display: none | inline | block | inline-block | flex
float: none | left | right
clear: none | left | right | both
overflow(-x/-y): hidden | scroll | auto
box-sizing: content-box | border-box
zoom: 浮点数/百分比
visibility: visible | hidden
(clip)

尺寸、边框

======================================

width height (max-/min-)
margin(-TRBL)
padding(-TRBL)border-width
border-style: solid | double | dotted | dashed
border-color
border-top
border-top-color
border-radius: 长度/百分比
border-top-left-radius
outline
box-shadow: x偏移 y偏移 模糊值 颜色

背景、颜色

======================================

width height (max-/min-)
margin(-TRBL)
padding(-TRBL)border-width
border-style: solid | double | dotted | dashed
border-color
border-top
border-top-color
border-radius: 长度/百分比
border-top-left-radius
outline
box-shadow: x偏移 y偏移 模糊值 颜色background: url() position/size repeat color;
background: url() position/size repeat attachment clip origin color;
background-image: url()
background-position: 长度/百分比 | center | TRBL
background-size(尺寸大小): 长度/百分比 | cover | contain
background-repeat: repeat | repeat-x/y | no-repeat
(background-attachment(相对滚动)): fixed | local
(background-clip(从何边剪裁)): border-box | padding-box | content-box | text
(background-origin(从何边显示)): padding-box | border-box | content-boxcolor: HEX | RGB | RGBA | HSL | HSLA
oopacity: [0.0 ~ 1.0]

文本相关

======================================

font: weight size/line-height Simsun,Arial;
font: style variant weight size/line-height Simsun,Arial;
(简写格式必须指定font-size和font-family)
font-style: normal | italic | oblique(人为斜体)
font-variant: normal | small-caps(小型大写字母)
font-weight: normal | bold | bolder | lighter | 100-900
font-size: medium | 长度/百分比
font-family:
Sans-serif Helvetica Arial Verdana Tahoma
Serif Georgia Times
SimSun Microsoft YaHeitext-decoration-line: none | underline
text-decoration-color:
text-decoration-style: solid | double | dotted | dashed | wavytext-transform
white-space
tab-size
word-break
word-wrap(overflow-wrap)
text-align
text-justify
word-spacing
letter-spacing
text-indent
vertical-align
text-shadow
text-overflow(white-space: normal pre nowrap pre-wrap pre-line;
overflow-wrap: normal break-word;
word-break: normal keep-all break-all;
text-align: start end l/r center justify;
word/letter-spacing: px %;
vertical-align: baseline sub/super t/b middle text-bottom % px;
line-height: normal px num;)

列表表格

======================================

list-style: type position image;
list-style-type: disc | circle | square | none
list-style-position: outside | inside
list-style-image: none | url()table-layout: auto | fixed;
border-collapse: separate | collapse;
border-spacing: 0 | px;
caption-side: top | bottom;
empty-cells: show | hide;

多列

======================================

column-width: auto px;
column-count: auto z;
column-gap: normal px;
column-rule
column-span: none all;
column-fill: auto balance;
column-break-before/after/inside: auto always avoid;

其他

======================================

!importantcursor: pointer | wait | move | help | not-allowed | url() x y
border-image-source
border-image-slice: <num> <per> fill;
border-image-width: <len> <num> <per> auto;
border-image-outset: <len> <num>;
border-image-repeat: stretch repeat round space;

伪元素

======================================

content: normal/none attr('data-content') url() "string" counter(name, string, l-s-t);
counter-increment: name 1;
.counter1 li:before{content: counter(name)".";}
.counter2 li{counter-increment: name 2;}
}

媒体查询

======================================

@media screen and ((device-)width: 1024px) {...}
@import url(example.css) screen and (max-width:800px);
<link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" />

单位

======================================

Length: em rem vw/vh vmax/vmin cm mm;
90deg = 0.25turn = 2PI/4rad = 400/4grad
1s = 1000msem [当前对象的font-size]
rem [html的font-size]
vw vh [均分为100份]

转载于:https://www.cnblogs.com/JOOQSS/p/9853086.html

CSS属性简表(通常)相关推荐

  1. 表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式

    表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...

  2. CSS——(CSS样式规则,CSS样式表单,选择器,常用的CSS属性)

    CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...

  3. 简述css属性选择器的几种定义方式_CSS基础试题

    一.单选题 1.CSS是利用(  B   )XHTML标签构建网页布局. A. C.       D. 2.在CSS语言中下列哪一项是"左边框"的语法(  C  ) A.borde ...

  4. css 层叠式样式表(2)

    一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...

  5. DW中CSS属性详解

    作者:未知 来源:5D多媒体       在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...

  6. 第60天:js常用访问CSS属性的方法

    一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法  box.style.width      box.style.top     点语法可以得到 ...

  7. css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局

    别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...

  8. 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具

    css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...

  9. CSS属性display:inline-block使用揭秘

    本文向大家描述一下CSS属性display:inline-block的用法,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格.但对于这个属性不是所有 ...

最新文章

  1. 独家 | creditR 的基于实践的导论:一个神奇的改良信用风险评分和验证的R包(附代码)...
  2. python面试常见问题-常见Python面试题
  3. c# 学习笔记 (2) 窗体之间互相调用的方法
  4. aiohttp 高并发web服务_【Python入门】50.异步IO之 asyncio实现异步操作
  5. .12-浅析webpack源码之NodeWatchFileSystem模块总览
  6. mysql 最值复杂查询_MySQL高级查询
  7. android java 指针异常处理,Android自定义抛出异常的方法详解
  8. 网站被k的症状原因有哪些-怎么恢复
  9. HDU 2076 夹角有多大(题目已修改,注意读题)
  10. 明年,移动应用开发将出现这八大趋势
  11. MySQL复制应用中继日志解析
  12. 程序员的自我修养 - 符号修饰 函数签名 以及一个引申的问题: extern c
  13. 通过bocker把项目部署到容器后,也启动了镜像,但是浏览器报错网址连接不安全,建立安全连接失败,SSL接收到了一个超出最大准许长度的记录
  14. 初识前端模板引擎jade
  15. STM32LCD显示汉字
  16. WiFi 深入理解:时域和频域
  17. 倒计时小插件,懒人专用
  18. ubuntu版本查看命令
  19. 论文阅读--SAP-SSE: Protecting Search Patterns and Access Patterns in Searchable Symmetric Encryption
  20. spark-streaming 编程(三)连接kafka消费数据

热门文章

  1. 《淘宝店铺经营管理一册通》一一1.2 优化宝贝描述,让成交量飞涨
  2. 80%的软件环境管理问题,根因都在这里 | 研发效能提升36计
  3. python有什么优势-python有什么优势
  4. C# 入门(14) 枚举器(enumerator)和迭代器(iterator)
  5. speedoffice如何修改Word文档页面显示比例
  6. 金三银四JAVA面试总结:Java+并发+Spring+MySQL+分布式+Redis+算法+JVM等
  7. Linux重定向及常用命令
  8. Java学习到什么程度可以找到月薪过万的工作?
  9. Ubuntu系统认识--推荐书本《完美应用Ubuntu》-何晓龙
  10. 小学生python游戏编程4----拼图游戏