CSS开发基础——CSS盒子模型

2017-01-14 19:51:04来源:CSDN作者:miao_9人点击

1、CSS的盒子模型

CSS盒子模型

  • height:高度
  • width:宽度
  • padding:内边距
  • margin:外边距
  • border:边框
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        {            margin: 0;            padding: 0;        }        .box{            width: 300px;            height: 300px;            padding: 50px;            border: 50px solid #54acf3;            margin: 50px;            color: #fff;            background: #2196F3;        }    </style></head><body>    <div  class="box">            在此可以填充内容    </div></body></html>

显示结果如下:

这里写图片描述
通过改变width、height、padding、margin的值改变显示结果,还可以设置margin-left、margin-right等值,每一个值下面都是一串的设置,通过调试可以发现整个图形的现实是有上、下、左、右不同的块组成的,可以对不同的块进行剪切设置,使用起来比较方便。

调试情况如下:

这里写图片描述

可以清晰的看到调试出来的盒子模型每个值的设置情况。
CSS可以用ie、和google浏览器进行预览和调试,但是调试的过程中chrome浏览器的颜色可以在图中的小方块处直接选择,但是ie浏览器需要手动设置,而且用chrome设置其他值时按回车可以直接进入下一行,但是ie浏览器不能直接回车进入下一行,对于初学者来说,用chrome浏览器进行调试比较方便。前端的学习需要在不同的浏览器进行调试,稍微熟练的话可以多加练习。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台