![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
liuhua_2323
星空不问赶路人,时光不负有心人
展开
-
清除浮动的几种方式
原本七天的假期,就想着不用带电脑,在老家带一点吃的过来,谁曾想到由于疫情的影响,在老家呆了足足二十多天。我承认手痒了想写代码了,由于最近打算换个工作,就找了一些面试题来刷一刷,希望下一份工作能够满意。好了,话不多说,开始今天的内容。我们都知道,如果不给外层div设置高度,那么它的高度会被里面的内容撑开,我们经常会遇到这样一种情况,div里面的元素是浮动的,那么,情况就会变得如下:<...原创 2020-02-23 18:39:19 · 94 阅读 · 0 评论 -
SVG制作图标字体
前言:小伙伴们是不是经常看到如下代码,然后就是一头雾水,这到底是个啥呀,今天我们就一起来研究一下这个问题。@font-face { font-family: 'sell-icon'; src: url('../fonts/sell-icon.eot?ze40eg'); src: url('../fonts/sell-icon.eot?ze40eg#iefix') form...原创 2020-01-22 16:40:41 · 1930 阅读 · 0 评论 -
stricky footer
stricky footer设计是最古老和最常见的效果之一,我们都曾经历过类似的情景:如果页面内容不够长的时候,页脚块粘贴在底部;如果内容足够长时,页脚块会被内容向下推送。最近做demo的时候跟着大佬认识了stricky footer,下来查阅了相关资料,在此记录一下: ...原创 2020-01-22 10:34:51 · 193 阅读 · 0 评论 -
你不知道的css(一)
CSS 的顶层样式表由两种规则组成的规则列表构成,一种被称为 at-rule,也就是 at 规则,另一种是 qualified rule,也就是普通规则。at 规则@charset:用于提示 CSS 文件使用的字符编码方式,它如果被使用,必须出现在最前面。这个规则只在给出语法解析阶段前使用,并不影响页面上的展示效果。@charset "utf-8";@import :用于引入一个 ...原创 2019-11-20 11:28:12 · 178 阅读 · 0 评论 -
box-sizing
box-sizing是css3的新属性,关于这个属性,官方的解释是 :“box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。” 这个解释对于新使用box-sizing 的人或许不是很好理解。要理解这个属性,还得从css的盒子模型说起。说到css的盒子模型,大家都不会陌生。首先,盒子模型本身有两种模式:标准模式和怪异模式。关于标准模式和怪异模式的解释,在这里不多述说了。下面我...原创 2019-11-07 17:06:21 · 126 阅读 · 0 评论 -
Flex布局详解
布局的传统解决方案,是基于盒模型的,通过display+position+float实现。但是对于一些特殊的布局非常不方便。2009年,W3C提出了一种新的方案,Flex布局,可以简便,完整,响应式的实现各种页面的布局。目前浏览器的支持情况大概如下:Chrome 21+Opera 12.1+Firefox 22+Safari 6.1+...原创 2019-09-25 20:20:15 · 516 阅读 · 0 评论 -
columns多列布局常用属性
columns是css3的属性,用于多列布局,按照列来布局,如下图所示(随手画的,比较丑陋,意思到位就行了)下面先来看一下浏览器的支持情况,再来研究其用法和属性Internet Explorer 10 和 Opera 支持 column 属性。Firefox 支持替代的 -moz-column 属性。Safari 和 Chrome 支持替代的 -webkit-column 属性...原创 2019-10-14 22:02:38 · 2418 阅读 · 0 评论