奇舞-盒模型-笔记

Box Model

width

• 指定 content box 宽度(不包括padding的宽度的)
• 百分数相对于父容器(包含块)的content box 宽度

height

• 指定content box高度
• 百分数相对于父容器(包含块) 的content box 高度
• 只有当包含块的高度 不依赖该元素时，百分比高度才生效

//html
    <div class="container">
        <div class="child">属性具有重叠的功能， 指定规则的顺序很重要</div>
    </div>
//css
    body {
        margin: 0;
    }
    .container {
        background: lightblue;
        height: 100vh;
    }
    .child {
        height: 100%;
        background: coral;
    }

padding

• 内边距
• padding-top padding-right padding-bottom padding-left
• 缩写：padding
  margin
• 外边距
• margin-top margin-right margin-bottom margin-left
• 缩写 margin

//padding-top % 的使用
 <div class="c"></div>
    .c {
        background: red;
        padding-top: 50%;
    }


//margin 重叠现象
    <div class="a"></div>
    <div class="b"></div>
//css

    .a {
        background: lightblue;
        height: 100px;
        margin-bottom: 100px;
    }
    .b {
        background: coral;
        height: 100px;
        margin-top: 100px;
    }

margin 可以为负值吗？可以

box-sizing 默认的是content-box

• 改变盒模型计算方式
• 取值：border-box | content-box
• 初始值 content-box

border

• 边框的三个要素

  • border-width ：length | thin | medium | thick
  • border-style : none | solid | dashed | dotted | double
  • border-color : color

• 四个方向

  • border-left
  • border-top
  • border-right
  • border-bottom

min-width & max-width

overflow

• 益处控制
• 取值 visible | hidden | scroll | auto
• 初始值 visible

视觉格式化模型
浏览器是怎么排版的？

视口(Viewport)

• 浏览器的可视区域
• 用户通过视口查看网页内容(透过窗户看风景)

块级元素(Block-level Elements)

• 会被格式化成块状的元素
• 例如 p div section 等
• 将display 设置block list-item table 使元素变为块级

行级元素(inlime-level Elemnets)

• 不会为其内容生成块级狂
• 让其内容分布在多行中
• display 设置为 inline inline-block inline-table 是的元素变为行级

    <p>
        <span>
            Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series 
        </span>
    </p>
//css

    p {
        line-height: 2;
        padding: 1em;
        border: 2px solid #00f;
        background: #ccf; 
    }
    span {
        background: #fcc;
        border:2px solid #f00;
    }

盒子的生成

• 每个块级元素生成一个主块级盒(principal block-level box）用来包含子级盒
• 每个行级元素生成一个行级盒，行级盒子分布于多行

Box Model - revisited

• margin 行级盒的 margin-top 和margin-bottom 不会产生效果
• padding 行级盒的 padding-top 和padding-top 不影响布局

块级盒子中的子盒子的生成

• 块级盒子中可以包含多个子块级盒子
• 也可以包含多个行级盒子
• 不在行级元素里面的文字，会生成匿名行级盒比如<p>Some <em> Text</em></p>
• 块级盒子中不能同时包含块级和行级盒子，遇到这种情况时候，会生成匿名块级盒来包含行级盒。比如<div><h1>标题</h1><span>2016-12-12</span><div>

行级盒子内的子盒子的生成

• 行级盒子内可以包含行级盒子
• 行级盒子包含块级盒子时，会被块级盒子拆成两个行级盒子，这两个盒子有被匿名盒子包含

display 属性

• block 生成块级盒
• inline 生成行级盒
• inline-block 生成行级盒， 为其内容生成块级盒
• none 在排版时将元素忽略

visibility

• 控制元素展示
• 取值 visible | hidden | collapse
• 初始值visible

Generated Content

• 控制元素
• ::before 和 ::after
• content

//实现同心圆六个扇形

//方案一
<svg viewBox="0 0 64 64" class="warning">
  <circle r="25%" cx="50%" cy="50%"/>
</svg>

<style>
.warning {
  width: 300px;
  background: black;
  border-radius: 50%;
}

.warning circle {
  fill: none;
  stroke: yellow;
  stroke-width: 32;
  stroke-dasharray: 26%;
}
</style>
方案2
<div></div>

<style>
div {
  padding-top: 100%;
  background: repeating-conic-gradient(black 0 60deg, yellow 0 120deg);
  border-radius: 50%;
}
</style>