HTML5+css3+js入门-Day05

 外边距典型应用：

        可以让块级盒子水平居中，盒子必须指定宽度（width），盒子左右的外边距必须设置为auto。

         margin-left:auto;

         margin-right:auto;

         margin:auto;

         margin:0 auto;

        <div class="header"></div>

 

        如果想让行内块、行内元素水平居中，给其父元素添加text-align：center；即可。

 

    外边距合并：使用margin定义元素的垂直外边距，会出现外边距的合并/塌陷

      1:transprant(透明边框)为父元素定义上边框

      2：为父元素定义上内边距

      3：为父元素添加overflow：hidden;

 

    清除网页元素的内外边距：

        谷歌有个默认8px的外边距的距离，

        ul有默认40px的内边距

    

    *{(*是通配符选择器，选择页面中所有元素)

        padding:0;

        margin:0;

    }

    行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边边距，但是转换为块级和行内元素就可以了。 

 

 

盒子阴影：

    用box-shaadow属性添加阴影

    box-shadow：h-shadow v-shadow blur spread color inset;

 

    h-shadow:必须,水品阴影的位置，允许负值

    v-shadow:必须，垂直阴影的位置，允许负值

    blur：可选，模糊距离（数值越大越模糊）

    spread：可选，阴影的尺寸

    color：可选，阴影的颜色

    insert：可选，将外部阴影（outset）改为内部阴影。

    border-shadow：10px 10px 10px 10px black;

    rgba(0,0,0,3)(半透明)

 

    原先盒子没有阴影，当鼠标经过盒子添加阴影效果：

        div:hover{

            border-shadow：10px 10px 10px 10px black;

        }

    阴影不影响盒子大小,不占用空间

 

text-shadow设置文字阴影，应用于文本

 

text-shadow:h-shadow v-shadow blur color;\

h-shadow:水平阴影的位置，允许负值

v-shadow:垂直阴影，允许负值

blur:模糊的距离

color

 

圆角边框，边框变圆角

    border-radius：length(10px/50%);

    数值越大，圆角越明显

    50%就是宽度和高度的一半

 

 

CSS盒子模型：

        4个组成部分

        利用边框的复合型写法添加边框

        计算盒子的实际大小

        利用盒子模型布局模块案例

        给盒子设置圆角边框

        给盒子添加阴影

        给文字添加阴影 

 

    网页布局三大核心：盒子模型，浮动，定位

 

    盒子包括：边框（border），外边框（margin），内边距（padding），实际内容(content)

 

    边框：border（粗细，样式，颜色）

    border-width:5px;

     

    border-style:solid(实线（默认黑色）)|dashed（虚线）|dotted（点线）;

 

    border-color：pink;

    边框的复合型写法：

    border：1px solid red;（没有先后顺序）

    border-top:1px solid red;(上边框)

    border-bottom：1px solid red;(下边框)

    border-left：1px solid red；

    border-right：1px dashed blue;

 

    border-collapse：collapse；表示相邻边框合并在一起

 

    边框会影响盒子的大小

 

    内边距：padding，边框与内容之间的距离。  

    padding-left

    padding-right

    padding-top 

    padding-bottom

    padding简写可以有一到四个属性值

    padding：5px；（上下左右）

    padding：5px 10px;（上下，左右）

    padding:5px 10px 20px;（上，左右，下）

    padding:5px 10px 20px 30px;（上 右 下 左）

    padding也会影响盒子的大小（如果盒子有了高度和宽度，再加padding会撑大盒子）

    （内容和边框有了距离）

 

    如果盒子本生没有指定width/height属性那么padding不会撑开盒子大小

 

    margin外边距（盒子与盒子之间的距离）

    margin-left:

    margin-right:

    margin-top:

    margin-bottom:

 

传统页面布局的三种方式

本质：用css来摆放盒子

 

布局方式：

    普通流（标准流/文档流 ，标签按照规定好的默认方式排列 ）--最基本的布局方式

         块级元素会独占一行，从上向下排列   

    浮动

        浮动的作用：多个块级元素一行排列显示

        如何让多个块级盒子（div）水平排列成一行

            ：行内块元素（之间会默认有空隙）

            ：

        如何让两个盒子左对齐，右对齐

        float;left;

        float:right;

        float属性用于创建浮动框，将其移动到另一边或另一个浮动框的边缘

        选择器｛float：属性值;｝

        float：none;不浮动

        float：right;向左浮动

        float:right;向右浮动
 

        浮动特性：

         1：浮动元素脱离标准流：脱标

            浮动的盒子不再保留原来的位置，会被标准的盒子占

            如果多个盒子都设置了浮动，则会按照属性值一行内显示并且顶端对齐排列

         2：浮动元素会一行显示并且元素顶部对齐

         3：浮动的元素具有行内块元素的属性