float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"的精神,这样在出现一些问题的时候才不至于"手慌脚乱"!因此,今天就特别整理和总结一下float属性。 1. flo ...
分类:
Web程序 时间:
2020-06-03 20:32:04
阅读次数:
68
1、左右布局 这就要说到一个属性float,使用float: left;就可以让浮动元素 会脱离正常的文档布局流,并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容,此时会围绕着浮动元素,填满其右侧的空间。但是,子类使用float来使元素并排,那么父类就需要使用clearfix来防止子元素 ...
分类:
Web程序 时间:
2020-06-02 18:34:45
阅读次数:
72
CSS三个大核心模块:盒模型、浮动和定位,其余的都是细节。网页布局就是把网页元素(文字,图片等)资源放入盒子里,利用CSS合理摆放盒子的过程。说明盒模型就是把HTML页面中的元素看成是一个个矩形的盒子,里面装着内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒子模型在网页中,每个盒子都是大小不等的矩形框,除了有自己大
分类:
Web程序 时间:
2020-06-02 09:37:44
阅读次数:
73
CSS三个大核心模块:盒模型、浮动和定位,其余的都是细节。网页布局就是把网页元素(文字,图片等)资源放入盒子里,利用CSS合理摆放盒子的过程。说明盒模型就是把HTML页面中的元素看成是一个个矩形的盒子,里面装着内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒子模型在网页中,每个盒子都是大小不等的矩形框,除了有自己大
分类:
Web程序 时间:
2020-06-02 09:25:15
阅读次数:
59
CSS三个大核心模块:盒模型、浮动和定位,其余的都是细节。网页布局就是把网页元素(文字,图片等)资源放入盒子里,利用CSS合理摆放盒子的过程。说明盒模型就是把HTML页面中的元素看成是一个个矩形的盒子,里面装着内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒子模型在网页中,每个盒子都是大小不等的矩形框,除了有自己大
分类:
Web程序 时间:
2020-06-02 09:18:00
阅读次数:
67
今天晴 股市晴 投资理财:股市大涨。今天收益还行。估计有一千块。然后清掉了一个份额很少的基金。基础太少,浮动盈亏也跟着少。即使以后涨了,实际收益也没多少。实在没意思。毕竟入市是为了挣钱,不是挣点数。后续逐渐清空那些份额很少的。必要时,给上涨的基金加仓。适当的风险还是得承担的。 事业:无 生活:终于有 ...
分类:
其他好文 时间:
2020-06-01 22:18:31
阅读次数:
85
写在前面:很多时候我们需要水平居中时候用margin: 0 auto;但我们要知道,这个方法有很大的局限性,它不能对浮动元素和绝对定位元素居中,而且对于其他元素必须在有width属性时才有作用。 这里说的居中是水平竖直同时居中,就像下面图中这样,而且我们居中的时元素而不是内容。(以下所有方法的结果和 ...
分类:
Web程序 时间:
2020-06-01 00:58:07
阅读次数:
73
简介 CSS网格布局(又称“网格”),是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和inline-block(行内块)布局,但是这些方法本质上是hack,遗漏了很多功能,例如垂直居中。后来 ...
分类:
Web程序 时间:
2020-05-31 12:41:28
阅读次数:
95
css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。 HTML组件中呈现一片空白区域的组件都可当盒模型(box modal),而CSS则提供了display属性来控制盒模型的外观。 1. block类型(块) ...
分类:
Web程序 时间:
2020-05-31 11:16:48
阅读次数:
70
在flex出现之前我们做页面都是使用的左右浮动,inline-block,表格等布局方式来实现页面的各种布局,在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。','2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已... ...
分类:
Web程序 时间:
2020-05-31 10:49:47
阅读次数:
83