CSS基础——盒子模型的一些属性概念

目录

display

visibility

overflow

文档流

元素在文档流中的特点

块元素

内联元素

浮动

float

浮动元素特点

清除浮动

clear

小练习

效果图

 具体实现

高度塌陷问题

BFC

特点

如何开启BFC

解决方案

本篇的最终练习

效果图如下:

具体实现 


display

通过display样式可以修改元素的类型。将一个内联元素变成一个块元素

可选值:

        inline:可以将一个元素作为一个内联元素显示;

        block:可以将一个元素作为一个块元素显示;

        inline-block:可以将一个元素作为一个行内块元素(使一个元素既有块元素特点,又有块元素标签特点,既可以设置宽高,又不会独自占有一行);

        none:这个元素不会被现实出来,不会占有位置,也就是隐藏元素;

visibility

可以用来设置元素的隐藏和显示状态

可选值:

        visible:默认值,元素会正常显示出来;

        hidden:元素会被隐藏起来,并且占有位置;

overflow

子元素默认是存在于父元素内容区中,子元素在理论上的最大可以和父元素内容区一致。如果子元素的大小超过了父元素的内容区,则会出现一种情况,就是超过父元素大小的的部分会显示在父元素内容区以外。超出这部分内容,我们称它为溢出部分。

父元素默认将溢出内容在外面显示。通过overflow可以设置父元素如何处理溢出的内容

可选值:

        visible:默认值,可见的。元素不会对溢出内容做任何处理,元素会在父元素以外的显示。

        hidden:溢出的内容会被修剪,不会显示。(一剪没))

        scroll:会为父元素添加滚动条,查看完整内容的时候需要拖动滚动条(无论内容是否溢出,他都会在水平和垂直方向添加滚动条)

        auto:这个很智能,他会根据需求来自动添加滚动条。(水平和垂直,哪个需要,那个显示)

文档流

文档流出在网页的最底层,他表示的就是文档中的一个位置。

文档指的就是网页。文档流就是网页中的一个位置(网页中的一层,也就是网页中最基础的一层)。

我们所创建的元素默认都是出在文档流中的。

元素在文档流中的特点

块元素

        1、块元素在文档流中会独占一行,块元素会从上到下布局排列

        2、块元素在文档流中的宽度,默认是父元素的100%,宽度值是auto。

        3、块元素在文档流中的高度,默认是被子元素内容撑开的。

当元素的宽度为auto的时候,指定的内边距不会影响可见框的大小,而是会去自动修改宽度,自适应内边距     

内联元素

        1、内联元素在文档流中只会占据自身大小,内联元素会从左到右布局排列。如果一行不足以容纳全部内联元素,就会自动换行,并且是从左到右排列布局。

        2、内联元素在文档流中,内联元素的高度和宽度默认是被内容撑开

浮动

上面我们说了,块元素在文档流中默认是垂直排列的。

假如有三个div我们想让他水平排列,如何实现呢?

如果希望块元素在页面水平排列,可以使块元素脱离文档流!!!!

使用float来使的元素浮动,也就达到了脱离文档流的目的

float

当我们为一个元素设置了浮动以后,float属性是一个非none的值。

可选值:

        none:默认值,元素默认在文档流中进行拍了

        left:元素会立即进行脱离文档流,想页面的左侧进行浮动

        right:元素会立即进行脱离文档流,想页面的右侧进行浮动

浮动元素特点

1、元素会立即脱离文档流,元素脱离文档流易后,他下面的元素会立即向上浮动。

2、元素浮动以后会尽量想页面的坐上或者右上浮动。直到遇到父元素的边框或者其他浮动元素边框就会停止。

3、如果我们的浮动元素上边没有浮动块元素,则浮动元素不会向上超过块元素。

4、浮动的元素不会超过他的兄弟元素,顶多会和他的兄弟元素一边齐

5、浮动的元素不会盖住文字,文字他会去自动环绕在浮动元素的周围。我们在文章中使用这个特性来设置文字环绕图片。

6、块元素脱离文档流之后,高度和宽度不会占用父元素的全部,而是被其内容撑开。

7、内联元素脱离文档流以后,会变成块元素。(也就是脱离文档流制后,全部看做块元素)

清除浮动

有时候我们会遇到这种需求:就是当一个元素浮动的时候,另一个元素不要受到他的影响。也就是说:我们希望清除掉其他元素浮动对当前元素产生的一个影响。此时我们就可以使用clear来实现。

clear

他就是可以用来清除其他浮动元素

可选值:

         none:不清楚浮动;默认值

        left:清除左侧浮动元素对当前元素的影响

        right:清除右侧浮动元素对当前元素的影响

        both:清除两侧浮动元素对当前元素的影响,实际上他是清除对他影响最大的元素

清除浮动以后,元素会回到其他元素浮动之前的位置。

小练习

讲到盒子这里,基本的布局就能够实现了, 我们来做一下,简单的联系。

效果图

实现如下图所示的布局, 大概如下图,小伙伴们可以自由发挥一下:

注意:要自己先实现,再看看我们的实现的代码,大家可以看看有多种实现方式

CSS基础——盒子模型的一些属性概念_第1张图片

 具体实现



	
		
		
		
	
	
		
1
1
2
3

高度塌陷问题

文档流中,父元素的高度默认是被子元素撑起来的,换句话说,子元素有多高,父元素就会有多高。(我们可以简单的理解为无论你多大,在父亲眼中,永远是孩子)

当为子元素设置浮动后,子元素已经完全脱离文档流,这个时候就会出现子元素无法撑起父元素的高度,那么就导致了父元素的高度塌陷。当父元素高度塌陷以后,父元素下面的所有元素都会向上移动,此时就会出现页面布局的改变,严重的将导致页面无法正常显示。

因为这个事故,所以,要避免出现这种事故。

BFC

W3C中,页面中元素都有一个隐藏的属性叫做Block Formatting Context,简称BFC,该属性可以设置关闭或者打开,默认的是关闭属性

特点

开启BFC以后,元素的特点如下;

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、BFC的元素可以包含浮动的子元素

如何开启BFC

1、设置元素浮动

        这种开启方式,虽然可以撑开父元素,但是会导致父元素的宽度丢失,并且使用这种方式会导致下边的元素上移。

2、设置元素绝对定位

        同上

3、设置元素的inline-block

        这种开启方式,虽然可以撑开父元素,但是会导致父元素的宽度丢失

4、将元素的overflow设置为一个非visible的值

        注意:当给元素设置了宽度时默认就开启了haslayout

        但是IE6及以下的版本,不支持BFC功能,所使用这种方式要慎重!但是IE6中有这么一个属性haslayout,该属性和BFC类似,所以IE6中可以通过开启haslayout实现;

        直接将zoom设置为1即可开启haslayout

        zoom标识放大的意思,后面的值标识放大几倍

解决方案

1、我们可以将父元素高度固定一个值这,这样就会避免父元素的塌陷问题出现了。

        不过这样的弊端就是,无法做到随子元素的高度而改变了。

2、结合BFC,选择上述第4条开启BFC功能

3、可以再高度他闲的父元素的最后添加一个空div,因为这个div是没有浮动的,所以他可以撑开父元素的高度,所以只要给这个空div清除浮动即可解决高度塌陷。

这种副作用就是会增加一些冗余的div结构。

4、结合after伪类以及第3步骤来清除浮动。(IE6中不支持after伪类)示例代码如下:.

box:after{

        /* 添加一个内容*/

        content:"";

        /* 转化为一个块元素*/

        display:block;

        /* 清除两侧的浮动*/

        clear:both;

}
/* 解决IE6中的兼容问题*/
box{
    zoom:1
}

本篇的最终练习

本章的最终练习是在上面的联系基础上增加一个导航条。

效果图如下:

CSS基础——盒子模型的一些属性概念_第2张图片

具体实现 



	
		
		
		
	
	
		
1

好了,关于盒子模型的概念以及练习就到这里。

欢迎大家点击下方卡片,关注《coder练习生》

你可能感兴趣的:(前端技术CSS及vue,css,html,css3)