css

#一、CSS
驼峰命名法
headerTitle  phoneNumber
##1.CSS基础样式
基础样式  img行内可设宽高（特殊）
其他行内元素都不能设置宽高
<style>
div{width:100px;height:100px;
border:1px solid red;}
</div></style>
##块级元素与行内元素之间的转换
属性：display
属性值：
block <块级元素>  
inline <行内元素>  无法设置宽高
inline-block <行内块元素>  可设置宽高且不换行
注意：宽高带上单位：px
##2.背景属性
background-color  背景默认不覆盖自提
###背景图像
background-img:url("图片位置"）；加引号
body{background-image:url("picl.jpg")}
图片小，背景大，图片平铺
###背景平铺
属性：background-repeat
属性值：repeat-x  横向平铺
       repeat-y  纵向平铺
    no-repeat  不平铺图片原大小
     repeat x,y平铺（默认）
###背景定位
属性：background-position
属性值：center   图片的位置
        right
        left
        top
        bottom
        40% 50%  需要x，y两个值，横纵向移动
        50px 100px  同上，移动px个单位
###背景关联
属性：background-attachment
属性值：scroll  图片不随网页滚动条移动
    fixed  图片随网页滚动条移动
图片位置为相对于可视区域
###背景尺寸
属性：background-size:  图片大小
属性值：长度值  100px  100px;
    100% 100% 百分比   图片显示充满背景框
    cover 图片放大或缩小铺满父集，不显示完整图片，不留空，超出部分裁剪
    contain  图片铺满合适面积，显示完整图片，不铺满边框，有留空
cover和contain：图片本身的宽高比例保持不变
若只设一个值，另一个值为auto
##规定背景定位   p标签自带外边距
属性：background-origin  图片是否与边框重合
属性值：padding-box  图片与边框不重合（默认）
    border-box   图片与边框重合
    content-box  图片契合文本
边框：solid实线  dotted虚线
##背景绘制区域
属性：background-clip
属性值：border-box   将边框外的图片裁剪
    padding-box 裁剪图片与边框重合部分
    content-box  讲文本内容外的图片裁剪
简写：background：red url（“”）    ；
顺序：color image repeat attachment position/size origin clip
#3.字体属性
font-family(字体)：“Arial”、“宋体”、“黑体”
font-style（样式）：normal、italic（斜体）或oblique(倾斜）
font-variant(字体变化）：normal、small-caps（小写字母转小型大写字母）
font-weight（字体粗细）：normal、bold（加粗）、bolder  数字900通同加粗
font-size（字体大小）：20px（一般为偶数防失帧）  单位px
<em></em>自带倾斜的标签;行内元素
font 简写顺序
font-style font-variant font-weight font-size font-family
简写中必含font-size和font-family
常用：body{font-family}
font-family:**,**;
#4文本属性
##文本颜色
属性：color 只作用于文本
##缩进文本
属性：text-indent
属性值：2em（常用） 缩进两个字符
    正数
    负数
    百分比
注意：只对块级元素有效
##水平对齐
属 性： text-align  行内效果不计
属性值： left    需要相应的宽高
center
right
##垂直对齐   
属 性： vertical-align   相对于当行
属性值： baseline <!-- 基线对齐（ 默认） -->   img除外，可使改行内元素对齐
top <!-- 顶部对齐 -->
middle <!-- 居中对齐 -->
bottom <!-- 底部对齐 -->
长度值
##词间隔
属 性： word-spacing   单词之间空格
属性值： 正长度值  调整距离
负长度值   数字+px
##字间距
属 性： letter-spacing
属性值： 正长度值   30px
负长度值   
##字符转换
属 性： text-transform
属性值： none（ 默认）
uppercase 大写 
lowercase 小写 
capitalize 首字母大写
##文本装饰
属 性： text-decoration
属性值： none 无装饰  可去掉标签a的下划线
underline 下划线  配合a:hover{}悬停下划线
overline  上划线 
line-through  贯穿线 
##文本换行
属 性： word-wrap
属性值： normal  不自动换行  单个英文单词
break-word <!-- 自动换行  无视单个英文单词
##行高
属 性： line-height
属性值： 长度值  30px；每一行的高度；字体在行内
##文本阴影
属 性： text-shadow
属性值： x轴 y轴 opacity（ 模糊值） color（ 颜色）
对应：橫移 纵移 越大越不清楚
box-shadow：用法相同
框的阴影
#5 列表属性
##列表项标记样式
属 性： list-style-type
属性值： none <!-- 无标记 -->
disc <!-- 实心圆 -->
circle <!-- 空心圆 -->
square <!-- 实心方块 -->
decimal <!-- 数字 -->
##列表项图像标记
属 性： list-style-image
属性值： url("图片路径")
##列表项标记位
属 性： list-style-position
属性值： outside <!-- 标记在文本以外 -->
inside <!-- 标记在文本以内
list-style：image type position（顺序可打乱）
#6 边框属性
##边框样式
属 性： border-style
属性值： none <!-- 无边框 -->
dotted <!-- 点线 -->
solid <!-- 实线 -->
double <!-- 双线 -->
dashed <!-- 虚线 -->
border-style：上 右 下 左  矩形框内分别设置线
三个值：上  左右  下
两个值：上下  左右
##边框宽度
属 性： border-width
属性值： thin <!-- 细边框 -->
medium <!-- 中等边框（ 默认） -->
thick <!-- 粗边框 -->
长度值 <!-- 自定义宽度 -->  单位px
##边框颜色
属 性： border-color
属性值： 各种类型的颜色值
同style一样 可设置四个方向，方法相同
##单方向边框
属 性： border-top <!-- 上边框 -->
border-right <!-- 右边框 -->
border-bottom <!-- 下边框 -->
border-left <!-- 左边框 -->
属性：width style color（ 三个值的顺序可以打乱）
#7 轮廓属性
属 性： outline 
不占位置，与其他元素重合
#8 表格属性
##表格边框
属性： border
table, th, td {
border: 1px solid blue;
}
##折叠边框
属 性： border-collapse
属性值： collapse
table框变成单线框