css盒子，浮动定位与隐藏

目录

一：盒子

1.边框设置

2.盒子阴影：

3.文字阴影：

二：显示与隐藏元素

1.display:

2.visibility：

3.overflow：

三：浮动

1.浮动的特性:

2.浮动元素常与标准流父级搭配使用:

四：定位

1.定位模式:

2.定位叠放:

---

一：盒子

1.边框设置

border:边框
border-width:边框粗细，单位是px
border-color:    
border-style:
          none:
          hidden:隐藏边框
          solid:实线边框
          groove:根据border-color画3D凹槽
          ridge:根据border-color画类型边框
          inset:根据border-color画3D凹框
          outset:根据border-color画3D凸框
          double:双线边框
          dashed:在MAC平台上IEA+与WINDOWS和UNIX平台上IE5.5+为点线否则为实线
          dotted:在MAC平台上IEA+与WINDOWS和UNIX平台上IE5.5+为虚线否则为实线
外边距>边框>内边框>内容  
简写无顺序
border-collapse:collapse;(合并相邻边框)
边框会造成盒子大小变化:
    1.可修改width/height(左右两边)    
padding:内边距(边框与内容间距)
    padding-left/right/top/bottom(左/右/上/下内边距)
    简写:1个值代表四个方位padding:5px
        2个值代表上下，左右padding:5px,10px
        3个值，代表上，左右，下
        4个代表上，右,下，左(不是上下左右)
    
content:内容    

margin:外边距
    margin-left/right/top/bottom(左/右/上/下外边距)
    与padding简写方式一样
    外边距可以让块级盒子水平居中，但要满足两个条件:
        1.盒子必须指定了宽度(width)
        2.盒子左右外边距都设置了auto
       常见写法:
        1.margin:auto
        2.margin:0 auto
        3.margin-left:auto; margin-right:auto
    以上方法是让块级元素居中
    让行内元素和行内块级元素水平居中要给其父类元素添加text-align:center
    .header{
        width:...;
        height:...;
        margin:100px auto;
        text-align;
    }
    <div class="header">
        <span></span>
嵌套块元素垂直外边距的塌陷:
    对于两个嵌套关系的块级元素，父元素又上外边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值
    解决方案:1.为父元素定义边框
            2.为父元素定义内边框
            3.为父元素添加:overflow:hidden
    当盒子处于浮动，固定，绝对定位等时没有塌陷问题。
    .father{
        width:400px;
        height:400px;
        border:1px solid red;(第1种)
        padding:1px(2)
        overflow:hidden(3)
    }
    .son{
        width:200px;
        height:200px;
        margin-top:100px;
    }
    
    <div class="father">
        <div class="son"></div>
        
清除内外边距
*{
    margin:0
    padding:0
}
行内元素尽量设置左右内外间距，不要设置上下内外间距，但转换为块级和行内块级元素就可以了



list-style：none取消小圆点

border-radius:length(用于设置元素的外边框圆角)
border-radius:100px;
    (正方形设置圆，把数值改为高或宽的一半，或直接写50%
    若是矩形，高度设置为一半)
border-radius:10px,20px,30px,40px(代表左上，右上，右下，左下)
分开写:border-top-left-radius:左上,border-bottom-right-radius右下

2.盒子阴影：

box-shadow:
    h-shadow:水平阴影位置(可为负值，正值向右移,必写)
    v-shadow:垂直阴影位置(可为负值，正值向上移，必写)
    blur:模糊影子
    spread:阴影尺寸 
    color:阴影的颜色
    inset:将外部阴影部分(outset)改为内部阴影部分
        默认是外阴影，但不可写这个单词，否则会使其无效
        阴影不占用空间，不会影响其它盒子排列
    box-shadow:10px 10px 10px 10px black inset
    

3.文字阴影：

text-shadow:属性值与盒子一样
                    用法一样

二：显示与隐藏元素

1.display:

display:none/block
    none:隐藏对象
    block:转为块级元素，同时还有显示元素的意思
display隐藏后不再占有原来位置

2.visibility：

visibility:
    1.visible(元素可视)
    2.hidden(元素隐藏)
visibility隐藏元素后继续占有原来的位置

3.overflow：

overflow:visible/auto/hidden/scroll
    visible:不剪切内容也不添加滚动条。假如显示申明此默认值，对象将剪切为包含对象的Window和frame的大小，并且dip属性设置将失效
    auto:此为对象body和textarea的默认值，在需要时剪切内容并添加滚动条
    hidden:不显示超过对象尺寸的内容
    scroll:总显示滚动条
如果有定位的盒子，请慎用overflow:hidden因为他会隐藏多余部分        

三：浮动

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

用于创建浮动框，将其移动到一边，直到左或右边缘触及包含块或另一个浮动框的边缘

float:none/left/right

1.浮动的特性:

    1.浮动元素会脱离标准流的控制，移动到指定位置
    2.浮动的盒子不再保留原先的位置
    3.浮动元素一行内显示并且顶端对齐排列
    4.有行内块元素相似的特性(若未设置宽度，只有高度，那么标签内的内容多大，宽度多大)
  注意:浮动元素相互靠在一起(不会有嫌隙)，若父类宽度装不下，则另起一行

2.浮动元素常与标准流父级搭配使用:

先用标准流的父元素排列上下位置，再用内部子元素采取浮动排列左右位置

 clear:left/right/both(左，右，两侧)
    none:默认,允许浮动元素出现在两侧
    inherit:继承父元素clear属性的值
闭合浮动:    
清除浮动方法:
    1.额外标签法**，W3C推荐:
        在浮动元素末尾添加一个空标签，例如：<div style="clear:both"></div>
        优:通俗易懂，书写方便
        缺:结构较差
    2.父级添加overflow:
        overflow:hidden(清除浮动)
    3.父级添加after:
        .clearfix:after:{
            content:"";
            display:block;
            height:0;
            visibility:hidden;
        }
    4.父级添加双伪元素:
        .clearfix:before,
        .clearfix:after{
            content:""；
            display:table;
        }

四：定位

定位=定位模式+边偏移

1.定位模式:

用于指定一个元素在文档中的定位方式

边偏移则决定该元素的最终位置

定位模式:
    static        静态定位(了解)
        没有边偏移，按标准流摆放位置
    relative    相对定位(重要)
        相对于自己原来的位置移动
        其他不变
        占有位置
    absolute    绝对定位(重要)
        相对与祖先元素来说
        没有祖先元素或祖先元素未定位，以浏览器定位为准
        如果祖父元素有定位，以最近的有定位的父元素为准
        不占有位置
    fixed        固定定位(重要)
        固定于浏览器可视区的位置，浏览器页面滚动时元素位置不会变
        特点:
            1. 以浏览器可视窗口为参照点移动元素
            2.跟父元素没有任何关系
            3.不随滚动条滚动
            4.固定定位不在占有原先的位置
            
    sticky        粘性定位(了解)
        特点:
            1.以浏览器可视窗口为参照点移动元素(固对定位)
            2.粘性元素占有原先的位置(相对定位)
            3.必须添加top，left,right,bottom其中一个
子绝父相:
    子级用绝对定位，父级则需要相对定位
    1.父级布局需要占有位置
    2.子级绝对定位不占有位置，可以放在父盒子任何地方，不影响其他兄弟盒子
    3.父盒子加定位限制子盒子，使其在父盒子内显示
边偏移:
    left:80px        位于父元素的左边线距离
    right
    top
    bottom:
       

2.定位叠放:

选择器（z-index：1；）z轴

1.数值可为正，负或0，默认auto，数值越大，盒子越靠上

2.属性值相同，则按书写顺序，后来居上

3.数字后不加单位

4.只有定位的盒子才有z-index属性

绝对盒子水平居中不能通过（margin:0 auto）,但能通过一下方法：

1.left：50%；让盒子的左侧移动到父级元素的水平中心位置

2.margin-left：-100%；让盒子向左移动自身宽度的一半

绝对定位/固定定位会完全压住盒子，但浮动元素不会：
    浮动元素只会压住他下面标准流的盒子，但不会压住下面标准流盒子里面的文字/图片
    但绝对/固定定位会压住下面标准流所有的内容
    浮动之所以不会压住文字，因为浮动产生的目的最初是为了环绕文字的，文字会围绕浮动元素

定位的特殊性：
    1.行内元素添加绝对或固定定位，可直接设置高宽
    2.块级元素加定位，如果不给宽度和高度，默认是内容大小