饥人谷学习第7天

CSS常见样式

块级元素行内元素

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

• block-level：
  div 、 h1~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

宽高

只对块级元素生效而对行内元素无效。

边框

三个属性：border-width,border-color,border-style
直接设置border:width color style;
或者可以单独设置上下左右边框

边距

padding：代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）
margin：代表外边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）。还可以是负值
外边距合并问题
margin: 0 auto（对于块级元素设置可以达到居中目的）
*{
margin:0;
padding:0;
}去除元素默认样式

对于行内元素来说，上下的margin、padding是不生效的，只有左右的才生效

display

块级：block、list-item、table
行内：inline、inline-table、inline-block
Initial（默认）：inline
Applies to（应用于）：all elements
Inherited（继承）：no

font

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

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

• font-family 的写法
  在CSS中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8等）不匹配时会产生乱码。保险的方式时将字体名称用Unicode来表示。

打开控制台escape('微软雅黑'),把%u替换成\ 就是unicode。
Chrome最小字体12px，默认字体16px。

文本

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：字母间隔修改的是字符或字母之间的间隔

单行文本溢出加_
white-space:nowrap;设置不要折行
overflow：hidden；设置超出元素隐藏
text-overflow：ellipsis；设置隐藏文本的形式

颜色

1.单词:red,blue，pink...
2.十六进制:#000000,#fff...
3.rgb:rgb(255,255,255),rgb(0,255,0)
4.rgba:rgba(0,0,0,0.5) 0.5透明度

注意：给a链接设置颜色要定位到a链接设置color，不要对其容器div等设置字体颜色等。

单位

1.px:固定单位
2.百分比
3.em:相对单位，相对于父元素字体大小
4.rem:相对单位，相对于根元素(html)字体大小
5.vw vh:相对单位，1vw为屏幕宽度的1%兼容性