css基本样式

块级元素行内元素

• block-level line-level
• 块级元素包含块级和行内
• 行内只能包括含文本行和行内

块级元素

div h p hr
form ul dl ol
table li dd dt dd dh

inline-level

`em strong span a br img button input label select textarea

宽度

只对块级元素有效，对行内元素无效

边框

border-width,border-color,border-style

boder-style

• dotted
• solid

缩写

border:2px blue solid;

border-bottom

下边框

设置三角形

把边框设置为border-style:transparent

设置圆形

border-radius：50px

边距

margin boeder padding

padding

padding内边距，有四个方向
padding-top padding-right padding-bottom
padding-left

• padding 10px 20px;
  上下10px 左右为20px
• padding 10px 20px 30px
  上为10px

margin

外边距
边距合并问题

margin 0auto

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

display

• 块级:block,list-item,table
• 行内:inline,inline-table,inline-block

对于行内元素

• 左右margin，paddig生效，上下margin，padding不生效
• margin和padding对上下的边框和背景色产生影响

图片呈现的inlinle

• 与inline-block非常相像

• inherited：no不继承

font

• font-size:字体大小
• font-famil
• font-weight
• font-height
• 以上元素都可以被继承为子元素

用法

• 缩写 font-size/line-height font-family

font-family

• 使用浏览器打开页面时，会读取HTML文件进行解析渲染。当读到文件的时候，再根据HTML里设置的font-familu去查找电脑里对应字体的字体文件。找到文件后根据
• 用户的系统里面有没有对应的字体户
• 中文只有常见的几种字体库
• 用户电脑里面没有这个字体

-写法

直接将字体名称用unicode方法
escape(‘黑体’)
直接写中文的情况下编码会出现乱码的情况

Chrome的默认字体

• 默认字体大小为16px最小字体为12px

文本

• text-align
• text-indent
• text-decoration（下划线）
• color
• text-transform (改变文字的大小写)
• word-spacing:可以改变字(单词)之间的标准间隔
• letter-spacing

text-align

• justify

让文本的每行最后的空白不留空，对最后一行没有效果.

text - transfrom

• capitalize
• 文字的首字母变成大写了

text -align

• 使得块级元素里面的行内元素水平居中

图像问题小测

• white-space:nowrap
  不折行
• overflow:hideen
  超出的地方进行隐藏
• text-overflow:ellipsis
• 文本超出的部分进行···符号

颜色

• 单词
• 十六进制的表示方式
• rgb: rgb(255,255,255)
• #000黑色 #fff白色
• rgba(0,0,0,0.5)
  0.5是一个透明度
  数值越小透明度越高

单位

• px:固定单位
• 百分比
• em (相对于父元素的字体大小)
• rem （相对根元素(html)字体大小,不会根据父元素的字体大小）
• vw (和屏幕的宽度呈现相关性)

a

• 继承的color样式被默认样式所覆盖

列表去掉点

• ul list-style:none

隐藏or透明

• opacity: 0;透明度为0，整体
• visibility:hidden;
• display:none
• background-color:rgba(0,0,0,0.2)只是背景色是透明的

行内元素和块级元素

• 文字和字母也是属于行内元素的

inline-block

• 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

cusor

该cursor属性指定在指向元素时要显示的鼠标光标。

transtion

CSS转换允许您在给定的持续时间内平滑地（从一个值到另一个值）更改属性值。

border-collspace

• 用来表示表格是否为合并操作

nth-child(even)

匹配其父元素的偶数元素

border-spacing

用来设置属性表格边框间的距离