HTML&CSS-Day06

1.列表样式
  list-style-type 设置列表标志项类型 disc circle square...
  list-style-image 自定义列表标志项
  list-style-position 设置列表标志项位置 inside outside(默认值)
  简写:list-style:type image position
  取消列表标志项:list-style:none
2.其它样式
  display:css布局方式 可以将块级元素显示在一行
    inline 将当前元素设置为行内元素
    block 将当前元素设置为块级元素
    inline-block 将当前元素设置为行内块元素
  cursor 游标 pointer help
3.隐藏元素的方式
  1.display none 不占据原先在浏览器中的位置 js事件不会生效 会引起浏览器重排
  2.visibility hidden visible(默认值可见的) 占据原先在浏览器中的位置 js事件不会生效 会引起重绘
  3.opacity:0(透明度) 占据原先在浏览器中的位置 js事件会生效   不一定 只有一个图层引起重绘
4.重排和重绘
  1.当DOM元素(标签)的改变影响元素的几何信息(位置),浏览器计算DOM元素的几何信息(位置),
  将其正确的显示在浏览器,这个过程就叫重排,也叫回流.
  2.元素的一个外观被改变时,但是不影响元素的布局排列,浏览器将其重新绘制的过程就叫重绘,
  就叫重绘.
  3.重排:标签增加 删除 插入 替换 display:none
  重绘:css 一些样式 color 背景色
5.overflow(父元素内容溢出处出现)
  autu自适应 当内容的宽高超出父元素 浏览器设置滚动条
  scroll滚动条
  hidden 超出父元素的部分隐藏起来
6.px和em和rem区别***********************************
  1.px是相对单位,相对于当前设备分辨率 绝对单位:1cm 1m
  (1rpx iphone 6.0 )
  2.em是相对单位,相当于当前元素的字体大小而言,font-size:28px 1em=28px 默认(1em=16px)
  3.rem是相对单位,相对于html元素的字体大小而言的,默认1rem=16px
7.盒模型
  1.盒子属性:width height margin padding border max-width min-width max-height min-height
  2.盒模型:
    1.盒子种类:
      1.1内容盒子 标准盒子 w3c盒子 普通元素就是标准盒子 box-sizing:content-box
      1.2边框盒子 IE盒子 怪异盒子 box-sizing:border-box
    2.盒子区别:
      2.1内容盒子的宽高设置给内容区
         计算公式:
           内容盒子宽：width+paddingLeft+paddingRight+borderLeft+borderRight 
           内容盒子高：height+paddingTop+paddingBottom+borderTop+borderBottom 
           内容盒子所占页面宽：内容盒子宽+marginLeft+marginRight
           内容盒子所占页面高：内容盒子宽+marginTop+marginBottom
      2.2边框盒子的宽高设置给盒子本身的
        计算公式:
            IE盒子宽：contentWidth+paddingLeft+paddingRight+borderLeft+borderRight
            IE盒子高：contentheight+paddingTop+paddingBottom+borderTop+borderBottom
            IE盒子所占页面宽：width+marginLeft+marginRight
            IE盒子所占页面宽：height+marginTop+marginBottom
8.盒子背景样式
  1.设置背景色 background-color:red;
  2.设置背景渐变色 background-image:linear-gradient(to right/to right bottom,red,pink,cyan);
  3.设置背景图片 background-image:url()
  4.设置背景图片平铺方式 background-repeat:no-repeat/repeat-x repeat-y/repeat(默认值)
  5.设置背景图片位置: background-position:水平位置 垂直位置 0(左右移动) -200px(上下移动)
  6.设置背景图片平铺方式 background-attachment:scroll(背景图片随着滚动条滚动而滚动)
  fixed(背景图片不随着滚动条滚动而滚动)
  background:color url() repeat fixed/scroll position
css布局方式
  浮动布局 可以让块级元素在一行中进行显示
********外边距合并问题
  同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并
  1.兄弟级外边距合并
    合并出现原因:同时给父子元素设置同一个方向的一个外边距
    合并解决方案:
      1.只给其中一个兄弟元素设置外边距
      2.给下边外边距开启BFC
      float:left
      position:absolute/fixed
      display:inline-block,fixed
      3.给上边兄弟元素设置一个父元素 给父元素开启BFC
      overflow:hidden/auto

  2.父子级外边距合并
    合并出现原因:同时给父子元素设置同一个方向的一个外边距
    合并解决方案:
      1.给父元素设置padding属性
      2.给父元素设置border边框

 **********BFC(Block Fomatting Context)直译块级格式化上下文
 概念:把BFC理解为元素的一种属性,类似于id,title,class,一旦元素有了BFC这个属性
      就可以理解为一块独立的渲染区域,容器内的元素不会影响容器外的元素.
    1.如何触发BFC?
      1.HTML文档就是BFC
      2.float不为none
      3.position为absolute和fixed
      4.display属性取值inline-block,fixed...
      5.overflow不为visible       一般为hidden
    2.BFC作用:
      1.避免外边距重叠
      2.清除浮动
      3.阻止浮动元素覆盖非浮动元素
      4.两列布局 左侧顶宽 右侧自适应
      5.三列布局 左右顶宽 中间自适应