link
@import
/* 写在头部标签 */
<style>
</style>
.triangle{
width:0px;
border:100px solid;
border-color:transparent transparent transparent red;
}
font-color: 字体颜色
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
可继承 但是字体颜色遇到a标签，必须给a标签
text-indent：文本缩进
text-align：文本水平对齐
text-decoration 文本修饰
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
可继承
list-style：列表风格，包括list-style-type、list-style-image等
width height float overflow
伪类的权重是10
技巧：选择器选择的范围越小越精确，优先级就越高
自己有默认的样式
使用display:none隐藏元素
使用:hover{display:block} 鼠标经过时，显示元素
.boss:hover .box{display:block}
/* 最好后面的元素是前面元素的后代，在父级元素上悬停鼠标，元素出现 */
opcatity:0
opcatity:1
vsibility：hidden
visibility:visible
注意：padding不可以取负值
给父元素添加overflow:hiden
给父元素添加一个上边框
给父元素或者子元素添加浮动（不推荐）；
把margin改为padding；
触发BFC
给父级元素设置line-height和text-align:center，给图片设置vertical-align:middle
margin padding border content
display;flex;
justify-content:center;
align-items:center;
opacity为0 消失
opacity 为1 出现
在google中的写法
兼容IE8及以下浏览器
给父元素添加高
直接给父元素添加float
给父元素设置overflow:hidden或者auto
在浮动元素的下方，加一个非浮动的空盒子，给该盒子添加clear:both清除浮动
.p1{
clear:both;
}
万能清除法(推荐使用)
给父元素添加clear公共类名，哪里需要清除，在哪里添加类名clear
.clear:after{
content:"";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
/* 兼容IE6 */
.clear{
zoom:1;
}
给父元素添加浮动
缺点：需要解决新的浮动问题（不推荐）
display:table
缺点：产生未知bug
一个页面不能出现滚动条，宽高同时自适应
一屏网页：宽高同时100%(body和html)
高度塌陷就是，子元素设置浮动之后，父元素没有设置高度或者父元素需要高度自适应的情况：
子元素设置浮动，高度设置height:auto
（1）更简洁、但是在实际开发中要注意书写规范，利于后期维
护
（2）标签的语义化
语义化的重要性：
① 当页面加载失败的时候，还能够呈现出清晰的结构
② 有利于SEO优化，利于被搜索引擎收录（即便于网络爬虫
的识别）
③ 在项目开发及维护时，语义化的也很大程度上降低开发
难度，节省成本
（3）语法更宽松
（4）多设备跨平台
（5）自适应网页设计
<header>...<header> 头部标签
<footer>...<footer> 尾部标签
<section>...<section> 内容区块
<article>...，article> 表示页面中的独立内容
<aside>...<aside> 标签定义其所处内容之外的内容
<nav>...<nav> 导航
<figure>...<figure>表示一段独立的流内容
<embed>...<embed> embed标签用于定义嵌套的内容，包括各种媒体
<mark>...<mark>高亮显示
<video>...<video> 视频标签
<video src="song.mp3" controls="controls" autoplay=autoplay>
</video>
<audio>...<audio> 音频标签
<audio src="song.mp4" controls="controls" autoplay=:autoplay>
</audio>
<datalist>...<datalist> 智能列表 供其选择
<p>
/* list里的id要和datalist里的id一致 */
<input type="text" nmae="a1" list="text">
</p>
<datalist id="text">
<option>大班</option>
<option>班级</option>
<option>班班</option>
</datalist>
<canvas>...<canvas>canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能
<hgroup>...<hgroup> 标签被用来对标题元素进行分组。
在IE6及其以下版本里，DOCTYPE缺失会触发怪异盒模式
给元素添加的padding值和border值，不会计算在元素原有的宽高，不会把盒子撑大
/* 可以让W3C标准盒模型变成怪异盒模型 */
box-sizing:border-box;
/* 变成W3C标准盒模型 */
box-sizing:content-box;
/* 火狐兼容 */
-moz-box-sizing:content-box;
/* IE兼容 */
-ms-box-sizing:content-box;
/* Opera兼容 */
-o-box-sizing:content-box;
/* Chrome和sarfi兼容 */
-webkit-box-sizing:content-box;
.text1{
text-shadow:5px 5px 5px pink;
}
阴影是不占据位置的
div
{
box-shadow: 1px 1px 11px 4px #888888 inset;
}
/* 上部 */
.top{
box-shadow:0 -2px 0 red;
}
/* 右边 */
.right{
box-shadow:2px 0 0 green;
}
/* 底部 */
.bottom{
box-shadow:0 2px 0 blue;
}
/* 左边 */
.left{
box-shadow:-2px 0 0 tomato;
}
| h-shadow | 必需的。水平阴影，阴影离开盒子的横向距离。允许负值 |
|---|---|
| v-shadow | 必需的。垂直阴影，阴影离开盒子的纵向距离。允许负值 |
| blur | 可选。模糊半径 |
| spread | 可选。阴影的延伸半径，大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
p.test {
word-break:break-all;
}
| normal | 使用浏览器默认的换行规则。 |
|---|---|
| break-all | 允许在单词内换行。 |
| keep-all | 保留单词完整性，只能在半角空格或连字符处换行。 |
.box{
/* 网址换行 */
word-wrap:break-word;
}
@font-face
-webkit-background-clip:text;
color:transparent;
/* 或者 */
-webkit-text-fill-color:transparent;
border-radius
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
hsl(色调，饱和度%，亮度%)
hsla(色调，饱和度%，亮度%，透明度)
亮度和饱和度需要加%
渐变是背景图
.div:nth-child(1){
background-image:linear-gradient(yellow,green,blue)
}
从下往上渐变 to top
background-image:linear-gradient(to top,yellow,green,blue)
从左往右right
background-image:linear-gradient(to right,yellow,green,blue)
右上对角渐变to right top
background-image:linear-gradient(to right top,yellow,green,blue)
颜色多给一点
background-image:linear-gradient(to right top,yellow 80%,green,blue)
默认是椭圆
background-image:radial-gradient(circle,yellow 80%,green,blue)
background:url(img/1.png) no-repeat left top,url(img/2.png) no-repeat right top,url(img/3.png) no-repeat left bottom,url(img/4.png) no-repeat right bottom
块级格式化上下文
独立的渲染区域，需要一定规则触发
overflow的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
上下两个盒子同时给margiin的时候，会发生重叠，重叠的时候取margin最大值
给左边固定宽 添加浮动，给右边添加overflow:hidden，会实现两栏自适应
给父级设置display:flex，自适应列设置flex:1，均分剩余空间
分情况
transform:translateX(100px) rotateZ(45deg)是同时沿x轴偏移100px，同时也沿z轴旋转45度
transform:rotateZ(45deg) translateX(100px)，是有先后顺序的，即先旋转45度之后，再沿x轴偏移100px
共同点:都是相对单位，相对于别的元素的改变而变化的
区别:em相对于最近父元素的字号大小、rem相对根元素字号大小
原文：https://www.cnblogs.com/hsbolg/p/13510510.html