CSS基本样式知识点

块级元素

1. 块级元素可以包含块级和行内元素
2. 块级元素占据一整行空间
3. 块级元素可设置content的宽高(width、height）
4. 块级元素可设置内外边距margin和padding。
   5.margin: 0 auto;用在块级元素上
5. 常见的块级元素：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th

行内元素

1. 行内元素只能包含文本和行内元素
2. 行内元素占据自身宽度空间
3. 行内元素不能设置content的宽高(width、height）
4. 行内元素可设置左右内外边距margin和padding，但对上下margin和padding不生效（对背景色生效，可以撑开边框，边框是包括了content和padding，背景色同样包含了content和padding）
5. text-align: center;用在行内元素的父容器上，对行内元素生效
6. 常见的行内元素：em strong span a br img button iput label select textarea code script

inline-block

1. 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
2. 又呈现 block 特性 (可设置宽高，内外边距)

3. 缝隙问题

   
   屏幕快照.png

method1.png
method2.png

4. 对齐问题

   
   屏幕快照.png
   ![ 上对齐.png
   下对齐.png

特例

img具有块级元素的属性，可以设置宽高width和height，内外边距padding和margin。

font

1. font-family查看字体的Unicode码可以通过打开控制台 escape('微软雅黑')，把 %u替换成 \实现
2. line-height用百分比表示行高是父元素行高的百分比，用数字表示是指行高是自身字体高度的几倍

文本

3. height = line-height来垂直居中单行文本

   
   line-height.png

4. text-align：文本对其方式 left、center、right、justify

5. text-indent：文案第一行缩进距离

6. text-decoration： none、underline、line-through、overline

7. color：文字颜色

8. text-transform：改变文字大小写none、uppercase、lowercase、capitalize
   word-spacing：可以改变字（单词）之间的标准间隔

9. letter-spacing：字母间隔修改的是字符或字母之间的间隔

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

.card > h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

背景

使用背景图片时，必须把窗口撑开。

background.png
background.png
background.png

盒模型

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

1. 标准盒模型

   
   标准盒模型.png

2. IE盒模型

   
   IE盒模型.png

3. 使用css3新样式box-sizing
   box-sizing: content-box：w3c标准盒模型
   box-sizing: border-box：“IE盒模型”

其他

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

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

2. 列表去掉点

ul{
  list-style: none;
}
/*也可这样*/
li{
  list-style: none;
}

3. 隐藏OR透明

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