CSS3
文章平均质量分 74
descire
欢迎公众号@漫谈大前端,更多前端干货等你哦!
展开
-
纯CSS实现九宫格
纯css实现九宫格其实实现九宫格的主要难点在于: * 边框的处理方式 * 悬浮单元格重新展现边框的效果第一步让边框重叠我们可以知道九宫格的每一条边框的粗细多是一样的,这里大家要先了解box-sizing中的两种盒子模型,border-box和content-box: * border-box: width = border + padding + contentWidth原创 2016-10-19 09:59:06 · 2040 阅读 · 0 评论 -
愿只有一个Grid Layout
CSS3新增布局三剑客之Grid Layout一、前言 相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里并不是说Grid Layout可以取代二者。 另外Grid Layout与当前非常火热的Flexible Box Layout有一个本质上的区别就是维度不一样。在使用Flexible Box ...原创 2018-09-30 01:09:57 · 127 阅读 · 0 评论 -
CSS并不简单:多栏布局(Multi-Columns Layout)
多栏布局是CSS3新增布局中的一种,尽管它很低调。一、明确结构 多栏布局的结构很简单,主要由multi-column container和column box组成。 当一个元素设置了column-width和column-count属性并且值不为auto,那么这个元素就是multi-column container。 multi-column container内部通过多个col...原创 2018-09-20 00:39:31 · 2582 阅读 · 0 评论 -
CSS 并不简单 -- 文字修饰的那点事
这篇主要介绍一些文字修饰的相关技巧。这里主要从text-decoration和text-shadow这两个属性聊起一、text-decoration 相信大家对于text-decoration这个属性并不陌生,在重置a标签的默认样式时,我们经常要这样写:text-decoration: none;可能对它了解的人也很少,实际上text-decoration是一个复合属性,由line、style和原创 2017-06-03 18:27:48 · 380 阅读 · 0 评论 -
CSS并不简单--带你认识不一样的margin
这一节主要介绍margin的用法和常见问题的分析。一、简介 margin我们一般习惯的叫它外边距,分别可以设置四个方向的外边距,这里不再赘述赋值语法。 实际上,我们通常设置的margin是物理级别的设置,而margin还有start、end、before、after等,这些主要是逻辑级别的设置,如果你感兴趣的话,自行Google吧。 在设置margin时,我们必须要知道:对于块级元素,ma原创 2017-06-01 21:17:12 · 292 阅读 · 0 评论 -
CSS并不简单--走进border、box-shadow和outline
这篇文章主要介绍标题中三个属性独特的一面。不独特你打我):一、border 其实对于border,想必大家已经了解很多了。所以我就不啰嗦太多的基本东西。 第一点我们要知道border的真实面貌: width: 0; height: 0; border: 30px solid transparent; border-top-color: rgb(222,11,22)原创 2017-05-19 12:35:12 · 3693 阅读 · 0 评论 -
CSS并不简单--z-index引发的思考
今天话题是由z-index的偶然失效,引发的一系列问题。一、序从定义上看z-index真的是个很简单的属性,就是描述元素的层叠顺序,但是有时间我们会发现z-index并不会起作用。这时候我们就需要好好的理解一下z-index背后的问题。二、抛开position和z-index我们多知道position的默认值为static,z-index的默认值为auto。当我们抛开position和z-inde原创 2017-05-25 14:23:25 · 370 阅读 · 0 评论 -
CSS并不简单--个性化输入框的实践
这次通过这个个性化的输入框,给大家介绍一些容易忽略的知识点。(新手注意:本文的html采用的是jade,css采用的sass,js采用的vue)一、效果 大家先看一下效果动态图,思考一波,带着你的思考来看接下来的内容,可能效果更好一点。二、需求 当我们开始做一样东西的时候一定要先分析它的需求: * 当输入框获取焦点时,提示文字发生上移动画,同时下面线条产生动画; * 当输入框失去焦点时,并原创 2017-05-05 17:47:23 · 1593 阅读 · 0 评论 -
CSS并不简单--带你认识不一样的渐变
这篇文章主要分享CSS3中linear-gradient和radial-gradient的知识,带给大家使用渐变的另一个角度。一、线性渐变这里需要大家先去看一下基本语法,再看接下来的例子。 linear-gradient(90deg,red 20%,blue 50%,yellow 80%);很显然通过这张图,你会大概的明白设置这些参数的作用。虽然我并没有用什么文字去解释它。(所以当你看不明白原创 2017-05-12 19:56:43 · 1277 阅读 · 0 评论 -
CSS3不得不说的分栏
CSS3分栏基本属性 ------------- columns ------------- columns: column-width column-count; column-width: 分栏的宽度 columns-count: 分栏的个数 -------------- column-gap -------------原创 2016-10-20 18:22:05 · 559 阅读 · 0 评论 -
CSS3不得不说的盒模型
CSS盒模型CSS1中的相关属性1、margin-top: 上边距2、margin-bottom: 下边距3、margin-left: 左边距4、margin-right: 右边距5、margin(复合属性): 上 右 下 左 | 上下 左右6、border-top: 上边框7、border-bottom: 下边框8、border-left: 左边框9、border-right: 右原创 2016-10-20 18:20:46 · 233 阅读 · 0 评论 -
CSS3不得不说的文本修饰
CSS文本修饰CSS1中的相关属性1、font-family: 字体类型2、font-style: normal | italic(斜体) | oblique(倾斜)3、font-variant: normal | small-caps(小型的大写字母)4、font-weight: 100~900 | normal(400) | bold(700) | lighter | bolder5、f原创 2016-10-19 20:11:53 · 517 阅读 · 0 评论 -
CSS3不得不说的选择器
CSS选择器CSS1中的选择器1、类型选择器 E2、ID选择器 #id3、类选择器 .class4、包含选择器 E F5、伪类选择器 :link6、伪类选择器 :visited7、伪类选择器 :active8、伪类选择器 :hover9、伪类选择器 :focus10、伪元素选择器 ::first-line元素的第一行文本11、伪元素选择器原创 2016-10-19 20:11:14 · 206 阅读 · 0 评论 -
每天一道前端面试题--dataList与自定义dataList
今天主要分享 —- HTML5新控件datalist以及模仿天猫搜索框HTML新控件datalist的实际应用 <div class="demo"> <input class="goods" type="text" name="team" value="" list=&q原创 2016-10-19 10:04:40 · 5763 阅读 · 1 评论 -
前端小贴士 -- 元素水平垂直居中方案总结
前端元素水平垂直居中常用方案总结,不了解一下?原创 2019-03-10 20:29:25 · 165 阅读 · 0 评论