海阔天空

手机扫码查看

选择器的权重：
行内样式1000
ID选择器100
类选择器10
标签选择器1
通用选择器0

---

css属性简写：
background：背景色 背景图片 背景平铺
background:red url(xxx.png) no-repeat;
border:边框宽度 边框样式 边框颜色
border:1px solid red;
font:字体样式 加粗 字号大小/行高 字体,备用字体,”备用字体”;
font:italic bold 20px/35px arial,sans-serif,”微软雅黑”;
margin/padding:上右下左
margin/padding:上 左右 下
margin/padding:上下 左右
margin/padding:四周相同
color:rgb/rgba,red,#ccc

---

元素三大类型：
块元素：div、p
可以设置宽高大小，默认宽度100%，并且独占一整行
行内元素：span
无法设置宽高，元素大小随内容变化，所有元素默认排在一行
内联块元素：
既能设置宽高大小，又能排在一行显示

---

跳转锚点

1.#号和id属性
<a href=”#html”>html</a>
<h2 id=”html”></h2>
2.#号和name属性
<a href=”#html”>html</a>
<a name=”html”></a>

---

特殊符号

空格 &nbsp; 版权©&copy;注册商标®&reg;
小于号<&lt;大于号>&gt;和号&&amp;
人民币¥&yen;摄氏度°&deg;

---

无序列表

<ul>、<li>：列表的最外层容器，列表项
注：ul和li必须是组合出现的，之间不能有其他标签
<ul>
<li><a href=””>这是一篇文章</a></li>
<li><a href=””>这是一篇文章</a></li>
<li><a href=””>这是一篇文章</a></li>
</ul>

有序列表

<ol><li>：列表的最外层容器，列表项
注：有序列表用的非常少，经常用的是无需列表，无序列表可以去代替有序列表
<ol>
<li><a href=””>这是一篇文章</a></li>
<li><a href=””>这是一篇文章</a></li>
<li><a href=””>这是一篇文章</a></li>
</ol>

自定义列表

<dl>：定义列表
<dt>：定义专业术语和名词
<dd>：对名词进行解释和描述

嵌套列表

列表之间可以相互嵌套形成多层级列表

---

---

text-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline
不要任何修饰:none

text-transform:文本大小写
小写lowercase
大写uppercase
首字母大写capitalize

text-indent:文本缩进
首行缩进，单位px、em
如果字体大小为16px，首行缩进就是2em，1em=16px，2em=32px

text-aglin:文本对齐
对齐方式：左left、右right、居中center、两端对齐justify

line-height:行高
一行文字的高度，上边距和下边距的等价关系
取值单位：px或者%百分比

letter-spacing:定义文字间距
word-spacing:定义单词间距

word-break:折行
word-break:break-all/break-word

---

盒模型box-sizing:
div{box-sizing:border-box;}
优点：
1.不同计算
2.解决一些100%的问题

---

透明度和手势

opacity：0(透明)~1(不透明)
rgba():0~1
可以让指定的样式透明，而不影响其他样式

手势cursor
自定义：需要.cur、.ico图片类型
cursor:url(图片路径),auto;

---

浮动float
脱离文档流
float:left/right

清除浮动
clear:left/right/both(左右都清除)

嵌套排列：
利用after伪类进行清除浮动
.clear:after{content:””;display:block;clear:both}

---