border-radius 属性⽤于给元素添加圆⾓或者⚪
border-collapse
.box {
/* margin: 0 auto; 实际上是下⾯两个起作⽤ */
margin-left: auto;
margin-right: auto;
}
* {margin: 0; padding: 0}
去除元素默认 margin padding
display
块级：block, list-item, table
⾏内: inline, inline-table, inline-block
display'
Value:    inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inherit Initial:    inline
Applies to:  all elements
Inherited:    no
inline-block
既呈现 inline 特性(不占据⼀整⾏，宽度由内容宽度决定)
⼜呈现 block 特性 (可设置宽⾼，内外边距)
缝隙问题
隐藏or透明
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占⽤位置
background-color: rgba(0，0，0，0.2) 只是背景⾊透明
font
font-size：字体⼤⼩
font-family：字体，宋体、微软雅⿊、Arial等
font-weight：⽂字粗度，常⽤的就是默认值regular和粗体bold
line-height：⾏⾼，可以⽤百分⽐、倍数或者固定尺⼨
以上属性都可继承给⼦元素
Chrome最⼩字体
chrome 默认字体⼤⼩16px, 最⼩字体 12px 解决⽅案
⽂本
text-align：⽂本对其⽅式 left、center、right、justify
text-indent：⽂案第⼀⾏缩进距离
text-decoration： none、underline、line-through、overline
color：⽂字颜⾊
text-transform：改变⽂字⼤⼩写none、uppercase、lowercase、capitalize
word-spacing：可以改变字（单词）之间的标准间隔
letter-spacing：字母间隔修改的是字符或字母之间的间隔
单⾏⽂本溢出加...
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
其他
a 链接设置颜⾊
a 有默认颜⾊和样式，会覆盖继承的样式
a {
color: red;
text-decoration: none;
}
链接样式
:link 未被访问过
:visited 已被访问过
:
hover ⿏标悬浮状态
:focus 获得焦点状态（通过 Tab 键或 HTMLElement.focus()）:active 激活状态，如被点击
LVHFA 顺序法则。如果要给所有这些状态都添加样式，请遵循 LVHFA
列表去掉点
ul{
list-style: none;
}
/*也可这样*/
li{
list-style: none;
}
背景
=
background 简写属性，作⽤是将背景属性设置在⼀个声明中background-attachment 背景图像是否固定或者随着页⾯的其余部分滚动background-color 设置元素的背景颜⾊
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
background-size 设置背景的⼤⼩(兼容性)
background-position：默认左上⾓
x y
x% y%
[top | center | bottom] [left | center | right] background-repeat
no-repeat：背景图⽚在规定位置
repeat-x：图⽚横向重复
repeat-y：图⽚纵向重复
repeat：全部重复
background-size
css表格样式100px 100px
contain
cover
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以缩写为⼀句：
background: #f00 url(background.gif) no-repeat fixed 0 0; CSS Sprite
指将不同的图⽚/图标合并在⼀张图上。
使⽤CSS Sprite 可以减少⽹络请求，提⾼⽹页加载性能。常⽤的⽹站
1. 阿⾥字体图标库 iconfont
2. fontawesome 字体图标库
3. 精灵图图⽚合并⽹站 css sprites
4. 图⽚压缩⽹站 tinypng

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。