CSS盒子模型概述 盒子模型的计算规则 盒子的宽度和高度设置

鳄鱼君Ba

发表文章数:518

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS盒子模型概述 盒子模型的计算规则 盒子的宽度和高度设置

在设计网页时,能否控制好各个模块在网页中位置十分关键!盒子模型是网页布局的基础,只有掌握了盒子模型的各种规律和特征,才可以更好的空值网页中各个元素所呈现的效果。

CSS盒模型概述

所谓的盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。它定义了页面元素如何显示,以及相邻元素之间如何相互影响。在页面中,每个元素都是以矩形空间存在的,这个矩形空间区域(content)、内边距(padding)、边框区域(border)和边界区域(margin外边距)。

CSS盒子模型概述 盒子模型的计算规则 盒子的宽度和高度设置

  • 盒子实际宽度(高度)=内容(content)+边框(border)+间隙(padding)+间隔(margin)

元素和对象都是由内容(content)、内边距(padding)、边框(border)、外边距(margin)等基本结构组成,并呈现出矩形的盒子效果。在浏览器看来,网页就是由多个盒子嵌套的结果。

外边距(margin)是该元素与相邻元素之间的距离,如果给元素定义边框属性,边框将出现在内边距和外边距之间。

并不是每个元素都要求定义内边距、边框、外边距、宽和高

<div>标记

<div>标记是一个块容器标记。可以将网页分割为独立的部分,以实现网页的规划和布局。<div>标记相当于一个盒子,可以设置内外边距、宽和高。大多数HTML标记都可以嵌套在<div>标记中,<div>中还可以嵌套多次<div>。可以替代大多数的块级文本标记。

<style type="text/css">
   .one{
     width: 400px;         /*设置宽度*/   
     height: 40px;         /*设置高度*/ 
     line-height: 30px;    /*设置行高*/
     background: #FFC;     /*设置背景颜色*/
     font-size: 18px;      /*设置字体大小*/
     font-weight: bold;    /*字体加粗*/
     text-align: center;   /*设置文本水平居中对齐*/
   }
   .two{
     width: 400px;         /*设置宽度*/   
     height: 40px;         /*设置高度*/ 
     background: #0F0;     /*设置背景颜色*/
     font-size: 28px;      /*设置字体大小*/
     text-indent: 2em;   /*设置首行文本缩进*/
    }
</style>
<div class="one">
    用div标记设置的标签文本
</div>
<div class="two">
    <p>div标记中嵌套p标签的文本</p>
</div>

<div>标记最大的意义在于和浮动属性float配合实现网页的布局。

盒子的宽和高

网页是有多个盒子排列而成的,每个盒子都有固定的大小,在CSS中使用宽度属性width高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值和相对于父元素的百分比,在实际工作中最常用的是像素值(px)

<style type="text/css">
    .three{
        width: 400px;         /*设置宽度*/   
        height: 40px;         /*设置高度*/ 
        line-height: 30px;    /*设置行高*/
        background: #FFC;     /*设置背景颜色*/
        border: 8px solid #00f; /*设置段落的边框*/
        text-indent: 2em;     /*设置文本的首行缩进*/
    }
    
</style>

<p class="three">盒子模型的宽度和高度</p>

CSS规范中,元素的width和height属性仅指块级元素内容的宽度和高度,其周围的内边距、边框和外边距是另外计算的。大多数浏览器都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度,计算原则是:

  • 盒子的总宽度=width+左右内边距之和+左右框宽度之和+左右外边距之和
  • 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和

宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(<img>标记<input>标记除外)

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS盒子模型概述 盒子模型的计算规则 盒子的宽度和高度设置》 发布于2020-04-28

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

3 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册