CSS极速版学习3---盒子与布局

review____

文本样式：
  word-spacing：设置每个单词之间的空白/单词之间的间距
  letter-spacing：字符之间的间距
  word-break:换行
  word-warp：换行     word-wrap: break-word;
       多行文本框textarea      warp属性   soft软换行   hard硬换行   off关闭换行
       单行文本框<input type="text" name="" id="">
  Y轴 overflow:hidden超出父元素隐藏    scroll滚动条显示
   width:
   height:
   max-width:
   max-height:
   min-width:
   min-height:
    
   元素的隐藏和显示：display： none  block______ 隐藏空间
                                  visibility:hidden   visible  ______ 不隐藏空间
列表样式：list
    list-style-type:
    list-style-position :
    list-style-image:url(）自定义
    line-height： 行高           与 height值 一样  
           
盒子模型：
  盒子=content+passing+border+margin
 ????   标准盒子/默认盒子：box-sizing：content-box/border-box
        width-》content内容区     设置padding整个盒子变大—设置border整个盒子变大—content                
  边框盒子/怪异盒子：
         width-》盒子=content+passing+border       案例：呼吸灯  嵌套
         
盒子样式：
    背景backgroud
        -color
        -image     引入图片
        -repeat     是否重复 是否切割
        -clip          当前背景覆盖范围    {border-box    padding-box
        -origin       设置背景的起始点                  content-box  }
        -position    定位  与origin  配合使用
        -size          设置背景图像的大小    100px   100px   ；/   100%  100%
                       cover（以y轴为基准）    contain（以x轴为基准）   等比例拉伸，充满整个父集  推荐正方形
        -attachment   将背景图片固定在哪里   scroll 内边距边缘  根据div滚动而滚动   fixed 边框边缘  背景图片没动，动的是div元素
                             local  固定在自身元素之上
         
    和边框border：
        -radius:20px   当前DIV中画一个半径为20的圆  一分为四，  足够大变成圆
        border：1px  solid  red
        border -image-source:url()   默认引入边框图片,div四个基点位置
        border -image-slice：number:注意：不加单位，默认单位
        px:
        border -image-repeat:

 表格：
  table>tr*4>td*4    tr的父亲为 《 tbody》
   boder-collapse :collapse  表格边框合并
   caption-side:top   

重构

 框架+布局      造房子+装修
 统一 居中  防止分东离西，设置居中 _ magin:0 auto
html4:
body>div#outer 所有代码>#center 居中元素 
    div*3 cclass=" header"/   center   footer
            先进行 行级布局  再进行列级布局
html5:
    header       div*2    header_top     <aside>     <section>
    article    footer

————————布局

 默认文档流“元素默认所在浏览器中的位置”
                  从上到下，从左到右
    1. display:inline将块级元素转化为行内元素  可以设置宽/高
                     block：将行内元素转化为块级元素    在一行中显示
                     inline-block：将当前元素转换为兼具行内和块级特性的元素
    2.浮动布局
       float：left/right
        使用浮动属性不会遮盖文字
        对行内元素设置浮动：会让行内元素可以设置宽高属性
        对于块级元素设置浮动：独占一行属性失效
        浮动合适停止？
          1.当遇到父级边框时停止浮动
          2.遇到其他浮动元素停止浮动
          
     清除浮动特性：
          clear：left/right/both
       1.在浮动元素之后添加一个块级元素，给块级元素设置清除浮动
       2.给所有浮动元素的父元素设置：：after{
                  content: '';  // 插入空的
                  clear: left;  // 清除浮动
                  display: block;//转换块级元素
    }