推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 互联网IT信息 > css的盒模型详解

css的盒模型详解

互联网IT信息 2018-02-02


1CSS的盒子模型简介


盒子模型概述:

     所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

     综述:CSS中盒子模型由三部分组成:

      1边框(border)

     2 内边距(padding)

     3外边距(margin)

     如下图:

2盒子模型之边框(border)


语法,如下图:

css的盒模型详解

         属性名称

                   介绍

    border-width

 设置边框宽度单位

px为主   例如:12px

    border-style

设置边框样式

    border-color

设置边框颜色


border-top

设置上边框样式

border-bottom

设置下边框样式

border-left

设置左边框样式

border-right

设置右边框样式

案例,实现下图效果:

css的盒模型详解

代码:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    .div-cls{

  width: 200px;height: 50px;border-top:solid 2px pink;

  border-bottom:  double 5px blue;

  border-left: dashed 3px yellow;

  border-right: outset 4px red;

  }

  </style>

</head>

<body>

  <div class="div-cls">border其他用法</div>

</body>

</html>

补充:outline

outline简介:

outline(轮廓)是绘制在元素周围的一条线,位于边框边缘的外围,起突出元素的作用,不会象border那样影响元素的尺寸或者位置。

outline与border的区别:

border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。

效果图如下:


css的盒模型详解outline 与 border 的区别代码

<!DOCTYPE html>

<html>

  <head>

  <meta charset="UTF-8">

  <title></title>

          <style type="text/css">

                  div{

                  width: 200px;

                  height: 200px;

                  background: slategray;

                  float: left;

                  margin: 2px;

                  /*box-sizing: border-box;*/

                  }

                  .border{

                  border: 6px solid aqua;

                  }

                  .outline{

                  outline: 6px solid palegreen;

                  }

          </style>

  </head>

  <body>

  <div></div>

  <div>border</div>

  <div>border</div>

  <div>outline</div>

  <div>outline</div>

  </body>

</html>

3盒子模型之内边距(padding)

内边距分类:

padding-top:上内边距


padding-right:右内边距


padding-bottom:下内边距


padding-left:左内边距


内边距举例:

padding:

10px

上,下,左,右距离

分别是10px

padding:

10px 40px

上下10px  左右40px

padding:

10px 40px   20px

上10px   左右40px   20px

padding:

10px 20px   30px 40px

上10  右20px 30px 40px

padding会对盒子大小产生影响,影响后的计算公式如下:

盒子宽度=盒子宽度+左右内边距+边框宽度

效果图:

css的盒模型详解


代码如下:

css的盒模型详解

内边距实际案例1(中等难度例子): 


文字距离盒子内左边距离40px,边框为3px,当前盒子宽度怎么设置最后能保证盒子最终宽度是200px?

效果图:

css的盒模型详解

代码如下:

css的盒模型详解

内边距实际案例2(复杂难度例子): 

一个大盒子宽度500px,高度300px.一个小盒子宽度300px,高度150px.请画出让小盒子在大盒子内部居中。

效果图:

css的盒模型详解

代码如下:

css的盒模型详解


补充:

    设置内边距padding不会影响盒子的宽度

4盒子模型之外边距(margin)


外边距margin属性介绍:

margin:

10px

距离上下左右边距10px

margin:

10px  20px

距离上下10px   左右20px

margin:

10px   20px  30px

距离上10px 左右   20px下30px

margin:

10px   20px   30px   40px

距离

10px 20px 下 30px   40px

margin-left:

距离左边

margin-right

距离右边

margin-top

距离上边

margin-bottom

距离下边

margin:0  auto

auto 设置为相对边的值

外边距margin合并问题

    简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

    图形如下:

5内边距padding和外边距margin综合问题和案例(margin)


行内元素在内边距padding和外边距margin方面的问题

    行内元素遇到上下margin和padding时,则会被忽略。

    行内元素遇到左右margin和padding时, 才会起作用。

补充:常见行内元素包括;

行内元素(a、input 、img 、code、label、strong、textarea 等):

盒子模型综合实例:

效果图如下:

代码如下:

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet" href="css/base.css" />

<style>

      .boxwidth:323pxmargin:0 auto;}

      .box-topheight:31pxbackground:#000line-height:30px; }  

      .box-top .fl .con1font-size:14pxcolor:#30cdfafont-weight:boldmargin-left:10px; }

      .box-top .fl .con2font-size:14pxcolor:#696d70font-weight:bold;}

      .box-top .frcolor:#ffffffmargin-right:10px;}

      .time1color:#414247;}

      .time2color:#ccc;}

     .main liline-height:25px;}

     

     

</style>

</head>

 

<body>

   <div class="box">

       <div class="box-top clearfix">

          <h2 class="fl">

              <span class="con1">新闻中心</span>

                <span class="con2">News center</span>

            </h2>

            <p class="fr">< ></p>

        </div>

        <div class="main">

          <ul>

             <li class="clearfix">

                    <p class="fl time1">腾讯--4月免费公开课信息<p>

                 <p class="fr time2">2016-04-12</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">腾讯--5月班级开课时间表<p>

                 <p class="fr time2">2016-04-12</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">腾讯分享第六期活动正常进行中<p>

                 <p class="fr time2">2016-03-10</p>

                 </li>

                 <li class="clearfix">

                    <p class="fl time1">3月公开课紧急通知<p>

                 <p class="fr time2">2016-03-08</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">4月开课信息汇总<p>

                 <p class="fr time2">2016-03-08</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">免费活动在路上<p>

                 <p class="fr time2">2016-01-27</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">腾讯--4月免费公开课信息<p>

                 <p class="fr time2">2016-04-12</p>

                 </li>

                <li class="clearfix">

                    <p class="fl time1">2016年后班级开始报名学习了!!!<p>

                 <p class="fr time2">2016-01-17</p>

                 </li>

          </ul>

        </div>

    </div>

</body>

</html>

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《css的盒模型详解》的版权归原作者「互联网IT信息」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注互联网IT信息微信公众号

互联网IT信息微信公众号:gh_8694d206e643

互联网IT信息

手机扫描上方二维码即可关注互联网IT信息微信公众号

互联网IT信息最新文章

精品公众号随机推荐

上一篇 >>

Flink的日志配置

下一篇 >>

CSS Paint API