HTML+CSS初学日常知识点-二

一.文本相关样式

1. text-align 文本水平对齐方式

值： left  默认  左对齐
          right   右对齐
          center   居中对齐
          justify    两端对齐
 

2. text-indent 首行缩进

值： 数值+单位 常用em作为单位

3. text-decoration 文本修饰

   值：none  无修饰
          underline   下划线
          line-through   中划线
          overline    上划线

4. text-transform 文本大小写转换

   值:  uppercase  全大写
         lowercase   全小写
         capitalize    首字母大写

  5. letter-spacing   字母与字母之间的距离/汉字与汉字之间的距离：normal/数值

  6. word-spacing   单词与单词之间的距离

  7.  单行显示省略标记

     text-overflow  文本溢出
     white-space 空白处理
     white-space : nowrap ;     强制不换行
     overflow : hidden ;        内容溢出隐藏 visible  默认 溢出部分可见 scroll  显示滚动条 auto 自动处理
     text-overflow : ellipsis ;    文本溢出显示省略标记
 

二.伪类选择器

    选择器:link{ }   未访问状态
    选择器:visited{ }   访问后状态
    选择器:hover{ }  鼠标悬停状态
    选择器:active{ }  鼠标激活状态

LoVe  HAte   爱恨原则

三.盒子模型

1.分类

标准盒子模型 w3c标准盒    盒子大小=content大小+padding+border

怪异盒子模型    盒子大小=width/height 内容大小
                            盒子大小= width+padding+border

2.内容大小

    width   宽度
    height  高度

    溢出处理    overflow-x   overflow-y
    overflow : visible    默认  溢出部分可见
    overflow : hidden    溢出部分隐藏
    overflow : scroll      溢出部分滚动条
    overflow : auto       浏览器自动处理
 

  3.内边距  内补丁  内填充

   padding-top   上内边距
   padding-bottom    下内边距
   padding-left        左内边距
   padding-right     右内边距

   缩写：
   padding ： 值；            四周的内边距一样
   padding ： 值1  值2；     值1代表上、下内边距，值2代表左、右内边距
   padding ： 值1  值2  值3；       值1代表上内边距，值2代表左、右内边距，值3代表下内边距
   padding ： 值1  值2  值3  值4；    值1代表上内边距，值2代表右内边距，值3代表下内边距，值 4代表左内边距，按顺时针方向