块级元素行内元素
- 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
用来设置属性表格边框间的距离
