块级元素与行内元素
- 块级（block-level）；行内（内联、inline-level）。
- 块级元素包含块级和行内，行内元素只能包含文本和行为。
- 块级占据一整行空间，行内占据自身宽度空间。
- 宽度设置，内外边距的差异。
- 块级元素：div、h1-h6、p、hr、form、ul、ol、pre、table、li、dd、dt、tr、td、th.
- 行内元素：em、strong、span、br、a、img、button、input、label、select、textarea、code、script.
- 在一行里面可以放很多行内元素，除非放不下才会折行。
宽度：
-
宽度高度只对块级元素设置生效，对行内元素设置无效。
代码示例： - 对于元素一般不设置高度，高度会自动撑开，满足需求，如果设置高度，会出现高度不够，溢出的现象。
边框：不继承
border-width;border-color;border-style;简写boeder: 1px solid red;
border-style:solid(dotted、dashed)
只想设置一个方向的边框：
border-bottom:none没有下边框
border-top:1px solid red;只有上边框
- 圆角：
border-radius:10px;
border-radius: 10px 8px 0 0 ;
如果想变成一个圆形，只要让border-radius的值大于等于width的一半就可以了。或者值为100%或者50%。比较方便，不需要计算。
扩展练习：使用边框做一个三角形
边距：
-
盒模型：用于描述当前元素属性的一个盒子。
1.png -
padding：代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分比性（相对于父容器，不是自身）。不继承。
padding-top;padding-right;padding-bottom;padding-left -
margin：代表外边距，有四个方向的值，可以合写，值也可以是百分比（相对于父容器，不是自身）。还可以是负值。不继承。
-
外边距存在合并问题。
2.对于块级元素，设置margin: 0 auto:可达到居中的目的。 不能有浮动定位等东西。并且width设置成定值才可以使用，因为不设置的时候，宽度是自动充满整个屏幕的。 - 对于行内元素，设置
text-align:center：可达到居中的目的。 -
*{margin:0;padding:0;}对于多有的元素内边距与外边距都设成0，因为页面有很多默认样式，清除页面的默认样式（user agent stylesheet ）。
- 对行内元素，上下的
margin,padding是没有效果的，只有左右的margin和padding才有效果。padding的上下只是用来撑开边框和背景色，但元素内容占据的高度是不变的，不会改变其下元素的位置空间。
代码示例：
display：所有的元素都可以设置，不是继承属性。
- 块级：
block,list-item.table。 - 行内：
inline,inline-block,inline-table。
font
-
font-size:字体大小。 -
font-family:字体，宋体，微软雅黑，Arial等。 -
font-weight:文字粗度，常用的就是默认值regular和粗体bold。 -
line-height:行高，可以用百分比，倍数，或者固定尺寸，文字所占据的垂直空间。 - 以上属性都可以继承给子元素。
代码示例：
- fon-family：使用浏览器打开页面时，浏览器会读取HTML文件进行解析渲染。当读到文字时会转换成对应的unicode码（可以认为是世界上任何一种文字的特定编码）。再根据HTML里设置的font-family（如果没有设置则使用浏览器默认样式设置）去查找电脑里（如果有自定义字体@font-face，则加载对应字体）对应的字体文件。找到文件后根据unicode码去查找绘制外形，找到后绘制到页面上。
- 不是想设置成什么样子的字体就会渲染成什么样子的字体，要看用户的电脑字体库里面有没有这个字体。
- 英文的字体库很漂亮，中文的字体太多，没有那么多样式。
- font-family的写法：在css中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8等）不匹配时会出现乱码。保险的方式是将字体名称用unicode来表示。
宋体 | SimSun | \5BBB\4F53黑体 | SimHei | \9ED1\4F53微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
*打开控制台escape（'微软雅黑'），把%u替换成*
1.png
- chrome最小字体：chromemore字体大小是16px，最小字体是12px，设置小于12px的字体不生效。解决方案：使用CSS3的放大和缩小
-webkit-transform: scale(0.75)：缩小到原来的）0.75倍。
文本
-
text-align：文本对齐方式left、center、right、justify。 -
text-indent：文案第一行缩进距离。 -
text-descoration：none、underline、line-through、overline、。 -
color：文字颜色。 -
text-transform：改变字体文字大小写none、uppercase、lowercase、capitalize。 -
word-spacing：可以改变字（单词）之间的标准间隔。 -
letter-spacing：字母间隔修改的是字符或字母之间的间隔。
代码示例： - 行内元素居中：
text-align: center;。
颜色
- 单词：
red、blue、pink、yellow、white、black。 - 十六进制：#000000黑色；#fff白色；#eee；#ccc；#666；#333；#f00；#0f0；#00f。
- rgb：rgb(255,255,255)；rgb(0,255,0)。
- rgba：rgba(0,0,255,0.5)。a为颜色的透明度。数值越小，透明度越高。
单位：
-
px：固定单位。 - 百分比：宽高，文字大小，line-height，position。
-
em：相对单位，相对于父元素字体大小。 -
rem：相对单位，相对于根元素（html）字体大小。 -
vw vh：相对单位，1vw位屏幕宽度的1%。（具有兼容性很差。caniuse.com）
a链接设置颜色：
a有默认颜色和样式，会覆盖继承的样式。
a { color: red; text-decoration: none;}
对a链接的父元素设置color，a链接不能继承其父元素的color属性，因为浏览器的默认样式会覆盖掉从父元素继承过来的color。继承生效了，但样式被覆盖。
列表去掉点：
ul {list-style: none;}或者li {list-style :none;}因为样式的继承，给ul设置样式，子元素li会继承他的样式。
隐藏or透明
-
opacity:0;透明度为0，整体。 -
vissibility:hidden;：和opacity:0;类似，消失了位置还在。 -
display:none;消失，不占用位置。 -
background-color:rgba(0,0,0,0.2)：只是背景色透明。
代码示例：
背景：页面想加一个背景图片。
-
background：简写属性，作用是将背景属性设置在一个声明中。 -
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。默认情况下滚动。 -
background-color：设置元素的背景颜色。 -
background-image：把图像设置为背景。 -
background-position：设置背景图像的起始位置。 -
background-repeat：设置背景图像是否以及如何重复。 -
background-size：设置背景的大小（兼容性）。
-
background-position：默认左上角。
x y / x% y% / [top | center | bottom ] / [left | center | right] -
background-repeat
no-repeat：背景图片在规定位置。
repeat-x：图片横向重复。
re[eat-y：图片纵向重复。
repeat：全部重复。 -
background-size：拉伸图片。
100px 100px | contain | cover - 页面即设置了背景色又设置了背景图片：如果图片很小，图片是覆盖在背景色上面的，除去图片的部分都是背景色；如果图片是png格式的，是透明的，背景色就会从透明的地方透出来。
- 图片是背景图片，相当于元素是一个窗口，图片是后面的风景，窗口没有，风景也看不出来。比如div元素设置宽高就是创建一个窗口。
- 对于行内元素，设置
margin padding对于元素的背景色和边框是有效果的，只是元素本身的位置不发生变化。 - 设置宽度和高度是对元素进行设置的，但是设置
background-size是对背景图片设置其大小。 -
background-size的属性值为：contain图片和窗口的比例不同，设置contain图片会对应窗口进行一个等比的缩放。cover图片的高度会充满窗口，但是左右不会。
一定要把容器撑开。
css Sprite
- 指将不同的图片/图标合并在一张图上。
- 使用
CSS Sprite可以减少网络请求，提高网页加载性能。
隐藏OR透明
-
opacity:0：透明度为0. -
visibility: hidden：和opacity:0类似。 -
display:none：消失，不占用位置。 -
background-color: rgba(0,0,0,0.2)：只是背景色透明。
inline-block
- 即呈现
inline特性（不占据一整行，宽度由内容宽度决定）。 - 又呈现
block特定（可设置宽高，内外边距）。 - 缝隙问题。去缝隙方法
代码示例： - 行内元素默认基线对齐，如果想顶部对齐的话，添加一个
vertical-align:top
代码示例： -
vertical-align是和行内元素和表格绑定到一起的。
line-height：用于设置单行文本的行高。可以被继承。
-
line-height：2:相当于本身文字的高度的两倍,就算是继承的，也是本身的两倍。 -
line-height:100%:是他父元素文字高度的2倍。若是继承的话，则是直接是父元素的200%。 -
height = line-height来垂直居中单行文本。
代码示例：
区别：
- W3C标准中
padding、border所占的空间不再weight、height范围内。俗称的IE盒模型width包括content尺寸+padding+border。 - 添加
!doctype使用标准盒模型，width=content. -
box-sizing: content-box：W3C标准盒模型。 -
box-sizing: border-box:IE盒模型。
