三种盒模型详解

其他 2021-02-28 10:35:34 阅读次数: 0

这里写自定义目录标题

盒模型简介

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。

标准盒模型

标准盒模型也叫w3c盒模型,
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成

在这里插入图片描述

外边距

  • 围绕在元素边框周围的空白区域

    • 会在元素外创建额外的空白区域
    • 外边距是透明的

  • 语法：margin:value;

  • 单边设置

    • margin-top/right/bottom/left: value;
    • value可取值为像素，%，auto，负值

  • 外边距简写
    margin:value(四个方向相同) ;
    margin: value(上下) value(左右);
    margin: value(上) value(左右) value(下);
    margin: value(上) value(右) value(下) value(左);

  • 外边距合并
    在这里插入图片描述

    • 当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
    • 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

  • margin设置元素外边距的宽度，它有这么几个特点

  1. 块级元素的垂直相邻外边距会合并
  2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并
  3. 浮动元素的外边距也不会合并
  4. 允许指定负的外边距值，不过使用时要小心

内边距

  • 内容区域和边框之间的空间
  • 会扩大元素边框所占用的区域
  • 语法：padding:value;
  • 单边设置
    • padding-top/right/bottom/left:value;
    • value可取值为像素，百分比，但不能为负数
  • 内边距的简写
    • padding:value(四个方向相同) ;
    • padding: value(上下) value(左右);
    • padding: value(上) value(左右) value(下);
    • padding: value(上) value(右) value(下) value(左);

border边框

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

  • 三要素书写的时候一般如下顺序

    • border：宽度 样式 颜色
    • border: 1px solid red;

  • 不过不按此顺序来写依然能正常显示。

    • div{ border: red solid 2px; }

在这里插入图片描述

  • border的三要素可以统一写在”border”属性中，也可以单独设置。

    • 统一的写法：border: 1px solid red;
    • 单独设置的写法：
      border-width:;
      border-style:;
      border-color:;

  • 要注意，在style属性为空的情况下，整个边框是不会出现的。这不论是统一写在border或是单独设置都是这样的。

    • 不写width会有默认3像素的值。
    • 不写颜色会默认为黑色。

  • border-style设置边框的样式，有五种常用样式可选

    • 点状dotted
    • 实线solid
    • 双线double （ 需要最起码设置为3像素，不然显示不下）
    • 虚线dashed
    • 无边框none

  • 边框练习

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标准盒模型</title>
    <style>
        /*
        1.标准盒模型（w3c盒模型）
        组成部分：content+padding+border+margin
                  内容    内边距  边框  外边距
        实际宽度：width+padding+border+margin

       2.border  边框

       border-style:solid|dotted|dashed|none|double;
                    实线   点线   虚线   无   双线

       border-color:;  边框的颜色  默认为黑色
       border-widht:;  边框的粗细  默认为3px

       简写：border:width style color;   顺序可以调换

       单边属性：
       border-top:1px solid red;
       border-bottom:;
       border-left:;
       border-right:;

       3.外边距  margin  可以取值auto,负值，正值
       盒子距盒子之间的距离
       透明的
       margin:value;  四周的距离
       margin:value value;  上下   左右
       margin:0 auto;  水平居中块级元素
       margin:value value value;  上   左右   下
       margin:value value value value;  上   右   下   左

       单边属性：
       margin-top:;
       margin-bottom:;
       margin-left:;
       margin-right:;


       1）垂直方向上，外边距相撞，取较大值（浮动元素不会合并）
       2）块级元素的margin-top问题
       解决：
       1.父元素加overflow:hidden;
       2.父元素或者子元素浮动
       3.父元素加边框  border:1px solid transpartent;
       4.父元素加padding-top:1px;


       4.内边距  padding  不可以取负值和auto
       会撑大容器
        padding:value;  四周的距离
       padding:value value;  上下   左右
       padding:value value value;  上   左右   下
       padding:value value value value;  上   右   下   左


        单边属性：
       padding-top:;
       padding-bottom:;
       padding-left:;
       padding-right:;






        */
        .box{
     
     
            width: 300px;
            height: 300px;
            background-color: pink;
            /*padding-top: 1px;*/
            /*border: 1px solid transparent;*/
            /*float: left;*/
            /*overflow: hidden;*/
            /*border-style:dotted;
            border-color: red;
            border-width: 2px;*/
            /*border: solid red 2px ;*/
            /*border: 2px dotted;*/
            /*border: none;*/
            /*border-top: 5px solid green;*/
            /*border-bottom-color: yellow;*/

            /*margin:20px 30px;*/
            /*margin: 0 auto;*/
            /*margin: -20px;*/

            /*margin: 10px 20px 30px;*/

            /*margin: 10px 20px 30px 40px;*/
            /*margin: 30px;*/
            /*margin-top: 50px;*/
        }
        .one{
     
     
            margin-bottom: 50px;
            /*float: left;*/
        }
        .two{
     
     
            margin-top: 100px;
            /*float: left;*/
        }
        /*.partent{*/
            /*width: 304px;*/
        /*}*/
        .box1{
     
     
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 30px;
            /*float: left;*/
        }
        .container{
     
     
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px dotted red;
            margin: 50px;
            padding: 50px;
            padding-top: 30px;
        }

    </style>
</head>
<body>
<!--<div class="partent">
    <div class="box one"></div>
    <div class="box two"></div>
</div>-->
<!--<div class="box">
    <div class="box1"></div>
</div>-->

<div class="container"></div>
</body>
</html>

效果
在这里插入图片描述

怪异盒模型

盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。
可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准 盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。
在这里插入图片描述

Box-sizing

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定

  • 它有两个值

    • content-box（标准）
      padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。

    • border-box（怪异）
      padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

弹性盒模型:flexbox

伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。

flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

目的：在浏览器窗口变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

flexbox的基础知识

由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。

示例
一个flexbox的基本结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
.box{
     
      display: flex;}    //最外层的为父容器，定义此容器为弹性布局
.item1{
     
      flex-grow: 1; background:pink}       //flex-grow占1比例
.item2{
     
      flex-grow: 2; background:orange}     //占2比例
.item3{
     
      flex-grow: 3; background:red}        <!--占3比例-->
</style>
</head>
<body>
 	<div class="box">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>

效果
在这里插入图片描述

  1. 首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。
  2. 其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等

父容器常用属性

  1. 父容器中的常用属性
    display: flex;
    定义一个flex容器

新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列

  1. justify-content: flex-end;
    设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
    在这里插入图片描述align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
    在这里插入图片描述

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
 .container{
     
     
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container div{
     
     
        width: 100px;
        height: 100px;
     border: 1px solid blueviolet;
     }   
</style>
</head>
<body>

<div class="container">
    <div></div>
</div>


</body>
</html>

效果
在这里插入图片描述

子元素常用属性

*伸缩盒中的每一个元素称为一个项目。
flex-grow: number;
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
.item1{ flex-grow: 1; background:pink}
.item2{ flex-grow: 1; background:orange}
.item3{ flex-grow: 1; background:red}

旧的伸缩盒

伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法

  1. 伸缩盒最老版本
    display:box;
    将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;）
    子元素 box-flex:;

  2. 伸缩盒过渡版本
    display:flexbox;
    将对象作为弹性伸缩盒显示

  3. 伸缩盒最新版本
    display:flex;
    将对象作为弹性伸缩盒显示

浏览内核及前缀

CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。
在这里插入图片描述
在这里插入图片描述

什么是浏览器内核：

所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine"，译为"渲染引擎"。负责对网页语法的解析，比如HTML、JavaScript，并渲染到网页上。所以浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定这浏览器如何显示页面的内容和页面的格式信息。不同的浏览器内核对语法的解释也不相同，因此同一的网页在不同内核的浏览器显示的效果也会有差异。这也就是网页编写者在不同内核的浏览器中测试网页显示效果的原因。

根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。

  1. Gecko内核 前缀为-moz- 火狐浏览器

  2. Webkit内核 前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用， safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。

  3. Trident内核 前缀为-ms- 也称IE内核

  4. Presto内核 前缀-o- 目前只有opera采用
    Opera现已改用Google Chrome的Blink内核。

  5. Blink内核 Blink是一个由Google和Opera Software开发的浏览器排版引擎

css中的继承

所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了颜色值也会应用到段落的文本中。

继承的局限性
在css中，继承是非常自然的行为，但是继承也有局限性。有些属性是不能继承的，比如border属性用来设置边框，它就没有继承性。padding和margin也不能继承。

猜你喜欢

转载自blog.csdn.net/weixin_44368963/article/details/108317468
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022