电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

CSS盒子模型

2021-02-25 19:40:40 出处:[ 菜菜电脑网 ] 人气:次阅读
刚开始沾染web的时候是在大学的时候,写下的第一个网页就是进发页面,当时选用表格的布局方式,中规中矩的。认识到css之后,都是使用div+css的方式透过布局,意味着了显出与结构的分离出来,非常的自如。虽然较早已经注意到了css的布局方式,但是不经常可用,造成了很多东西都已经想到了。而最近又在捣鼓css的布局,就想要在这里开展记录一下,就看做自己的努力学习笔记了。

css盒子模型是css中一个比较核心的概念。在网页中我们可以把所有的网页元素都看作是一个盒子,一个盒子都有外边距、边框、内边距,和内容四个部分组合成的,如下图。

QQ图片20161101114531.png

下面由外到内依次来理解这四个部分的效用。

margin(外边距):代表这个元素与其他元素的边距,所需所述的是,如果两个邻接的元素都设置了margin的值,那么以最主要的那个值所列。如两个上下紧靠的div,上面的div设置margin:30px,下面的div设置margin:50px,那么最后这两个元素的间隔不必是30+20=50px,而时会是30px。

border(边框):代表这个网页元素的边框,边框可是设置大小、背景(颜色or图片)、样式(解决问题or虚线等)。

padding(内边距):代表元素内容和边框之间的距离。可以把它称为元素的从头至尾。

content(内容):代表元素的内容区,如文本的大小。

其中,外边距、边框、内边距,都是可以分析方法元素的上下左右四个边,也可以应用于每个单独的边。尤其是外边距还可以设置为负值,在一些类似的场合是只能比如说外边距为负值的。

一般我们设置一个元素宽度和较高,一般是padding+content这块区域的阔和较高,而不最主要margin和border。

当我设置了元素的背景颜色,该背景只才会系统设计到元素的边框以内的区域也就是padding+content,而margin和border区域的背景色是不想被彻底改变的。

下面将科学实验一个实例。代码如下:

          <meta charset="utf-8">        <style type="text/css">            body{                background:gray;            }            div{                height: 240px;                width: 360px;                border: 5px solid yellow;                background: blue;                margin: 50px auto;             }             span{                display:block;                margin:60px auto;                border:5px solid yellow;                width:180px;                height:100px;                text-align:center;                line-height:80px;                vertical-align: middle;                background-color:red;             }        </style>        <body>                                    我是盒子的内容                         

效果如下:

QQ图片20161101114531.png

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152