常用的属性
- width & height
宽高明显是很简单的，但是呢，如果真的很简单咱们也没必要第一个来说是吧，之所以要第一个说宽高，是因为咱们的html元素，有的不能设置宽高，这是为啥呢？这引出了一个新的概念
块级元素与行内元素
这两者的差别如下：
- 块级元素： h1~h6、div、p、ul、li、ol、hr、dl、dt、dd、form
- 行内元素：span、strong、font、b、a、input、textarea、u、img、i、em、br、label
特性区别：- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 块级可以设置宽高，行内不能
- 块级内外边距值上下左右都可以设置，行内只可以设置左右内外边距，上下无效
如果说只是简单上面的规定，那么也太小看css了，当然是可以改的啦——display
- display样式有三个常用的值：inline（行内），block（块级），inline-block（行内块级）
- 其它值有：table，table-cell，table-row，list-item，none，inherit
顺带说下单位，一般常用的三种：
- px：绝对单位，一个像素点；
- em：相对单位，相对于父元素的字体大小；
- rem：相对单位，相对于根元素（html）的字体大小
- 盒模型
刚才说了宽高，那宽高其实是盒模型里面的一部分，content部分，然而我说的这个既对也错，因为盒模型这玩意有两个，一个是W3C制定的，还有一个就是万恶的IE，但这个IE的还蛮好用的。仔细的就看图：
里面你可以发现不同之处在于IE把border和padding算进了height和width。
切换两个的属性box-sizing:
- content-box：w3c标准盒模型（默认）
- border-box：“IE盒模型”
-
border
为啥我要单独把border放在这，其实很简单，因为不一般呐！
我们有的时候会看到一些大犇用css能做出一些很厉害的图案，不可或缺的就是border
Paste_Image.png
还有就是border-radius，有些网站上圆圆的头像就是用这个，把border-radius设置为50%
顺带也说下padding和margin，padding倒是没啥好说的 ，但是呢margin要注意，外层的margin会合并，这个以后再分析，这次只是简单的提一下。 font
font-size：字体大小
font-family：字体，宋体、微软雅黑、Arial等
font-weight：文字粗度，常用的就是默认值regular和粗体bold
line-height：行高，可以用百分比、倍数或者固定尺寸
- text-align：文本对其方式 left、center、right、justify
text-indent：文案第一行缩进距离
direction：文本方向，ltr、rtl
text-decoration：样式 none、underline、line-through、overline
- 背景
接下来说下背景:
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
- background-position：默认左上角
- x y
- x% y%
- [top | center | bottom] [left | center | right]
- background-repeat
- no-repeat：背景图片在规定位置不重复
- repeat-x：图片横向重复
- repeat-y：图片纵向重复
- repeat：全部重复
最后还有一些其它的：
比如锚点，因为比较简单，而且用的不多就提一下，有这么个东西。
透明（指的是元素不能被看见，但是位置依然被占据）
- opacity:0~1：透明度，作用于整体，用得比较少；
- visibility:hidden：元素可见度，表示该元素透明，位置依然占据；
- background-color:rgba(0,0,0,0~1)：表示背景色的透明度，a的值为0时完全透明；
隐藏（指元素整体消失，并且不占据位置）
- display:none：表示设置该元素消失，不占据位置也看不见；
颜色color的写法
- 单词：red，blue，yellow等；
- 十六进制：#000，#fff，#060606等；
- rgb形式：rgb(255,255,255)；
- rgba形式：rgba(0,0,0,0.5)，里面的a代表的是透明度，范围是0~1，数值越大越不透明；
什么是css样式继承
- 继承就是子元素继承了父元素的CSS样式的属性
常用的会被继承的样式有哪些？
- 字体：family，size，weight，line-height
- 文本：letter-spacing，word-spacing，text-align, text-indent
- 列表：list-style-type
- 颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉继承自父元素的字体颜色；
什么属性不能被继承
- display
- float
- padding和margin
- 背景相关，比如颜色图片等
去除inline-block内缝隙
- 把<\li>标签之间的空白(换行)去掉，就是连着写
- 可以用负margin把<li>标签之间的外边距变小，使两个inline-block元素之间没有空隙。
- 利用float属性，浮动元素是水平方向上紧挨着的。设置了浮动，一定要清除浮动。
- 还可以设置父元素的字体大小为0。这种方法，元素则身的字体大小要设置。
