这是我参与「第四届青训营」笔记创作活动的的第8天

行内块问题

<style>
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: blue;
        }
    </style>

    <div class="one"></div>
    <div class="two"></div>

<div class="one"></div><div class="two"></div>

浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离。

浮动

作用

图文环绕（早期）

网页布局

使两个div标签都向左浮动，因此块在一行排列

 <div class="one"></div>
 <div class="two"></div>
    
<style>
        div{
            width: 100px;
            height: 100px;
            display:inline-block;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: blue;
            float: left;
        }
    </style>

特点

浮动元素会脱离标准流，在标准流中不占位置（相当于从地面飘到的空中）比如说粉色块

.one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

.one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }

浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高

注意浮动的元素不能通过margin:0 auto

css书写顺序

浮动/display
盒子模型：margin border padding 宽度高度背景色
文字样式

属性

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示

常用取值：

left左浮动
right右浮动
none不浮动，默认值

清除浮动

通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素

常用取值：

left左侧不允许出现浮动元素
right右侧不允许出现浮动元素
both两侧不允许出现浮动元素
none允许两侧出现浮动元素，默值

直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

额外标签法

缺点：会在页面增加额外的标签，会让页面的ＨＴＭＬ结构变得复杂

操作：在父元素内容的最后添加一个块级元素，给添加的元素设置

ｃｌｅａｒ：ｂｏｔｈ消除两边的影响

 <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        ／／额外的标签
        <div class="clearfix"></div>
    </div>
    <style>
     　　.clearfix{
            　　　clear: both;
       　}
     </style>

清除前

清除后

单伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

操作：用伪元素代替额外标签

基本写法

.clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

补充写法

.clearfix::after{
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

双伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

操作：

.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;
        }

给父元素设置overflow: hidden

优点：方便

操作：直接给父元素设置overflow: hidden

轮廓属性

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

常用属性

outline-width:轮廓宽度
outline-color:轮廓颜色
outline-style:轮廓样式
outline简写

outline和border的区别

border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
outline不影响元素的尺寸和位置，而border会影响

总结

今天没有课程，主要针对前几天的ｃｓｓ知识点继续学习，以ｃｓｓ的浮动为主，可以让块级元素脱离常规的文档流。

css浮动|青训营笔记

浮动

作用