8-14 钟申义 日志

学习总结：
设置字体大小
font-size px pt em rem

   设置字体类型
    font-family
    设置字体加粗
        font-weight     normal   lighter   bold   bolder   无单位的数字，100的整数倍，100~900

    设置字体样式
        font-style   normal    italic

    小型大写字母
        font-variant   normal   small-caps    （inherit应该从父元素继承 font-variant 属性的值）

    字体属性的简写方式
        font:style variant weight size family;

        font:itailc small-caps bold 40px chiller;

        font:size family;
文本属性
    设置字体颜色
        color颜色的单词
            #rrggbb       #ff0000：红色
            #rgb            #f00：红色     rgb(r,g,b)     rgb(r%,g%,b%)     rgba(r,g,b,alpha)     transparent 透明，相当于rgba(0,0,0,0)
    文本对齐方式
        text-align   left   center   right   justify    
        text-align:center 和 margin:auto 的区别
            1. text-align:center;  设置这个元素内部的内容(文本、行内元素、行内块)水平居中对齐，但是不会块级元素居中对齐，但是后代的块级元素会继承 text-align:center; 属性
            2. margin:auto;  让元素本身水平居中
    行高  line-height
            属性取值
                1. 以px为单位的数字，一般，行高的值与容器的高度值相同，让文本在容器中垂直居中显示。但是，如果文本有多行，不建议使用行高
                2. 无单位的数字(整数都可以)，行高的值为字号的倍数
            特点
                1. 定义一行数据的高度
                2. 如果行高高度大于字体大小，换行文本将在指定的行高内，呈垂直居中的方式显示
            设置文本内容垂直居中    line-height: height
    文本的线条修饰
        text-decoration   underline  overline  line-through   none

    首行缩进
        text-indent   以px为单位的数字
    文本阴影
        text-shadow:h-shadow v-shadow blur color

    轮廓
        只能是-webkit-：chrome、safari
  八、背景
背景颜色   background-color

背景图片    background-image:url(图片路径);

背景图片的平铺    background-repeat   repeat：默认值，平铺   no-repeat：不平铺    repeat-x：x轴平铺    repeat-y：y轴平铺

背景图片的定位  background-position
                                x,y 以px为单位的数字，定义横向偏移和纵向的偏移位置
        关键字 x:left/center/right  y:top/center/bottom
        百分比  x% y%（精灵图）
背景图片的尺寸  background-size
        1. x,y 以px为单位设置具体宽高
        2. 百分比 x% y%
        3. cover：填充，覆盖 ，让背景图充满整个容器，哪怕图片显示不全也没有关系
        4. contain：包含，让容器可以完整的包含整张图片，这里图片是完整的。容器有空白区域没关系
        5. auto：默认值，背景图像的真实大小
背景图片的固定
    backgroung-attachment   scroll：默认值，背景图片会随着窗口滚动条滚动  
                                                                    fixed：背景图相对于窗口固定，窗口滚动时背景图片位置不变，但是只会在元容器内显示
背景简写
    background：color  url()  repeat  attachment  position;
    background:color/url();
背景渐变
    线性渐变
        background-image : linear-gradient(angle,color-point1,color-point2,....)
            angle   关键字   to top：从下到上   to bottom：从上到下   to left：从右到左   to right：从左到右
                       角度值    0deg：从下到上    90deg：从左到右        180deg：从上到下   270deg：从右到左
            color-point     合法的颜色值+位置    位置取值：以px为单位的数字/%
    径向渐变
        background-image : radial-gradient(半径 at 圆心x 圆心 y,color-point1,color-point2,....)
            半径    取值：以px为单位的数字，色标中必须写%，半径才有效
            圆心   圆心属性取值    1. x y，以px为单位的数字  2. x% y%   3. 关键字   x:left/center/right      y:top/center/bottom

    重复渐变
        重复的线性渐变
            background-image:repeating-linear-gradient(angle,color-point1,color-point2,..)
        重复的径向渐变
            backgrond-image:repeating-radial-gradient(半经 at 圆心x 圆心y,color-point....)
    浏览器兼容性问题（ie8.0以下不考虑）
        渐变属性，支持低版本浏览器的写法
            编写兼容低版本浏览器代码这个行为，叫css hack
            添加浏览器内核的前缀
                -moz-：Firefox
                -webkit-：Chrome/Safari
                -o-：Opera
                -ms-：IE
            当有前缀时，写方向的时候，就不再写to，方向此时定义的是起点
            当没有前缀，写方向的时候，要写to，方向定义的是终点
     八、表格
           table
        尺寸、边框、背景、字体、文本、内外边距
        table设置边框，只设置外部最大的边框，对单元格边框无效
           td/th
        尺寸、边框、背景、字体、文本、内边距 等有效
        td/th设置外边距无效
        vertical-align：设置单元格数据的垂直对齐方式   top：上对齐    middle：垂直居中对齐   bottom：下对齐
          边框合并
        border-collapse    separate：默认值，边框分离   collapse：边框合并
          边框边距
                   border-spacing
            1. 取一个值，同时设置水平和垂直边框边距
            2. 取两个值，第一个设置水平，第二个设置垂直
        表格标题位置
        caption-side   top：标题在顶部    bottom：标题在底部

        设置表格的显示规则
        table-layout
            auto
                1. 单元格的大小都会自动适应内容
                2. 表格复杂时，加载速度较慢
                3. 自动布局比较灵活
                4. 用于不确定每列大小的，并且不复杂的表格
            fixed
                1. 单元格大小取决于设置的宽高
                2. 任何情况下，都会加速加载表格
                3. 固定表格布局不够灵活
                4. 应用于明确知道每列大小的表格
    九、列表
列表项类型
    list-style-type    disc：默认，实心圆    circle：空心圆   square：实心方块   none：无
设置列表项为图片
    list-style-image:url(1.png);
列表项的位置
    list-style-position   inside   outside：默认值
列表简写
    list-style: type image position;
                            list-style: circle  square  inside

学习心得
感觉越来越适应这边的生活了。今天学习的也很充实！