html5笔记

 

  1. 盒子模型

 

    1. 前言

图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容

 

    1. 盒子的区域 

一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

 

 

上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意:宽度和真实占有宽度,不是一个概念!

    1. 标准盒子模型

 

 

 

 

    1. Ie 盒子模型  

 

 

  1. Div 居中的几种 方式

 

    1. 利用margin计算数值

 

 

利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30

 

div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30

 

页面

<!DOCTYPE html><html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 

            .div2{ width:40px ; height: 40px; background-color: green;}

 

            .div22{

                margin-left: 30px;margin-top: 30px;

            }

        </style>

 

        <div class="div1">

            <div class="div2 div22">

 

            </div>

        </div>

 

    </body></html>

 

 

 

 

 

 

    1. 利用绝对位置 百分比属性分配  然后往回拉

这里 div1 使用相对位置 不管

 

查看 div2 使用绝对位置 是 他的父元素的  50%  50% 的位置 开始

也就是 从 div1 的 中心开始  布置 div2 这个时候是这样的

然后 吧 div2 开始往回拉  ,拉取的 距离是  div2 的 宽高的一半

margin-top: -20px;margin-left: -20px;

 

另外 子元素div是绝对定位,所以需要父元素设置为position: relative;

 

页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

 

            .div11{

                position: relative;

            }

            .div22{

                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;

            }

        </style>

 

        <div class="div1 div11">

            <div class="div2 div22">

 

            </div>

        </div>

 

    </body>

</html>

 

 

    1. 利用绝对位置 margin 自动 其余四个方向为 0

 

这种方式是一种单独的方式

另外 子元素div是绝对定位,所以需要父元素设置为position: relative;

单独使用 margin:auto;   不可以

需要联合使用  position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

外边距自动,四个方向都是 填满状态

 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

 

            .div11{

                position: relative;

            }

            .div22{

                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

            }

        </style>

 

        <div class="div1 div11">

            <div class="div2 div22">

 

            </div>

        </div>

 

    </body>

</html>

 

    1. 利用 css3 的新增属性 table-cell

 

方法 设置 div2 的 居中 ,需要 本书 设置自动  margin:auto

他的父节点  display: table-cell;vertical-align: middle; 设置这个属性

使父元素内的所有行内元素水平垂直居中

 

 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

 

            .div11{

                display: table-cell;vertical-align: middle;

            }

            .div22{

                margin: auto;

            }

        </style>

 

        <div class="div1 div11">

            <div class="div2 div22">

 

            </div>

        </div>

 

    </body>

</html>

 

阅读更多
上一篇HTML5笔记day09
下一篇HTML5及CSS3基础知识
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭