css第二天

二丶

1.字体属性font：

字体名称（font-family）
字体大小（font-size）：pc中通常，字体大小表示为12px，14px。移动设备中通常表示为0.57rem。
字体粗细（font-weight）：设置或检索文本字体的粗细
字体样式（font-style）
行高（line-height）
字体颜色（color）
英文大小写（text-transform）
文本修饰线（text-decoration）：none无修饰。underline下划线。overline上划线。line-through贯穿线。blink闪烁。

font字体复合属性：
写法：
font：
font-style
font-weight
font-size/line-height
font-family
注意：书写时要注意顺序，否则不会生效。font的最精简形式也必须是（font：12px/24px 字体），否则不会生效。

2.文本属性Text：

字母间距（letter-spacing）：
单词间距（word-spacing）：
文本水平对齐（text-align）：默认左对齐，left左对齐，right右对齐， center居中。
垂直对齐（vertical-align）：垂直对齐方式只对表格单元格有效，对盒子模型无效。注：盒子模型的垂直居中，可以通过行高或者内边距解决。
文本缩进（text-indent）：p{text-indent：2em}，一个em就是一个汉字。
是否自动换行（white-space）：normal默认处理，pre预格式显示文本，nowrap强制在同一行显示所有文本，直到遇到<br>或文本结束。
文本溢出标识（text-overflow）：clip直接裁切，ellipsis文本溢出时显示省略标记。注：通常与white-space：nowrap；overflow：hidden；配合使用。
b

3.背景属性background：

背景颜色（background-color）：
背景图片（background-image）：
背景平铺（background-repeat）：repeat横纵都平铺，no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺。
背景图尺寸（background-size）：cover：将背景图等比缩放完全覆盖容器，背景图可能超出容器。contain：背景图像等比缩放与容器相同，背景图片始终在容器内。

背景图像定位（backgronud-position）：垂直（top顶部，center中间， bottom底部），水平（left，right，center），默认左上。
用法：backgronud-position：水平位置 空格 垂直位置。

（背景图固定）background-attchment：默认scroll，图像可以滚动，fixed固定图像

背景复合（简写）属性：
简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
属性无需全部使用，按照页面的实际需要使用.

4.盒子模型：
内容（content）， 填充（padding），边框（border），边界（margin），都是盒子模型具备的属性。

内容：文字图片，还可以是其他盒子。
填充：内容距离边框的间距。
边框：就是盒子的边线。
边界：盒子与盒子间的距离。
注：边界，边框，填充，都有上top，下bottom，左left，右right四个方向可以设置。

宽度：width；
高度：height；注意：只有块元素可以设置高度，行内元素无法设置高度。
最大高度：max-height，当内容小于预设高度时，高度自适应，超出时任然会溢出。
最小高度：min-height，当内容超出预设内容时，盒子高度会自动延伸。

内边距：
四边相同时：padding：50px；
四边不同时：
（1）方法一
padding-top:50px;
padding-left:30px;
padding-bottom:60px;
padding-right:70px;
（2）方法二（复合属性,顺序固定上右下左）
padding：50px,10px,40px,80px;
（3）方法三（若上下相同，左右相同时）
padding：上下边距 空格 左右边距；

外边距（margin）：
用法与内边距大致相同。
注意：外边距的效果在不同浏览器的效果不同建议尽量少用。

边框（border）：

第一种（四边都有边框）
边框样式种类：无边框none，点线dotted，虚线dashed，实线solid，双线double，凹槽groove，凸槽ridge，凹边inset，凸边outset。
简写：
border：样式 空格 宽度 空格 颜色；
完整写法：
border-style：样式；
border-width：宽度；
border-color：颜色；

第二种（边框数少于四边）
border-top，border-bottom，border-left，border-right。

表格边框合并table
属性：border-collapse，设置表格的边框是否为单一边框，默认分开（separate），合并（collapse）。
步骤：
（1）制作单元格的边线框。
（2）把中间的双线合并成单线。

5.鼠标的形状：cursor
pointer：手型；