CSS布局机制

最新推荐文章于 2024-06-04 08:40:27 发布

江湖与天涯

最新推荐文章于 2024-06-04 08:40:27 发布

阅读量323

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/qq_41538952/article/details/105312838

版权

CSS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网页布局的核心:就是用CSS来摆放盒子

CSS提供了三种机制来摆放和定位盒子，分别为普通流(标准流)，浮动和定位

1.标准流（普通流）

块级元素会独占一行,从上向下排列

常用块级元素:div, hr, p, h1-h6, ul, ol, dl, form, table

行内元素会按顺序从左到右排列,直至碰到父级元素的边缘才换行

常用的行内元素:span, a, i, em等

2.浮动

让盒子从普通流中浮起来,主要的作用是让块级元素浮起来
作用

让多个盒子在一行中显示
浮动最早是用于做文字环绕图片效果的

语法

float:none | left | right none为默认值

浮动的特性

盒子添加浮动特性之后会改变该块级元素的属性，会转化为一个相当于行内块元素的元素,但是相邻盒子之间没有空隙,当多个块级元素添加浮动特性之后，会从左到右依次进行排列

项目小细节:

因为浮动是脱标的,会影响下面的标准流,所以在实际开发过程中需要给浮动的元素添加一个标准流的父级元素,在父级盒子中实现浮动,这样就可以最大化的减小浮动元素对标准流元素的影响.
浮动的元素只会影响当前和后面的标准流盒子,对之前的标准流盒子没有影响
当一个父级盒子中有多个盒子时,如果其中一个盒子浮动了,那么其他盒子也应该要浮动,以免引起问题

浮动元素与父盒子的关系:首先,子盒子的浮动是参照父盒子来对齐的;再者,不会与父盒子的边框重叠,也不会超过父盒子的内边距

清除浮动的本质

主要是为了解决父级元素因为子元素浮动引起的内部高度为0的问题,清除浮动之后,父级会根据浮动的子盒子的高度自动检测高度,也就是所谓的子元素撑开父元素,这样一来,父级元素有了高度之后就不会影响下面标准流的布局了

清除浮动的方法(隔墙法)
额外标签法

概念：通过在浮动元素的末尾添加一个空的标签,如<div class="one_3" style="clear: both;"></div>,也可以是其他块级元素,如br等
案例:


<body>
    <div class="one">
        <div class="one_1"></div>     
        <div class="one_2"></div>
        <div class="one_3" style="clear: both;"></div>
    </div>
    <div class="two"></div>
</body>
优点:通俗易懂,书写方便
缺点:添加许多无意义标签,结构化比较差

给父级元素添加overflow属性

语法:overflow:hidden | auto | scroll 属性值为这三个都能解决当取值hidden时会隐藏溢出的部分,当取值auto时会生成垂直滚动条,当取值scroll时在水平和垂直方向都会生成滚动条.

缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏,无法显示需要溢出的元素

在父级元素上使用after伪元素

这是在实际开发中常用的清除浮动的方法

案例:

 <!-- css部分 -->
.clearFix:after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
 /* 兼容i6和i7 */
        .clearFix{
            *zoom: 1;       
        }

<!-- html部分 -->
<body>
    <div class="one clearFix">
        <div class="one_1"></div>     
        <div class="one_2"></div>
        <!-- <div class="one_3" style="clear: both;"></div> -->
    </div>
    <div class="two"></div>
</body>

在父级上使用双伪元素
语法:

<!-- css部分 -->
.clearFix::before,
        .clearFix::after{
            content: "";
            display: table;
        }
        .clearFix::after{
            clear: both;
        }
        /* 兼容i6和i7 */
        .clearFix{
            *zoom: 1;       
        }

<!-- html部分 -->
<!-- 类名为one_1和one_2的为浮动元素,类名为one的是父级元素,类名为one_3的为额外标签 -->
<body>
    <div class="one clearFix">
        <div class="one_1"></div>     
        <div class="one_2"></div>
        <!-- <div class="one_3" style="clear: both;"></div> -->
    </div>
    <div class="two"></div>
</body>

3.定位

将盒子定在浏览器的某一位置,这在CSS中非常重要,特别是后面的JS特效
应用场景:将盒子定位在页面的某一位置,该盒子是漂浮于页面之上的,包括标准流和浮动,总而言之,当页面上的某一块在页面滚动的时候不需要跟着页面移动等情况的时候就可以使用定位.
定位组成部分:定位模式+边偏移
所以一般在使用定位时应当先确定定位模式,再添加边偏移量
可以使用在行内元素上,对行内元素使用定位就相当于将其转化为类似于块级元素的元素,可设置宽度和高度
边偏移:

即方位名词 : top bottom right left 后面跟精确单位值,表示距离相应边的距离,比如top:50px则是代表距离上边框50像素的位置

定位模式
语法

选择器{position:属性值;} 定位模式是有不同形式的,在不同情况用不同的定位模式

当属性值为static时表示静态定位
当属性值为relative时表示相对定位
当属性值为absolute时表示绝对定位
当属性值fixed时表示固定定位

相对定位的特点:

相对于原来自己在标准流中的位置来移动的
移动之后继续占有在标准流中的位置,后面的盒子任然以标准流的形式来对待该盒子

绝对定位的两个特点

绝对定位是以带有定位的父级元素来移动位置,入过父级元素没有定位的话将会浏览器文档为基准来移动位置
带有绝对定位的盒子不占有原来标准流中的位置,会影响同一父元素中的其他标准流盒子,是完全脱标的

子绝父相

在网页布局中应用比较广泛,基本原理就是子盒子使用绝对定位,父盒子采用相对定位,这样一来子盒子不占有位置,可以再父盒子中随意移动,因为子盒子采用绝对定位之后父盒子也需要采用定位,否则子盒子的定位将会以浏览器文档为基准偏移,但是父盒子又要保证不影响后面盒子的布局,所以要采用相对定位比较合适,因为相对定位即使在脱离原本位置之后,它在标准流中依然占有位置,不会造成后面盒子的上移.这就是子绝父相的基本原理.