CSS样式大全之盒子模型

制作一个干净的网页必写的css样式

/* 消除浏览器默认的内外边距

          这句话也是我们css的第一行代码 */

        * {

             margin: 0;

            padding: 0; 

        }

        li {

            /* 去除li标签的小黑点 */

            list-style: none; 

        }

        /* 用户界面样式 评论 文本框 */

        input,textarea {

            /* 取消表单轮廓 */

            outline: none;

        }

        textarea {

            /* 防止拖拽文本域 */

            resize: none;

        }

边框属性

border-width 定义边框粗细,单位是px

border-style 边框的样式

border-color 边框颜色

 主要记住这三个边框样式：solid 实线边框 dashed 虚线边框 dotted 点线边框

// 边框简写        

border: 1px solid red; 没有顺序

// 边框分开写

border-top/left/right/bottom: 1px solid red; /*只设定某条边框*/

内&外边距

padding - top/left/right/bottom

margin - top/left/right/bottom

（拓展：其中内边距和边框会影响盒子的实际大小 盒子大小 = 盒子content + border + padding）

（补充一下：盒子模型分为 标准盒子模型 和 怪异盒子模型 ）

圆角边框样式

border-radius:5px;

raduis半径(圆的半径)原理:通俗说半径为5px的圆搞进盒子与边框形成的弯度

<!-- 圆与边框的交集形成圆角效果 -->

盒子阴影

box-shadow:五个属性值；

.shadow {      /* 盒子阴影 */

            width: 200px;

            height: 200px;

            background-color: pink;

            margin: 100px auto;                

}

.shadow:hover {   /* 类选择器和伪类选择器一起使用 */

            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);

}

浮动属性 float

1.脱离标准流 2.飞起来后，原先位置不保留

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动后都具有行内块元素特性

    <!-- 第一准则的目的是让浮动脱离顶行显示 -->

    <div>网页布局第一准则:先用父元素排列上下位置,子元素采取浮动排列左右位置。</div>

    <div>网页布局第二准则:先设置盒子大小，之后设置盒子的位置。</div>

   学IT的金句：理论分析永远比写代码重要

    <!-- 浮动布局注意 -->

        1.浮动和标准流的父盒子搭配使用

        2.一个盒子浮动，理论上其他兄弟盒子也要浮动

        (浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流)

清除浮动

清除浮动的本质是 清除浮动元素脱离标准流造成的影响。

清除浮动策略是 闭合浮动。只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

    <strong>为什么需要清除浮动</strong>

    <span>1.父级没有高度 2.子盒子浮动了 3.影响下面布局了</span>

定位属性

• 相对定位 position:relative

        <li>它是相对于自己原来的位置来移动的（参照点是自己原来的位置）</li>

        <li>原来在标准流的位置继续占有，后面盒子该怎样还是怎样不向前占据它的位置</li>

• 绝对定位 position:absolute         <!-- 相对于祖先元素移动 -->

        <li>如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(documnet文档)</li>

        <li>如果祖先元素有定位(相对、绝对、固定定位),

            则以最近一级的有定位祖先元素为参考点移动位置</li>

        <li>绝对定位不再占有原先的位置。(脱标)</li>

子绝父相 （开发时候经常使用）

    原因：父相对定位保留原来位置，不影响后面的盒子布局。

• 固定定位 position:fixed

 特点：

（1）以浏览器的可视窗口为参照点移动元素

（2） 跟父元素没有任何关系

（3）不随滚动条滚动
（4）固定定位不在占有原先的位置。固定定位也是脱标，可把固定定位看成特殊的绝对定位 

•     定位叠放顺序        

  选择器 {z-index:1}  （z-index：数值越高越上层）

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

拓展 绝对定位、固定定位、浮动共同的特点

（1）行内元素添加上三，可直接设置高度宽度

（2）块级元素添加上三，默认大小是内容的大小

（3）脱标的盒子不会触发外边距塌陷问题

隐藏元素属性

•  display:none

    display隐藏元素后,不在占有原来的位置

    display:block;可以转块,还可以显示元素

•  visibility:hidden 隐藏 :visible 显示

    // 隐藏继续占原先位置

•    overflow

   //  隐藏溢出部分

vertical-align属性

vertical-align：top/middle/baseline/bottom

经常作用于设置图片或者表单和文字垂直对齐;

用于一个元素于文字的对齐方式，但是它只针对行内元素或者行内块元素才有效

格外：CSS书写规范遵循下述顺序

1. 布局定位属性
2. 盒子自身属性
3. 文本属性
4. 其他属性