| 1、background:
background-repeat: repeat(在xy轴上重复平铺|默认值)
repeat-x(在x轴上重复平铺)
repeat-y(在y轴上重复平铺)
inherit(继承父元素属性)
no-repeat
background-attachment: scroll(背景相对元素固定，背景保持不动，内容随滚动条滚动|默认值)
local(背景相对元素固定，背景会随内容的滚动而滚动)
fixed(背景相对视口/html固定，与其容器元素已经无关联)
inherit(继承父元素属性)
background-position: top left(默认值)|xpos ypos 2、 字体：
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。 公式：1px / 16 = 1em
text-transform: uppercase(字母小写)
lowercase(字母大写)
capitalize(首字母大写)
text-indent: 10px (设置行头的缩进)
text-shadow: 2px 2px 2px red (x轴阴影，y轴阴影，阴影模糊度，颜色)
letter-spacing: 10px (设置字符的间距)
text-decoration: line-through red(字体中间穿过一条实线)
font-family:"Times New Roman", Times, serif(后面两个为备用字体，若浏览器不支持会依次读取下去) 3、link:
a:link {color:#000000;} (未访问链接)
a:visited {color:#00FF00;} (已访问链接)
a:hover {color:#FF00FF;} (鼠标移动到链接上)
a:active {color:#0000FF;} (鼠标点击时)
注：a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面 4、ul/ol:
list-style-type : none|circle[无序]|square[无序]|upper-roman[有序]|lower-alpha[有序] (设置列表图标)
list-style-image: url('sqpurple.png') (自定义列表图标)
list-style-position: inside (列表项目标记放置在文本以内，且环绕文本根据标记对齐。)
outside (默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。)
inherit 5、table:
表格有双边框。这是因为表和th/ td元素有独立的边界
table{border-collapse:collapse;} (边框折叠，形成单边框) 6、Box Model(盒子模型)：
margin: 清除边框外的区域，外边距是透明的 （边界/边距）
border: 围绕在内边距和内容外的边框
padding: 清除内容周围的区域，内边距是透明的 （填充）
content: 盒子的内容
盒子总宽 = 宽度(width属性/content宽度) + 左右边距(margin) + 左右填充(padding) + 左右边框(border)
box-shadow: 10px 10px 10px 10px red inset
h-shadow: 水平阴影的位置。允许负值。
v-shadow: 垂直阴影的位置。允许负值。
blur: 可选。模糊距离。
spread: 可选。阴影的尺寸。
color: 可选。阴影的颜色。请参阅 CSS 颜色值。
inset: 可选。将外部阴影 (outset) 改为内部阴影。
h-shadow v-shadow blur spread color insect
水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影 7、border:
border-style: 上 右 下 左 8、分组选择器与嵌套选择器：
分组：h1,h2,h3 (逗号隔开)
嵌套：p.marked : 所有class=marked的p标签 9、Display(显示) 与 Visibility（可见性）：
隐藏元素：
display:none (不影响布局)
visibility:hidden (仍然占用空间，影响布局)
display: inline (设置元素为内联属性, 内联元素只需要必要的宽度，不强制换行 [span a])
block (设置元素为块级属性,块级元素占用了全部的宽度，在前后都是换行符，会自动换行[h1 p div])
inline-block (内联块元素, 不会自动换行，可设置宽高 [将ul由垂直改成水平显示]) 10、position(定位)：
position: 如下取值 relative (相对其元素本身正常位置的定位 [位置与文档流有关，占据空间])
absolute (相对其最近的祖先的定位而定位，如果没有就相对html定位 [位置与文档流无关，不占据空间])
fixed (相对浏览器窗口固定定位 [位置与文档流无关，不占据空间])
sticky (在设定的阈值内滚动时为relative，超出阈值外滚动时为fixed,阈值指的top/right/bottom/left之一)
clip: rect(0px,60px,200px,0px);[对absolute的元素进行裁剪] 11、overflow:
visible (默认值。内容不会被修剪，会呈现在元素框之外。)
hidden (内容会被修剪，并且其余内容是不可见的。)
scroll (内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。)
auto (如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。)
inherit (规定应该从父元素继承 overflow 属性的值。)
[overflow 属性只工作于指定高度的块元素上。] 12、float:
浮动元素之后的元素将围绕它；
浮动元素之前的将不受影响。 13、选择器：
空格 ：后代元素 （div p）
> : 子元素（div>p）
+ : 下一个兄弟元素（div+p）
~ : 下一群兄弟元素（div~p） 14、css伪类：
:not(p) { 为每个并非<p>元素的元素设置背景颜色 }
:hover:not(.active) 14、css伪元素：
:first-line (伪元素用于向文本的首行设置特殊样式 [只能用于块级元素])
:first-letter (伪元素用于向文本的首字母设置特殊样式 [只能用于块级元素])
:before (伪元素可以在元素的内容前面插入新内容。)
:after (伪元素可以在元素的内容之后插入新内容。)
:first-child (选择器匹配属于任意元素的第一个元素)
:last-child (选择器匹配属于任意元素的最后一个元素) 15、导航栏：
<ul>
<li class='active'><a>1</a></li>
<li><a>2</a></li>
<li><a>2</a></li>
</ul>
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
垂直导航：
a {display:block} (便于修改导航的宽度)
水平导航1：
li{display:inline}
水平导航2：
li{float:left}
a{display:block}(显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度) li a:hover:not(.active) {} (将class=active的a标签排除) 16、下拉菜单：
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜鸟教程 1</a>
<a href="#">菜鸟教程 2</a>
<a href="#">菜鸟教程 3</a>
</div>
</div>
.dropdown{position: relative}
.dropdown-content{position: absolute; display: none}
.dropdown:hover .dropdown-content {display: block;} 17、border：
border-color:transparent (透明)
CSS3:
border-radius: 50% //圆 边框角度
border-shadow: 10px 10px 5px red; //边框阴影
border-image: url 10px round;
渐变：
Linear Gradients //向下/向上/向左/向右/对角方向
Radial Gradients //由它们的中心定义
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: radial-gradient(center, shape size, start-color, ..., last-color);
rbg最后一个参数(第4个)表示颜色透明度 0 表示完全透明，1 表示完全不透明。 text-overflow: ellipsis //超出部分 ...
word-break: word-break/keep-all; //文字换行 @font-face
{
font-family: myFirstFont; //自定义字体名称
src: url(sansation_light.woff); //引入字体文件
}
transform: translate(50px,100px); / 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 transform: rotate(30deg); //在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: scale(2,3); //该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: skew(30deg,20deg); //分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform:matrix(0.866,0.5,-0.5,0.866,0,0); //有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 transform: rotateX(120deg); //围绕其在一个给定度数X轴旋转的元素。
transform: rotateY(130deg); //围绕其在一个给定度数Y轴旋转的元素。 transition: width 2s, height 2s, transform 2s;//过度的时间与方向 @keyframes test{ //自定义动画效果
from {background-color: red}
to {background-color: green}
}
animation: test 2s; //使用动画效果 column-count : 3 //指定了需要分割的列数。
column-gap: 40px; //指定了列与列间的间隙。
column-rule-style: solid; //指定了列与列间的边框样式
column-rule-width: 1px; //指定了两列的边框厚度
column-rule-color: lightblue; //指定了两列的边框颜色
column-rule: 1px solid lightblue; //是 column-rule-* 所有属性的简写。
column-width: 100px; //指定了列的宽度 box-sizing: border-box; //设置高度宽度时，算上边框与padding的值 | 
2220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
