-
CSS中的砌体布局
前端布局中的Flex、Grid和更古老的浮动布局，在处理不规则高度的元素时存在一定的复杂，需要用到大量的@meida，javascript来解决细节问题砌体布局一种类似砖块堆砌的通过CSS实现的布局方式，自由排列不同高度的元素，使得页面布局更加灵活且符合实际内容的特点砌体布局通过CSS的column-*属性来实现columns简写属性，设置元素的列宽和列数也可以单独设置每个属性 column-count 将一个元素的内容分成指定数量的列 默认值auto，可设置为具体的正整数 column-width 设置每一列的最小列宽，如果容器的宽度小于该值那么单列的宽度比会声...
2020-10-14 -
CSS中的grid网格布局
Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局既可以设置容器为块元素(display:grid)，也可以设置容器为行内元素(display:inline-grid)设为网格布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效设置容器网...
2020-10-14 -
CSS中的flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局它即可以设置容器为块元素(display:flex)，也可以设置容器为行内元素(display:inline-flex)设为Flex布局以后，子元素的float、clear和vertical-align属性将失效目前，它已经得到了所有浏览器的支持。定义容器的六个属性flex-direction：容器内元素的排列方向(默认row)row，沿水平主轴从左向右排列 row-reverse，沿水平主轴从右向左排列 column，沿垂直主轴从...
2020-10-13 -
CSS中的变量
CSS中的变量一、变量的声明声明变量的时候，变量名前面要加两根连词线(--)。body { --foo: #7F583F; --bar: #F7EFD2; } body选择器里面声明了两个变量：--foo和--bar。 为什么选择两根连词线(--)表示变量呢，因为$foo被Sass用掉了，@foo被Less用掉了。为了不产生冲突，官方的CSS变量就改用两根连词线了变量名大小写敏感，--header-color和--Header-Color是两个不同变量二、var()函数用于读取变量。a { text-decoration-color: var(--bar); ...
2019-07-15 -
自适应网页和响应式图像
自适应网页手机的屏幕比较小，宽度通常在600像素以下，PC的屏幕宽度，一般都在1000像素以上同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果。很多网站的解决方法，是为不同的设备提供不同的网页，这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本。"自适应网页设计"的概念2010年，Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计允许网页宽度自动调整在网页代码的头部，加入一行viewport元标签设置页面缩放比例<meta name="viewport&qu...
2019-07-15