常用的属性

1. 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
  特性区别：
  1. 块级可以包含块级和行内，行内只能包含文本和行内
  2. 块级占据一整行空间，行内占据自身宽度空间
  3. 块级可以设置宽高，行内不能
  4. 块级内外边距值上下左右都可以设置，行内只可以设置左右内外边距，上下无效

如果说只是简单上面的规定，那么也太小看css了，当然是可以改的啦——display

• display样式有三个常用的值：inline（行内），block（块级），inline-block（行内块级）
• 其它值有：table，table-cell，table-row，list-item，none，inherit

顺带说下单位，一般常用的三种：

• px：绝对单位，一个像素点；
• em：相对单位，相对于父元素的字体大小；
• rem：相对单位，相对于根元素（html）的字体大小

2. 盒模型
   刚才说了宽高，那宽高其实是盒模型里面的一部分，content部分，然而我说的这个既对也错，因为盒模型这玩意有两个，一个是W3C制定的，还有一个就是万恶的IE，但这个IE的还蛮好用的。仔细的就看图：

里面你可以发现不同之处在于IE把border和padding算进了height和width。
切换两个的属性box-sizing:

• content-box：w3c标准盒模型（默认）
• border-box：“IE盒模型”

3. border
   为啥我要单独把border放在这，其实很简单，因为不一般呐！
   我们有的时候会看到一些大犇用css能做出一些很厉害的图案，不可或缺的就是border

   
   
   Paste_Image.png
   
   

   还有就是border-radius，有些网站上圆圆的头像就是用这个，把border-radius设置为50%
   顺带也说下padding和margin，padding倒是没啥好说的 ，但是呢margin要注意，外层的margin会合并，这个以后再分析，这次只是简单的提一下。

4. 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

4. 背景
   接下来说下背景:

- background-position：默认左上角
  - x y
  - x% y%
  - [top | center | bottom] [left | center | right]
- background-repeat
 - no-repeat：背景图片在规定位置不重复
  - repeat-x：图片横向重复
 -  repeat-y：图片纵向重复
 -  repeat：全部重复

最后还有一些其它的：
比如锚点，因为比较简单，而且用的不多就提一下，有这么个东西。

透明（指的是元素不能被看见，但是位置依然被占据）

1. opacity:0~1：透明度，作用于整体，用得比较少；
2. visibility:hidden：元素可见度，表示该元素透明，位置依然占据；
3. background-color:rgba(0,0,0,0~1)：表示背景色的透明度，a的值为0时完全透明；

隐藏（指元素整体消失，并且不占据位置）

1. display:none：表示设置该元素消失，不占据位置也看不见；

颜色color的写法

1. 单词：red，blue，yellow等；
2. 十六进制：#000，#fff，#060606等；
3. rgb形式：rgb(255,255,255)；
4. rgba形式：rgba(0,0,0,0.5)，里面的a代表的是透明度，范围是0~1，数值越大越不透明；

什么是css样式继承

• 继承就是子元素继承了父元素的CSS样式的属性
  常用的会被继承的样式有哪些？

1. 字体：family，size，weight，line-height
2. 文本：letter-spacing，word-spacing，text-align, text-indent
3. 列表：list-style-type
4. 颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉继承自父元素的字体颜色；

什么属性不能被继承

1. display
2. float
3. padding和margin
4. 背景相关，比如颜色图片等

去除inline-block内缝隙

1. 把<\li>标签之间的空白(换行)去掉，就是连着写
2. 可以用负margin把<li>标签之间的外边距变小，使两个inline-block元素之间没有空隙。
3. 利用float属性，浮动元素是水平方向上紧挨着的。设置了浮动，一定要清除浮动。
4. 还可以设置父元素的字体大小为0。这种方法，元素则身的字体大小要设置。