CSS学习笔记[3]——CSS常见样式[上]

块级元素和行内元素

• 块级（block-level）；行内(内联、inline-level)
• 块级元素可以包含块级和行内，行内只能包含文本和行内（a标签除外）
• 块级占据整行空间，行内占据自身宽度空间
• 宽高设置、内外边距的差异

block-level

div h1~6 p hr form
ul dl ol pre table
li dd dt tr td th

inline-level

em strong span a br img
button input lable select textarea
code script

宽高

只对块级元素生效，对行内元素设置无效

边框

border-width
border-color
border-style

边距

padding
margin

• 对于块级元素设置margin:0 auto可以实现水平居中

display

inline | block | list-item | inline-block | table | none | inherit

font

font-size
font-family
font-weight
line-height
// 以上属性都可以继承给子元素
font: 12px/1.5 tahoma,arial; //1.5是line-height

浏览器默认字体大小16px；中文版chrome最小字体12px

文本

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

颜色

单位

• px
• 百分比

width: 50% ; //相对父宽度

• em：相对单位，相对于父元素字体大小
• rem：相对单位，相对于根元素（html）字体大小
• vw vh：相对单位，1vw为屏幕宽度的1%（兼容性https://caniuse.com/#search=vw）