css文本 表格 定位 显示 列表

文本格式化

• 文本格式化
  • 控制字体：如字体大小、字体加粗、字体系列等
  • 设置文本格式：如文本颜色，文本排列和文本缩进等
• 字体属性
  • 指定字体：font-family : value1,value2;
    字体值中包含中文或特殊符号时，必须使用 "" 引起来
  • 字体大小：font-size : value;
    取值px、pt或em
  • 字体加粗：font-weight:normal/bold/value;
    normal : 正常
    bold : 加粗,b,strong,h# 默认值
    400 - 900 : 整百倍数的数字
  • 字体样式：font-style : normal/italic;
    normal : 正常
    italic : 斜体，i标记 默认值
  • 小型大写字母：font-variant : normal/small-caps;
    normal : 正常
    small-caps : 小型大写字符
  • 字体属性简写：font : font-style font-variant font-weight font-size font-family;
• 文本属性
  • 文本颜色：color:value;
    合法的颜色值
  • 文本排列： text-align:left/right/center；
    向左/右/中对齐
  • 文本修饰：text-decoratoin:none/underline;
    none：无下划线
    underline： 下划线
  • 行高： line-height:value;
    将行高设置和容器的高一样，可以实现单行文本的垂直居中
  • 首行缩进： text-indent:value;
    通过2em实现中文段落开头两个字的缩进
  • 文本阴影：text-shadow:h-shadow v-shadow blur color;
    文本的阴影效果建议设置较小的值

表格

• 表格常用属性
  • 尺寸：width/height
  • 边框：border
  • 内边距：padding
  • 文本格式化属性：font/text
  • 背景属性：background
• 表格特有属性
  • 边框合并：border-collapse:separate/collapse;
    separate : 默认值，分离边框
    collapse : 合并边框
  • 边框边距：border-spacing
    指定一个值：垂直与水平之间的距离相等
    指定两个值：第一个值，表示的是水平间距，第二个值表示的是垂直间距。中间用空格隔开。
  • 标题位置：caption-side
    top:表格标题定位在表格之上，为默认值
    bottom:表格标题定位于表格之下
  • 显示规则：table-layout
    atuo:列宽度由单元格内容设定，为默认值，即自动表格布局
    1、单元格大小会适应内容大小
    2、表格复杂时，加载会比较慢
    3、适用于不确定每列大小时使用
    fixed:列宽由表格宽度和列宽度设定，即固定表格布局
    1、单元格宽度由表格以及单元格设置的数据为主，与单元格内容无关
    2、会加速显示表格(加载时不需要计算每列的宽度)
    3、缺点为：不够灵活

定位

• 定位方式
  • 普通流定位（默认定位方式）又称文档流定位
  • 浮动定位
  • 相对定位
  • 绝对定位
  • 固定定位
• 浮动定位
  • 特点：
    1. 让相应的div脱离正常的文档流
    2. float只有左右浮动，没有上下浮动
    3. 如果元素想做左浮动，该元素会一直往左移，知道碰到另一个浮动框为止。如果碰到元素包含框也会停止浮动
    4. 如果浮动框高度不等，右边的浮动框会继续被左边的浮动框挡住。
  • 属性：float:left/right;
    none : 默认值，无浮动
    left : 左浮动
    right: 右浮动
  • 清除浮动clear：清除浮动带来的影响
    none ：默认值，无清除效果
    left : 清除 左边(之前)的浮动元素所带来的影响
    right : 清除 右边(之后)的浮动元素所带来的影响。
    both:清除左右两边的浮动元素对当前元素所带来的影响。
• 相对定位position：relative;:相对于元素本身的位置去偏移某个距离
  取值top/bottom/right/left:value;
  堆叠顺序z-index：value;
• 绝对定位position：absolute;：
  • 绝对定位的元素会脱离文档流
  • 绝对定位的元素会变成块级元素
  • 绝对定位的定位位置是相对于最近的已定位的祖先元素来实现定位。如果元素没有已定位的祖先元素，那么它的位置就相对于最初的包含框，去实现定位。
• 固定定位position：fixed;
  • 将元素固定在页面的某个位置处，不会随着滚动条而发生位置的变化。
  • 脱离文档流，不占据页面空间。

显示

• 概述：页面上所有的元素都可以显示为框，除了默认的显示效果之外，可以使用display属性来修改元素框的显示方式，即改变生成的框的类型
• display
  • none让生成的元素没有框，即不显示(隐藏)，会使元素脱离文档流,即不占据页面空间
  • block让当前元素 表现的 和块级元素一致。即 将当前元素变成块级元素
  • inline让当前元素 表现的 和行内元素一致。即 将当前元素变成行内元素
    注意：尽量不要将块级元素 改变成 行内元素。
  • inline-block行内块：本身是行内元素，但又具备块级元素的特征。即 一行内允许显示多个元素，并且可以修改宽和高
• visibility
  • visible：默认值，元素可见
  • hidden:元素不可见，但是依然占据空间
  • collapse:用在表格元素时，可删除一行或一列，且不影响表格的布局
• 透明度opacity
  取值：0.0(完全透明) - 1.0(完全不透明) 之间的数
• vertical-align
  • 设置 td 的 垂直对齐方式
  • 可以设置行内块(img等)元素的垂直对齐方式，给img设置vertical-align，设置图片两端的文本相对于图片的垂直对齐方式。
  • 属性vertical-align
    取值：top,middle,bottom,baseline(默认值，基线对齐)
• 光标
  • 属性 cursor
  • 取值：
    default : 默认值
    pointer : 小手
    crosshair : +
    text : I
    wait : 等待
    help : 帮助

列表

• 列表项标志list-style-type
  • none ：没有
  • disc ：实心圆
  • circle ：空心圆
  • square ：实心方块
• 列表项图像list-style-image
  url(图像路径)
• 列表项位置list-style-position
  • outside ：标记位于文本之外,默认值
  • inside ：标记位于文本之内
• 简写list-style
  • 取值：type url() position;