初学HTML5－－盒子模型

来源：互联网发布：知乎余建春卡迈克尔数编辑：程序博客网时间：2024/04/27 21:52

网页上每一个标签都是一个盒子

每个盒子有四个属性：

1.内容（content）－－网页中通常指文字和图片

2.填充（padding，内边距）盒子与内容之间的空隙，形象点说就像盒子内的填充物泡沫或

者其他抗震的材料.内边距会增加盒子的大小

3.边框（border）：盒子本身

4.边界（margin，外边距）盒子之间的空隙

代码演示：

<html lang="en"><head>    <meta charset="UTF-8">    <title>盒子模型</title>    <style>        *{            /*清除所有盒子的外边距*/            margin: 0;            padding: 0;        }        div{            width: 300px;            height: 200px;            background-color: antiquewhite;            /*设置边框*/            border: 5px solid mediumpurple;            /*设置内边距 上 右 下 左*/            padding: 10px 5px 8px 15px;            /*设置外边距*/            margin: 10px;        }    </style></head><body><div>我是一个盒子</div></body></html>

CSS3新特性：

RGBA透明度

RGB（红色R绿色G蓝色B），RGBA在其基础上增加了Alpha通道，可用于设置透明值

块阴影与圆角阴影：

box－shadow 标签阴影

text－shadow 文字阴影

圆角：

border－radius

边框图片：

border－image

形变

transform: none | <transform-function>[<transform-fuction>]

代码演示：

<html lang="en"><head>    <meta charset="UTF-8">    <title>新增特性</title>    <style>        div{            /*设置盒子宽度*/            width: 200px;            /*设置盒子高度*/            height: 60px;            /*设置盒子外边距*/            margin: 50px;            /*设置盒子内边距*/            padding: 20px;            /*设置盒子阴影 (水平 垂直 模糊度 阴影颜色)*/            box-shadow: 10px 5px 10px lightgray;            /*设置圆角*/            /*border-radius: 100px;*/            /*设置盒子左上圆角*/            border-top-left-radius: 100px;            /*设置盒子又下圆角*/            border-bottom-right-radius: 100px;        } <span style="white-space:pre"></span>p{            font-size: 100px;            color: cornflowerblue;            /*设置文字阴影*/            text-shadow: 10px -5px 10px purple;        }    </style></head><body>    <div class="test1">111</div>    <p>问你无奈无奈</p></body></html>

—CSS布局

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

脱离标准流的方法有

float属性：常用取值有：left脱离标准流，浮动在父标签的最左边

right脱离标准流，浮动在父标签的最右边

<html lang="en"><head>    <meta charset="UTF-8">    <title>CSS脱体标准流</title>    <!--    任何类型的标签一旦脱离标准流,就会被强制转为行内-块级标签    -->    <style>        #main{            /*设置id为main的标签宽度*/            width: 400px;            /*设置id为main的标签高度*/            height: 600px;            /*设置id为main的标签背景颜色*/            background-color: antiquewhite;        }        .test1        {            /*设置类别为test1的标签背景颜色*/            background-color: greenyellow;            /*/*设置类别为test1的标签浮动在左边*/            float: left;            /*设置类别为test1的标签宽*/            width: 80px;            /*设置类别为test1的标签高*/            height: 60px;        }        .test2{            /*设置类别为test2的标签背景颜色*/            background-color: cornflowerblue;            /* /*设置类别为test2的标签*/浮动在右边*/            float: right;            /*设置类别为test2的标签宽*/            width: 80px;            /*设置类别为test2的标签高*/            height: 60px;        }            </style></head><body><div id="main">    <div class="test1">1</div>    <div class="test2">2</div>    </div></body></html>

position 规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

属性和 left、right、top、bottom属性

position代码演示：

<html lang="en"><head>    <meta charset="UTF-8">    <title>CSS的布局-position</title>    <!--    position 规定元素的定位类型。    子绝父相    子标签绝对定位,父标签相对定位    -->    <style>        .flow{            /*设置类别为flow的标签背景颜色*/            background-color: aquamarine;            /*设置类别为flow的标签宽*/            width: 1000px;            /*设置类别为flow的标签高*/            height: 400px;        }        #main        {            /*设置id为main的标签背景颜色*/            background-color: antiquewhite;            /*设置id为main的标签外边距*/            margin: 60px;            /*设置id为main的标签宽*/            width:400px;            /*设置id为main的标签高*/            height:200px;            /*设置id为main的标签的定位类型*/            position: relative;        }        .test1        {            background-color: pink;            /*设置标签的定位类型*/            position: absolute;            /*定位(左上角)*/            /*left: 40px;*/            /*top:40px;*/            /*定位(右下角)*/            right: 20px;            bottom: 20px;        }        .test2{            /*设置类别为test2的标签的背景颜色*/            background-color: orangered;            /*设置类别为test2的标签停留在浏览器的底部*/            position: fixed;            /*设置标签距右边的距离*/            right: 40px;            /*设置类别为test2的标签的透明度*/            background-color: rgba(255,0,0,0.1);        }    </style></head><body>    <div id="main">        <div class="test1">position布局</div>    </div>    <div class="test2">相对浏览器定位</div>    <div class="flow">看看布局</div>    <p class="flow">一起看看布局</p></body></html>

—标签的居中

所有的标签水平居中:    行内标签和块级-行内标签:在父标签中设置 text-align: center;    块级标签:在自身设置 margin:0 auto;                     left: 50%;                     top: 50%;                     transform: translate(-50%, -50%);    所有的标签垂直居中:    行内标签和块级-行内标签:在父标签中设置line-height: 300px;    块级标签:position: absolute;

代码演示：

<html lang="en"><head>    <meta charset="UTF-8">    <title>标签的居中(水平居中以及垂直居中)</title>    <style>        #main        {            /*设置id为main的标签宽*/            width: 500px;            /*设置id为main的标签高*/            height: 300px;            /*设置id为main的标签背景颜色*/            background-color: antiquewhite;            /*设置内容水平居中作用于文字,不能用于块级标签*/            text-align: center;            /*垂直居中*/            line-height: 300px;            /*1.块级标签垂直居中第一步:*/            position: relative;        }        span        {            /*设置span标签的背景颜色*/            background-color: deeppink;        }        .kuai{            /*设置类别为kuai的标签*/            background-color: aquamarine;            width: 200px;            height: 50px;            /*块级标签垂直居中前提,覆盖块级标签高度*/            line-height: 50px;            margin: auto;            /*2.块级标签垂直居中第二步*/            position: absolute;            /*3.块级标签垂直居中第三步,以父标签的宽度取50%*/            left: 50%;            top: 50%;            /*4.块级标签垂直居中第四步,平移*/            transform: translate(-50%, -50%);        }        input{            /*修改内边距正常是向外扩张,内容的尺寸不变*/            width:500px;            padding-left: 10px;            /*修改内边距向内扩张*/            box-sizing: border-box;        }    </style></head><body>    <div id="main">        <!--行内标签居中-->        <!--<span>行内标签要居中</span>-->        <!--行内块级标签居中-->        <!--<button>行内块级标签要居中</button>-->        <!--块级标签居中-->        <div class="kuai">块级标签要居中</div>    </div>    <p></p>    <input></body></html>

2 0