CSS常用样式-盒模型扩展应用CSS常用样式-盒模型扩展应用清除默认样式大部分标签都有一个浏览器加载的默认样式，会对

CSS常用样式-盒模型扩展应用

清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式
盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
两种列表

        * {
            /* 清楚盒模型属性中内外边距 */
            margin: 0px;
            padding: 0px;
        }

        ul,ol {
            /* 清楚列表默认样式 */
            list-style: none;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        h1,h2,h3,h4,h5,h6,b,strong{
            font-weight: normal;
        }

        body {
            color: #666;
            font-size: 14px;
            font-family: Arial,consolas, Microsoft Yahei, SimSun;
        }

height 应用

根据不同的需求，高度属性可以设置也可以不设置
如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
如果不设置高度：会根据标签内部内容高度自动撑开。
以
标签为例，根据情况不同选择是否设置高度
overflow 属性【处理溢出情况】
- 设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
- visible 默认值，不能解决溢出部分问题
- hidden 溢出部分直接隐藏
- scroll 溢出部分出现滚动条
- auto 自动的，如果溢出会自动出现滚动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            .demo1{
                width: 200px;
                height: 200px;
                border: 1px solid red;

                /*
                    溢出问题解决 overflow
                    1.visible 默认值，不能解决溢出部分问题
                    2.hidden 溢出部分直接隐藏
                    3.scroll 溢出部分出现滚动条
                    4.auto 自动的，如果溢出会自动出现滚动
                */
                overflow: auto; 
            }
        </style>
    </head>
    <body>
        <div class="demo1">
            对酒当歌，人生几何！</br>
            
            譬如朝露，去日苦多。</br>

            慨当以慷，忧思难忘。</br>

            何以解忧？唯有杜康。</br>

            青青子衿，悠悠我心。</br>

            但为君故，沉吟至今。</br>

            呦呦鹿鸣，食野之苹。</br>

            我有嘉宾，鼓瑟吹笙。</br>

            明明如月，何时可掇？</br>

            忧从中来，不可断绝。</br>

            越陌度阡，枉用相存。</br>

            契阔谈䜩，心念旧恩。</br>

            月明星稀，乌鹊南飞。</br>

            绕树三匝，何枝可依？</br>

            山不厌高，海不厌深。</br>

            周公吐哺，天下归心。</br>
        </div>
    </body>
    </html>

居中
- 水平居中：text-align属性
- 单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            .demo1{
                border: 1px solid red;
                text-align: center;
                height: 100px;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        
        <div class="demo1">你好</div>
    </body>
    </html>
```
- 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
- 一个元素内部嵌套的子元素，在父元素中居中。垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
- 元素水平居中
  - 针对类似
    样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin值，水平方向的值都设置为 auto。原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
父子盒模型
- 一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
- 父元素的width ≥ 所有子元素width + padding + border + margi如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素
- 特殊情况：盒模型自动内减
- 父子盒模型中，只有一个子元素，且子元素是类似
  标签必须占一行的。不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
- 子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
margin 塌陷现象
- margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
- 同级元素塌陷
  - 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
- 父子元素塌陷
  - 父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
  - 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

标准文档流

- 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
- HTML就是一种标准文档流文件。
- HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

- 空白折叠现象
- 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果
- 自动换行，元素内一行内容写满元素的 width 时会自动进行换行

元素等级

- 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别： 块级元素、行内元素、行内块元素等
- 块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等
    - a、块级元素可以设置宽高，在浏览器中正常加载。
    - b、块级元素必须独占一行，不能与其他任何标签并排一行。
    - c、块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内 容自动撑开高度。

- 行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等
    - a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容 易出现加载问题。
    - b、行内元素可以与其他的行内或行内块元素并排一行显示。
    - c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

- 行内块元素：比如 <img>、<input> 等
    - a、行内块元素可以设置宽度和高度。
    - b、行内块元素可以与其他的行内或行内块并排一行显示。
    - c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。  
    - d、行内块依旧具有标准流的微观性质，例如空白折叠现象。

CSS 常用样式-显示模式

- 显示模式 display
    - 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不 变的，后期可以通过 display 属性更改一个标签的显示模式。
    - 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
        - block表示元素要以块级元素模式加载，具备块级特点
        - inline表示元素要以行内元素模式加载，具备行内特点
        - inline-block表示标签要以行内块模式加载，具备行内块特点
        - none表示标签及内部内容直接隐藏，让出原有标准流的位置
- 脱离标准流
    - isplay 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下 加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准 流的限制。
    - 标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位