CSS属性简表(通常)
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属性简表(通常)相关推荐
- 表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式
表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...
- CSS——(CSS样式规则,CSS样式表单,选择器,常用的CSS属性)
CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...
- 简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...
- css 层叠式样式表(2)
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...
- CSS属性display:inline-block使用揭秘
本文向大家描述一下CSS属性display:inline-block的用法,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格.但对于这个属性不是所有 ...
最新文章
- 独家 | creditR 的基于实践的导论:一个神奇的改良信用风险评分和验证的R包(附代码)...
- python面试常见问题-常见Python面试题
- c# 学习笔记 (2) 窗体之间互相调用的方法
- aiohttp 高并发web服务_【Python入门】50.异步IO之 asyncio实现异步操作
- .12-浅析webpack源码之NodeWatchFileSystem模块总览
- mysql 最值复杂查询_MySQL高级查询
- android java 指针异常处理,Android自定义抛出异常的方法详解
- 网站被k的症状原因有哪些-怎么恢复
- HDU 2076 夹角有多大(题目已修改,注意读题)
- 明年,移动应用开发将出现这八大趋势
- MySQL复制应用中继日志解析
- 程序员的自我修养 - 符号修饰 函数签名 以及一个引申的问题: extern c
- 通过bocker把项目部署到容器后,也启动了镜像,但是浏览器报错网址连接不安全,建立安全连接失败,SSL接收到了一个超出最大准许长度的记录
- 初识前端模板引擎jade
- STM32LCD显示汉字
- WiFi 深入理解:时域和频域
- 倒计时小插件,懒人专用
- ubuntu版本查看命令
- 论文阅读--SAP-SSE: Protecting Search Patterns and Access Patterns in Searchable Symmetric Encryption
- spark-streaming 编程(三)连接kafka消费数据
热门文章
- 《淘宝店铺经营管理一册通》一一1.2 优化宝贝描述,让成交量飞涨
- 80%的软件环境管理问题,根因都在这里 | 研发效能提升36计
- python有什么优势-python有什么优势
- C# 入门(14) 枚举器(enumerator)和迭代器(iterator)
- speedoffice如何修改Word文档页面显示比例
- 金三银四JAVA面试总结:Java+并发+Spring+MySQL+分布式+Redis+算法+JVM等
- Linux重定向及常用命令
- Java学习到什么程度可以找到月薪过万的工作?
- Ubuntu系统认识--推荐书本《完美应用Ubuntu》-何晓龙
- 小学生python游戏编程4----拼图游戏