哈喽哈喽，又跟大家见面了，上周我们说了挺多关于CSS和HTML的事情，这周咱们来继续来说说关于他们的故事。

盒模型

Part1

众所周知，元素分为块级元素和行内元素，顾名思义

块级元素：1.占据所有可用的宽度，以换行开始

2.通常用于较大的内容块，比如标题或结构化元素

行类元素：1.只占据内容所需宽度，同一行内挨着拜访

2.通常同于较小内容块，如被选设置为粗体或斜体的一些词

盒子的分类：一个元素产生什么样的盒子和他的display属性有关

盒子的组成：由margin,padding,border和content组成边框盒：由border，padding，content组成

填充盒：由padding，content组成

内容盒：由content组成

盒子内容属性：overflow： visible，可见的

hidden，隐藏的（不会超出padding）

scroll，滚动的

auto，自动的

content内容盒：默认内容盒，如内容超出需要计算宽高

box-sizing：content-box

边框盒，自己计算content的width和height：

box-sizing：border-box

那说到重点了，这些在以后的网页开发中会用的非常多，也是本骚棒最喜欢用的 行内块

a{
    display: inline-block;  变成行内盒
    width: 300px;
    height: 100px;
    background-color: blue;
    改变成行内盒之后设置宽高后居中
    text-align: center;
    line-height: 100px;
}

Part2（可视化模型）

视觉格式化模型规定了三种定位体系

1、常规流（normal flow）：又叫普通流、文档流、普通文档流

所有元素默认状态下都是常规流定位

盒子位置：外边距相邻指的是两个外边距之间没有border、padding和content

垂直方向若两个外边距相邻，则会发生折叠

合并：正数取最大，负数取最小，一正一负相加

2、浮动（float）

float：none  不浮动

float：left  左浮动

float：right  右浮动

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

浮动盒子的顶边不得高于上一个盒子的顶边

若放不下，则换行

常规流盒子在摆放时无视浮动盒子，自动高度计算时无视浮动盒子，也叫高度坍塌

浮动盒子在摆放时要避开常规流盒子

对最后一个子元素用clear：both来清除常规流盒子和浮动盒子的高度坍塌

clear：both

也可以用伪元素选择器选择父元素\

父元素：after{
content：";
display:block
clear:both
}

3、绝对定位（absolute positioned）

当浮动元素被设置为绝对定位，元素的float属性会被强制改为none（float属性会失效）

.box8{
    position: static;    默认静态位置
    position: relative;  相对位置
    position: absolute;  绝对位置
    position: fixed;     固定位置
    position: sticky;    粘性位置
}

相对位置：相对于盒子原来的位置偏移（原本所占空间不变，未脱离文档流，一般会用来做绝对位置的父元素）

.box9{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: relative;
    left: 40px;
    top: 30px;
}

绝对位置 ：相对于设置了定位属性（除static）的父元素偏移，如果没有就相对于html元素偏移（脱离了文档流，不再占据空间）

.box9{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: absolute;
    left: 40px;
    top: 30px;

当浮动元素被设置为绝对定位，元素的float属性会被强制改为none（float属性会失效）

子绝父相子绝父相子绝父相子绝父相子绝父相子绝父相 这可不是大家想的绝后啊，这是子元素用绝对定位，父元素用相对定位

    .box10{
    width: 500px;
    height: 500px;
    background-color: darkgoldenrod;
    position: relative;
    left: 100px;
    top: 100px;
}
.box11{
    width: 100px;
    height: 100px;
    background-color: darkred;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 3;
}
.box12{
    width: 100px;
    height: 100px;
    background-color: rgb(90, 185, 45);
    position: absolute;
    left: 80px;
    top: 90px;
    z-index: 1;
}
.box13{
    width: 100px;
    height: 100px;
    background-color: rgb(50, 87, 211);
    position: absolute;
    left: 60px;
    top: 80px;
    z-index: 2;
}

三个子元素因不属于文档流，固在页面显示为重叠样式，z-index可设置三个重叠顺序

固定位置，相对于浏览器窗口的固定位置，不会随着用户滚动变化，脱离文档流

.fixed{
    width: 50px;
    height: 120px;
    background-color: slateblue;
    position: fixed;
    right: 20px;
    top: 200px;
}

粘性定位：依赖于用户的滚动，在relative，fix之间转换

.sticky {
    width: 500px;
    height: 2000px;
    background-color: snow;

}
.box1{
    height: 250px;
    width: 400px;
    background-color: springgreen;
    position: sticky;
    top: 20px;
}
.box2{
    width: 400px;
    height: 250px;
    background-color: rgb(27, 23, 23);
    /* position: sticky; */
    top: 20px;
}

任何一个元素都必须属于其中某一种定位体系

如何创建BFC（块级格式化上下文 Box formatting Context）：是一个独立的区域，这区域和外部毫不相干

1、float的值不能是none

2、position的值不是static或relative

3、display的值是inline-block、table、flex、table-caption或inline-flex

4、overflow的值不是visible

作用：

1、避免margin发生重叠或折叠

2、清除浮动，解决父级高度塌陷的问题

3、自适应两栏布局 有序列表和无序列表

有序列表

<ol>
        <li></li>
        <li></li>
</ol>

无序列表

 <ul>
        <li></li>
        <li></li>
    </ul>

定义列表


    <dl>
        <dt></dt>
        <dd></dd>

        <dt></dt>
        <dd></dd>
    </dl>

dt首行缩进

列表项样式

属性值	含义
none	取消列表样式
disc	默认，标记实心圆
circle	空心圆
square	实心方块
decimal	标记是数字
upper-alpha lower-alpha	大小写英文字母

布局基础

常用布局：

1、中间居中

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

.container{
    width: 100px;
    margin: 0%;
}

2、上面铺满，中间居中

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

        </div>
    </body>

.container{
    width: 100px;
    margin: 0% auto;
}
header{
    width: 100%;
}

3、上下铺满，中间居中

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

        </div>
        <footer></footer>
    </body>

header,footer{
    width: 100%;
}
.container{
    width: 100px;
    margin: 0%;
}

改变主轴的方向

flex-direction

.item5{
    flex-direction: row;               默认情况下，水平向右
    flex-direction: row-reverse;       水平向左
    flex-direction: column;            垂直向下
    flex-direction: column-reverse;    垂直向上
}

改变交叉轴轴线位置

.container {
    width: 600px;
    height: 800px;
    border: black solid 1px;
    display: flex;
    align-content: center;          
    align-content: flex-end;
    align-content: flex-start;
    align-content: space-around;
    align-content: space-between;
}

额外属性

盒子边框变圆角：boder-radius

字变斜体属性：font-style：italic

文字间隙：字或者字母letter-spacing：20px

单词间距word-spacing：20px

首行缩进：text-indent

a标签上划线：text-decoration：overline

a标签中划线：text-decoration：line-through

衬线字体：边缘被修饰，纸张上视觉良好

苦逼新手程序猿的第二周

盒模型

Part1

Part2（可视化模型）