html、css基础复习之布局结构篇

所谓“设计一根线,重构一身汗”,掌握好css基础对于提高UI开发效率,提升代码质量有很大的作用。本文由我大熊主播给大家分享一下css中布局方面的基础。不需要游艇火箭,如果看完后有收获的话就点个赞点个收藏便是极好的。

本文的目录如下,采取的是由大到小的层面去分享:

1.css定位布局

2.css弹性布局

3.css盒子模型

4.css BFC

另预告一下,css动画与即抄即用的css常用样式会在下篇中分享,敬请期待。

好,那就开始发车了。

css定位布局

定位布局一般分为下面四类,我们常用的是相对定位,绝对定位和固定定位,而sticky定位是一个比较有趣的定位。

html、css基础复习之布局结构篇_第1张图片

相对定位

相对定位是我们最常见最普通的定位了,他有这2方面的特点:

1.元素不脱离文档流

2.相对于自身元素定位。

所谓不脱离文档流,就是设置相对定位后,他还是处于原本的文档流中,保留原本占据的空间。可以看看这个示例,当我设置了和平精英这个元素为相对定位后,他还是像之前一样占据着文档流的空间。

第二个特点是相对于自身元素定位,意思是当我们设置top,left那些值时,他是相对自身原本的位置离顶部,离左边相应的距离。可以看看这个示例,我给和平精英这个容器设置属性后,他是相对原本的位置进行位移的。

绝对定位

接下来说一下绝对定位,他一般用于依赖父元素,位置随意的元素上,例如红点呀,角标啊那些。

html、css基础复习之布局结构篇_第2张图片

他有以下这三点特点:
1.元素脱离文档流
2.宽高由容器里面的内容决定
3.相对于设置了定位的父级元素来定位。

设置了绝对定位后,元素会脱离文档流,不占据文档流的位置,看起来像漂浮在文档流的上方一样。

元素的宽高也会发生变化,他不再占满整行,而是里面的内容能撑起多大的面积就占多大的面积。

可以看看这个示例,当我们给和平精英的元素设置绝对定位后,他就像不占空间一样浮了起来,下面的元素就往上占据了他的位置了,而且这个元素的面积只能刚好包住里面的字吧,这就是宽高由里面的内容决定。当然你可以给他设置宽高的样式,让他变成你想要的宽高。

html、css基础复习之布局结构篇_第3张图片

绝对定位还有一个特点,是它相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

看看这个示例,当我们给这个元素设置绝对定位和top属性后,它一下子就去到最顶部了,因为此时它的父级元素都没有设置定位,它相对于body来定位了。如果我们给最外层第二个元素设置定位,是不是就变成了相对于它来定位啦,而如果这时再给最外层第三个元素设置定位,由于它离绝对定位元素更近,所以绝对定位元素就相对于它来定位了。

固定定位

接着讲一下固定定位。它和绝对定位比较相似,设置后元素会脱离文档流,宽高由里面的内容决定。但是他不再相对于父级元素定位,而是根据浏览器窗口定位。可以看看这儿右下角的妲己图标,当页面滚动时它还停在原地不动,这就是相固定定位了。这个就不展开了。

sticky定位

最后我们说一下很有趣的sticky定位。我们看一下右边的导航栏,它一开始还是在文档流中的,向上滑动后后就黏在屏幕顶部,向下滑动后又回到文档流中。可以认为,当它在屏幕里时是相对定位,当它离开屏幕时是固定定位。设置也很简单,只需要对导航栏元素设置position:sticky和top属性就行了。当然如果你想它黏在屏幕底部,那就设置bottom属性。

用这个属性时要注意以下6点,但在我的使用经验来看,一般就是要特别注意第4第6第7点就行了。

1.sticky不会触发BFC,
2.z-index无效,
3.当父元素的height:100%时,页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度。
6.必须指定top、bottom、left、right4个值之一
7.安卓4.4和ios7之前的低端手机不兼容,可用js使导航栏在固定定位与相对定位间切换。

定位属性

定位属性包含位置属性及层级属性。位置属性包括top、bottom、left、right,这些属性指的是目标元素相对于参照物的距离。

html、css基础复习之布局结构篇_第4张图片

而层级属性,表示哪一个显示得更前面一点。我们可以看一下这个例子,当我给第3个盒子添加z-index后,他是不是盖在最上面了啦,而我再给第4个盒子添加更大的z-index后,它就盖在第3个盒子上面了。

css弹性布局

掌握好css弹性布局,做UI开发时会更得心应手、事半功倍。(重点,敲黑板!!!)

要实现弹性布局也很简单,只需要对容器添加display:flex;就可以了。

接下来看一下弹性布局包含的内容。下图是一个弹性布局的示意图,在一个大的container容器里,横放着三个item项目。main axis意思是主轴,就是item按哪条轴来排列的,cross axis是侧轴或者交叉轴,就是和主轴垂直的那条轴。start 和 end 分别表示轴的开头和结尾。接下来我一个一个属性介绍一下。

html、css基础复习之布局结构篇_第5张图片

flex-direction

先说容器属性,flex-direction表示主轴的方向,即项目是要横着排还是竖着排。一般我们只用到row和column,分别是横着排和竖着排。加上了reverse表示反方向排列。接下来我们先假设项目都是默认的横着排的。

html、css基础复习之布局结构篇_第6张图片

justify-content

justify-content定义项目在主轴上是怎么对齐的,分别有下图五点。要注意的是,如果使用了space-around的话,两侧项目到边缘的距离是项目与项目之间间距的一半,这个也比较好理解,每个项目都有间距,那两边的项目只有一个间距就到边缘,而中间那些项目左一个间距右一个间距,自然就是边缘的间距的两倍了。

html、css基础复习之布局结构篇_第7张图片

align-items

既然有主轴的对齐就肯定有交叉轴的对齐了,属性值也和上一个有点相似。这儿就不多说了。用得最多的就是center属性,拿来做垂直居中对齐。一般弹性布局用得最多的容器属性就是这两个属性了。

html、css基础复习之布局结构篇_第8张图片

flex-wrap

flex-wrap定义如果一行放不下,应该怎么办,默认是不换行,也有换行及反着换行的选择。使用换行的话,就可以实现出九宫格,瀑布流之类的效果了。

html、css基础复习之布局结构篇_第9张图片

flex-grow

接下来要介绍的是项目的属性了,就是在一个个item里设置的属性。用得最多的是flex-grow,一般我们直接只写flex,表示item占据空间的比例,如果每个item都是1那就是平均分,如果其中一个item设为2,那么他占的空间是别的item的两倍。

html、css基础复习之布局结构篇_第10张图片

很多时候我会用这个属性来做图文横排的样式,给文字设个flex=1,就可以把除了图片以外的空间都占满了。

html、css基础复习之布局结构篇_第11张图片

align-self

align-self定义单个项目的交叉轴对齐方式,比如某个项目不想按正常套路排列,就可以用这个属性来设置了,可选值和前面说的align-item是一样的。

html、css基础复习之布局结构篇_第12张图片

order

order定义项目的排列顺序,数值越小,排列越靠前,默认为0。有时候如果想做一个九宫格抽奖的效果,就可以做一个按钮再做八个奖品项,然后用order来调整他们的顺序了,而不用像以前那样,先做四个奖品项,再做一个按钮,再做四个奖品项了。

html、css基础复习之布局结构篇_第13张图片

可视化工具

弹性布局的介绍到此就完了,这里再介绍一个直观的可视化工具flexbox playground,给容器和项目设置不同的值,看看他们的表现。

html、css基础复习之布局结构篇_第14张图片

这是另一个可视化工具flexbox.help,和之前的相比,可以生成css代码,但不能给单个项目设置属性看效果。

html、css基础复习之布局结构篇_第15张图片

css盒子模型

刚刚说完元素之间的布局后,接下来我要说的是更小层面的东西了,就是单个元素的组成结构,我们表示为盒子模型。

大家先看看下图这个画框,框的中间是一副画,在css里表示content,画与画框之间的间距,我们叫padding,画框相当于border,而画框外面的间距就是margin了。css的盒子模型就是长这样的了。

模型的宽与高,在默认标准模式下,就是指content的宽与高。

html、css基础复习之布局结构篇_第16张图片

但当我们设置box-sizing: border-box时,模型的宽与高就是content+padding+border的宽高了。

html、css基础复习之布局结构篇_第17张图片

说这个有什么用呢?用处可大了。以下面这个例子为例,假设容器宽高是固定的,这时我们需要调小padding间距,如果不用border-box,那模型的宽就是content的宽,我们调小多少padding,就要把content调大相应的尺寸,这样最终容器的宽高才能保持一致。

而如果用了border-box,此时模型的宽就是content+padding+border的宽,我们调小padding就行了,content会自动撑满整个容器,就是自动调大了尺寸了,一步到位了。所以很多时候我挺喜欢用这个属性的。

css BFC

说完border-box,我再说一个有趣的现象,叫外边距重叠现象。比如你写了两个列表项,分别设置了这样的间距,然后你用浏览器打开一看,发现他们的间距合并在一起了。这个现象是合理的,因为你本来按着设计稿量的尺寸设置了每个列表项的外边距,结果浏览器却显示了2倍的间距,这样就很奇怪了吧。不过为了减少这个现象的影响,我一般是只设置一边的间距,比如只设置列表项的下边距之类的。

html、css基础复习之布局结构篇_第18张图片

有的时候可能你还是不想外边距重叠,那解决办法就是创建BFC。创建了BFC后,元素自成了一个环境,环境里面与外面的的样式和表现互相独立,互不影响。所以就两个外间距都出现了。

html、css基础复习之布局结构篇_第19张图片

那怎么创建BFC呢?这里有4个办法。

1.overflow不为visible;
2.float的值不为none;
3.position的值为absolute、fixed;
4.display属性为inline-blocks,table, table-cell,table-caption,flex,inline-flex;

示例演示的是第一个办法,设置overflow属性。可以看到,一开始元素之间的外边距是重叠了的,这时候让我来创建一个bfc。前面说了要创建一个环境,让环境里面的与外面的互不影响,所以这时我要在p标签外面添加一个div,然后设置div的overflow属性,让div成为一个bfc,使得里面的p样式不受外面影响。设置完后,可以看到两者的外间距就分开了。

结语

关于布局、结构方面的知识点我就分享完了,不知本文能否帮得到大家呢?在下篇文章中,我会继续分享css动画和即抄即用的css常用样式,敬请期待。大家有什么想分享的欢迎留言,也欢迎大家收藏点赞,说不定哪个时候突然需要复习和参考一下呢。(。ӧ◡ӧ。)

你可能感兴趣的:(html、css基础复习之布局结构篇)