css基础_常用属性

1. css像素
   单位px
2. css颜色
   rgb光的三源色(red，green，blue)

color表示方法	使用
颜色名	如red，参考文档 : mdn颜色名
rgb	如 : rgb(138,43,226)紫罗兰色，也可以写百分比形式
rgba	如 : rgba(138,43,226,0.5)0.5表示透明度一半，范围0-1，0完全透明，透明度也可写百分比形式
HEX	如 : #ff0000 ，不区分大小
HEXA	如 : #ff000088 ，后两位数88表示一半透明度，IE不支持HEXA
HSL	如 : hsl(0,100%,50%)，100%是饱和度，50%是亮度
HSLA	如 : hsla(0,100%,50%,50%)，最后50%是透明度

3. css常用字体属性

属性	含义
font-size	字体大小，像素px，可继承 ，chorme流量器默认最小字体12px，由于字体设计原因，字体实际大小不一定与font-size值一致
font-family	字体族，window默认微软雅黑(非衬线),使用时加引号，可以设置多个字体族，逗号隔开，前面字体失效向后找，sans-serif作为非衬线(笔画粗细相似)类型字体结尾 ，如果写的字体失效，找一个电脑存在的非衬线字体，serif作为衬线类型字体结尾
font-style	字体是否倾斜，取值 : normal(默认值，正常) ，italic(倾斜)，oblique(倾斜)
font-weight	字体粗细，取值 : normal(默认值，正常) ，lighter(细)，bold(粗)，bolder(更粗)，或从100-1000取值数字
font	字体复合属性，如font : bold italic 20px "楷体",serif，字体族必须最后，字体大小必须倒数第二位

4. css常用文本属性

属性	含义
color	颜色
letter-spacing	字母间距
word-spacing	单词间距，中文不生效
text-decoration	文本修饰，如 : text-decoration:overline dotted red，取值 : nono(不生效)，overline(上划线) ，underline(下划线)，line-through(删除线)，dotted(虚线)，wavy(波浪线)
text-indent	文本缩进，取值 : 像素px
text-align	水平文本对齐方式，取值 : left(默认)、center、right
line-height	行高，最小为0，可以被继承，取值 : normal(默认值) 、数值(1.5-2，1.5倍到2倍)、百分比、像素px
vertical-align	用于指定同一行原素之间，或表格单元格内文字的垂直对齐方式，取值 : baseline(默认值，基线对齐)、middle(近似居中，使原素中部与父原素x中点对齐)、top 、bottom，不能控制块原素

5. css列表相关属性

属性	含义
list-style-type	列表符号，取值 : none(无符号)、decimal(数字) 、square(实心方块)、disc(圆形)等
list-style-position	列表符号定位，取值 : inside(在li里面) ，outside(在li外面)
list-style-image	自定义列表符号，取值 : url("./xxx.jpg")
list-style	复合属性， 上三个属性写一起，无数量顺序要求，适用于ol、ul、li

6. css边框相关属性

属性	含义
border-style	边框类型，取值 : none(默认值)、solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)
border-color	颜色
border-width	边框宽度
border	复合属性，如 : border:1px solid red ，无顺序数量要求

7. css表格独有属性

属性	含义
table-layout	表格列宽，取值 : auto(默认值，自动宽度)，fixed(平均分)
border-spacing	表格间距
border-collapse	合并相邻单元格边框，取值 : collapse(合并)、separate(不合并)
empty-cells	隐藏没有内容单元格，取值 : hide(隐藏)、show(显示)
caption	表格标题位置，取值 : top、bottom

8. css背景相关属性

属性	含义
background-color	背景颜色，transparent(默认值，透明)
background-image	背景图片
background-repeat	背景图片重复方式，取值 : repeat(默认值，重复)、no-repeat、repeat-x(只在水平方向重复)、repeat-y
background-posotion	背景图片位置，取值 : 1.(关键词)left、right、center、top、bottom，如:background-position:center left，2. 数值，如:background-position:10px 20px，如果两个值只写一个，另一个默认居中
background	复合属性，没有数量顺序要求

9. css鼠标相关属性

属性	含义
cursor	鼠标箭头样式，取值 : pointer(手)、move(移动)、text(文字选择器)、wait(转圈)、help(帮助)、crosshair(十字架)等或者自定义如:cursor:url("./"), pointer

10. css长度单位

单位	含义
px	像素
em	相对应当前原素或父原素倍数
rem	相对于根元素(html)的font-size的倍数
%	相对于父原素百分比

11. css原素显示模式

类型	含义
块元素(block)	独占一行，默认宽度撑满父原素，默认高度内容撑开，可以css设置宽高，如 : body、div、p、table、form、ol、ul、h1-h6、option
行内原素(inline)	不独占一行，默认宽高由内容撑开，不能css设置宽高，如 : span、em、strong、br、a、label
行内块原素(inline-block)	不独占一行，默认宽高由内容撑开，可以css设置宽高，如 : img、th、td、input 、select、button、textarea、iframe

12. css修改原素显示模式

display属性值	含义
none	不显示原素
block	原素作为块元素显示
inline	原素作为行内原素显示
inline-block	原素作为行内块原素显示

13. css盒子模型组成部分

属性	含义
content	内容区
margin	外边距，不会影响盒子大小，会影响盒子位置
padding	内边距，补白
border	边框

14. css默认宽度
    不设置width时，原素的宽度=父原素content-左右margin
15. css内边距padding
    padding:1px 2px 3px 4px上右下左内边距
    padding:1px 2px上下1px，左右2px
    padding不能为负数，行内原素上下内边距不占位
16. css外边距margin
    margin:0 auto块级元素水平居中，margin可以为负值
17. css外边距margin塌陷
    第一个子元素的上margin和最后一个子原素的下margin会作用于父原素上，可以给父原素设置border属性或padding属性，或者设置overflow:hidden
18. css外边距margin合并问题
    上面兄弟原素的下外边距和下面兄弟原素的上外边距会合并取一个最大的值
19. css内容溢出

overflow值	含义
visible	默认值，超出部分显示
hidden	超出部分隐藏
scroll	加上滚动条
auto	内容溢出，显示滚动条，内容不溢出，不显示

20. css隐藏原素的方式

方式	含义
dispaly	none，原素隐藏，隐藏后不占位
visibility	show(默认值，原素显示) ，hidden(原素隐藏)，隐藏后占位

21. css样式的继承
    能继承的都是不影响页面布局的属性
22. 原素默认样式

原素	默认样式
body	8px外边距
a	下划线，字体颜色，鼠标箭头形状
h1-h6	文字加粗、大小，上下外边距
p	上下外边距
ol、ul	左内边距

23. css布局技巧
    水平居中 : 如果子原素为块原素，设置margin:0 auto，如果为子原素是行内原素或行内块元素，设置text-align:center。
    垂直居中 : 如果子原素是行内原素或行内块原素，设置line-height=height，并且每个子元素加上vertical-align=middle，若想绝对垂直居中，设置父原素font-size:0
24. css原素之间空白
    原因 : 行内原素或行内块原素直接换行会被解析为空白字符。
    方案 : 给父原素设置font-size:0，再给需要字体大小的单独设置。
25. css行内块原素的幽灵空白
    原因 : 行内块元素与文本的基线对齐
    方案1 : 给行内块原素设置vertical-align不等于baseline即可。
    方案2 : 若只有一张图片，设置设置图片display:block。
    方案3 : 给父原素设置font-size:0。