css common styles

1. block-level & inline-level

block-level 可以包含块级和行内，inline-level 只能包含文本和行内
block-level 占据一整行，inline-level 占据自身宽度空间
宽高设置。内外边距的差异

block-level:
div 、h1、h2、h3、h4、h5、h6、p、hr、form、ul、dl、ol、pre、table、li、dd、dt、tr、td、th
inline-level:
em、strong、span、a、br、img、button、input、label、select、textarea、code、script

2. width height

只对块级元素设置生效，对行内元素设置无效

<style>
  .box{
      width: 200px;
      height: 100px;
      background-color: red;
   }
</style>
<div class="box"></div>

3. border

border-width、border-color、border-style、border-radius 设置圆角

.box{
    border-width: 1px;
    border-color: red;
    border-style: solid; /* solid实线、dotted虚线、dash粗虚线 */
}
/* 简写 */
.box2{
    border: 1px dotted #ccc;
}

使用border做三角形:

.box{
  width: 0px;
  height: 0px;
  border-top: 50px red solid;
  border-right: 50px red tansparent;
  border-bottom: 50px red transparent;
  border-left: 50px blue solid;
}

exampleTriangle | show

4. padding & margin

padding

padding 代表内边距，有四个方向的值，可以合写，值可以是数值也可以值百分比 (相对于父容器、不是自身)

padding-top、padding-right、padding-bottom、padding-left

padding: 20px; /* padding: 20px 20px 20px 20px */
padding: 10px 20px; /* padding: 10px 20px 10px 20px */
padding: 10px 20px 30px; /*padding: 10px 20px 30px 20px */

margin

margin 代表外边距，有四个方向的值，可以合写，值可以是数值也可以是百分比(相对于父容器、不是自身)。还可以是负值
外边距合并问题

margin-top、margin-right、margin-bottom、margin-left

margin: 20px; /* padding: 20px 20px 20px 20px */
margin: 10px 20px; /* padding: 10px 20px 10px 20px */
margin: 10px 20px 30px; /*padding: 10px 20px 30px 20px */

margin: 0 auto; 的使用

对于块级元素设置margin: 0 auto;可达到居中目的

.box{
    /* margin: 0 auto; 实际上是下面两个起作用 */
margin-left: auto;
margin-right: auto;
}

*去除元素默认 margin、padding

*{
    margin: 0px;
    padding: 0px;
}

注意：对于行内元素来说，上下的 margin 和 padding 是不生效的

exampleCss1 | show

5. display

块级：block，list-item，table
行内：inline，inlne-table，inline-block

value: inline | block | list-item | inline-block | table | inlne-table | table-row | table-cell | none | inherit
Initial to: inline 最初的默认的为inline
Applies to: all elements 应用在所有的元素上
Inherited: no 不继承的
body{color:red;}为继承

边框 margin padding 不继承

6. font

font-size: 字体大小
font-family: 字体，宋体、微软雅黑、Arial等
font-weight: 文字粗度，常用的默认值regular和粗体bold
line-height: 行高，可以用百分比、倍数或者固定的尺寸
以上属性都可以继承给子元素

body{
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
p{
    line-height: 1.5;
    font-size:14px;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: bold;
}

7. font-family

使用浏览器打开页面时，浏览器会读取HTML文件进行解析渲染。
当读到文字使会转换成对应的Unicode码 (可以认为是世界上任意一种文字的特定编号)。
再根据HTML礼设置的font-family (如果没设置则会使用浏览器默认设置)
去查找电脑里 (如果有定义自己@font-face，则加载对应字体文件)对应的字体文件。
找到文件后根据Unicode码去查找绘制外形，找到后会知道页面上

写法:

在css中设置字体是，直接对字体中文或英文名称浏览器都能识别，直接写中文的情况下编码 (GB2312、UTF-8) 不匹配时会乱码。
保险的方式是将字体名称用Unicode来表示

宋体 | SimSun | \5B8B\4F53
黑体 | SimHei | \9ED1\4F53
微软黑体 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
打开控制台 escape('微软雅黑')，把 %u 替换成 \

8. Chrome最小字体限制

chrome默认字体大小为16px，最小字体为12px

9. text

text-align: 文本对齐方式 left、center、right、justify (每行最后空白的对齐，并非真正理解的两端对齐)
text-indent: 文案第一行缩进距离
text-decoration: 文本的装饰 none、underline、line-through (删除线)、overline (顶部线)
color: 文字颜色
text-transform: 改变文字的大小写 none、uppercase (小写展示成大写)、lowercase (大写展示成小写)、capitalize (首字母大写)
word-spacing: 可以改变子 (单词) 之间的标准间隔
letter-spacing: 字母间隔修改的是字符或字母之间的间隔

10. 行内元素居中

<style>
    .box{
        text-align: center;
    }
</style>
<div class="box">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="">
</div>

11. 单行文本溢出加...

.card>h3{
    white-space: nowrap;  //不换行
    overflow: hidden;  //超出隐藏
    text-overflow: ellipsis;  //省略
}

12. 颜色

单词：red blue pink yellow white black
十六进制：#000000 #fff #eee #ccc #666 #333 #f00 #0f0
rgb: rgb(255,255,255) rgb(0,255,0)
rgba: rgba(0,0,0,0.5) a透明度

13. a链接设置颜色

a有默认颜色和样式，会覆盖继承的样式

a{
    color: red;
    text-decoration: none;
}

14. 列表去掉点

ul{ list-style: none; }
li{ list-style: none; }

15. 隐藏or透明

opacity: 0; 透明度为0，整体
visibility: hidden; 和opacity: 0; 类似
display: none; 消失，不占用位置
backkground-color: rgba(0,0,0,0.2) 只是背景色透明

16. 固定单位

百分比（宽高文字大小 line-height position
em 相对单位，对于父元素字体大小
rem 相对单位，对于根元素（html）字体大小
vw vh 相对单位，1vw为屏幕宽度的1% 兼容性低（查兼容性 caniuse.com）

17. a链接设置颜色

a有默认颜色和样式，会覆盖继承的样式

a{
    color: red;
    text-decoration: none;
}

18. 列表去掉点

ul{ list-style: none; }
li{ list-style: none; }

19. 隐藏or透明

opacity: 0; 透明度为0，整体
visibility: hidden; 和opacity: 0; 类似
display: none; 消失，不占用位置
backkground-color: rgba(0,0,0,0.2) 只是背景色透明

20. line-height

line-height: 2 ;  /*本身文字高度的两倍*/
line-height: 200% ;  /*为父元素高度的两倍*/

height= 50px;  /*height=line-height可以垂直居中单行文本*/
line-height= 50px ;

exampleCss2 | show

css common styles

1. block-level & inline-level

2. width height

3. border

使用border做三角形:

4. padding & margin

padding

margin

margin: 0 auto; 的使用

*去除元素默认 margin、padding

5. display

6. font

7. font-family

8. Chrome最小字体限制

9. text

10. 行内元素居中

11. 单行文本溢出加...

12. 颜色

13. a链接设置颜色

14. 列表去掉点

15. 隐藏or透明

16. 固定单位

17. a链接设置颜色

18. 列表去掉点

19. 隐藏or透明

20. line-height

推荐阅读更多精彩内容