随笔-1031

Posted 2020-08-16

随笔1030
学习第四天 样式表的样式
一、大小
  宽度width
  高度height
二、背景
  1.background-color 背景色
  2.background-image 背景图片
  3.background-repeat：no-repeat 背景图的平铺方式
  4.background-position 背景图的位置 center等
  5.background-attachment 背景图是否滚动
  6.background-size:..px ..px; 背景图片大小
三、字体
  1.font-family 字体样式，通常以宋体、仿宋、微软雅黑为主
  2.font-size 字体大小 以12px、14px为主
  3.font-style:italic 倾斜
  4.font-weight:bold 加粗
  5.color 直接定义字体颜色
  6.text-decoration:underline 下划线
            overline  上划线
            line-through  删除线
            none  去掉样式，多用于<a></a>的下划线
四、对齐方式
  1.text-align 水平对齐
  2.vertical-align 垂直对齐方式
  3.line-height 行高  2 3配合使用用于对齐文字
  4.text-indent  缩进  以像素为单位
五、边界边框
  1.margin 外边距 顺序为上右下左
  2.padding 内边距 使用padding时，自身会变大，需要做完减去变大的大小
  此时需要注意：    margin与padding的区别
    margin与padding都是作用于要移动的物体，margin是距离外部的距离，padding是本身与自身内部物体的距离
    例：方块1里面有个方块2，方块2内有方块3，此时让2距离1多少距离就要对2进行编辑margin，让2内的3距离2多少距离就要进行编辑padding。
！！！！   *{ margin:0px auto; padding:0px;}  页面都需要添加此项内容保证整个页面的布局方式
  3.border 边框
    border: 1px solid #60F 第一个代表边框粗细，第二个代表边框样式，第三个是边框颜色
    可以用来做三角
六、列表方块
  1.list-style:none 去掉列表的符号，若有*{ margin:0px auto; padding:0px;} 则不显示列表符号了
  2.list-style-image: 将序号变成图片
七、格式与布局
  1.位置
    position:fixed 固定位置，固定于浏览器的位置，滚动页面位置依然在浏览器固定位置
    position:absolute 绝对位置，固定在父级元素之上， 固定在浏览器上，页面具体位置
    position:relative 相对位置，相对于原来定义的位置
  2.流
    float:left/right 向左向右流，写完之后要清除流<div style="clear:both"></div>
  3.z-index 分层， 值越大越靠上
八、其他
  1.display
    display:block(显示)/none(隐藏)  不占位置
  2.visibility:visible(显示)/hidden(隐藏) 占位置
  3.overflow:hidden 超出部分隐藏
  4.透明 opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
  5.圆角 border-radius:5px;
  6.阴影 box-shadow:0 0 5px white;