初学牛腩CSS核心内容标准流,盒子模型,浮动,定位

xiaoxiao2021-02-28  21

最近刚刚学习牛腩,因为考试很多,效率有点低,所以学的有些慢,但是师父说过多总结是好的,所以我觉得虽然看起来很小的东西,本着对自己负责的态度,还是写出来吧,给脑子腾个地方。

在讲CSS核心内容时候,它提前讲了什么是核心内容,包括以下几个方面:标准流,盒子模型,浮动,定位。

标准流:又称标准文档流,就是标签的排列方式,包括以下两个方面:

块级元素::<div></div>,他的效果是单独占了一行

行内元素:<span></span> 表示一行里面的数据,不像块级元素一样,单独占一行。

盒子模型:我理解的盒子模型就是把内容像放在一个盒子里一样,就像我们生活中常见的相框相册一样:

            其实就是把我们要显示的东西装在一个有边框的盒子里,显示出来好看。

浮动(float:让屏幕上的东西可以换位置,float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

定位:分为相对定位和绝对定位,还有上面说的浮动,CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

   定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

定位和浮动的关系:CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。

总结:每次学习都要总结,这样进步就会更大的

              

转载请注明原文地址: https://www.6miu.com/read-2800303.html

最新回复(0)