width宽度
height 高度
line-height （行高）
calc 一般用来计算宽度 width: calc(100% - 100px)
overflow overflow 属性规定当内容溢出元素框时发生的事情
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。常用
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
display 指定在页面上使用哪种盒模型来渲染指定的元素
none：元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。
inline：显示为内联元素。
inline-block：显示为块级内联元素。它可以设置元素的宽度和高度，其它的行为和内联元素相同。
block：显示为块级元素。
list-item：该元素生成一个块级容器和单独的内联列表元素。
inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption：这些值会将元素显示为表格。inline-table不是一个在HTML中直接映射的元素，它的行为和HTML <table>元素相同，但是它是一个内联元素，而不是一个块级元素。
flex：元素显示为块级元素，它的内容根据Flexbox模式来进行布局。
inline-flex：元素显示为内联元素，它的内容根据Flexbox模式来进行布局。
grid：元素显示为块级元素，它的内容根据Grid模式来进行布局。
inline-grid：元素显示为内联元素，它的内容根据Grid模式来进行布局。
float 浮动
left: 元素向左浮动
right: 元素向右浮动
none: 默认值。元素不浮动，并会显示在其在文本中出现的位置
position 定位
static: 默认值。没有定位
absolute: 绝对定位。相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative: 相对定位。对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed: 相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
使用场景：
1、让父级元素relative,让子级元素absolute
2、在做移动端header和footer时用fixed定位
font-size 文字大小
font-weight 文字粗细
font-family 文字字体
padding 内边距
margin 外边距
border 边框
border-radius 圆角
box-shadow 阴影
box-sizing
border-box: 忽略border和padding，常用
content-box: 在宽度和高度之外绘制元素的内边距和边框
color 文字颜色
background 背景
background: url(image) x y 是否重复（repeat重复 no-repeat不重复）
background-image: 可用来做背景图片或渐变色
background-color： 背景色
background-position： 指定背景图像位置
background-size： 指定背景图片大小
background-repeat：指定背景图像是否重复
background-origin：指定背景图像的定位区域
opacity 指定元素透明级别。1为不透明，0为透明
z-index 指定元素层级级别。
z-index失效情况
text-align 文本对其情况
center：居中
left：默认值，左对齐
right：右对齐
vertical-align 垂直对其
text-decoration 文本是否有下划线修饰
none：没有
underline：有一条下划线
list-style 列表项目标记 none设置没有
filter 滤镜
filter: blur(5px); 模糊度
filter: brightness(0.4); 亮度
filter: contrast(200%); 对比度
filter: drop-shadow(16px 16px 20px blue); 阴影
filter: grayscale(50%); 灰度
filter: hue-rotate(90deg); 色相旋转
filter: invert(75%); 反色
filter: opacity(25%); 透明度
filter: saturate(30%); 饱和度
filter: sepia(60%); 褐色程度
:before 伪元素，在元素之前
:after 伪元素，在元素之后
网友评论