随笔分类 -  css

摘要:语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其 阅读全文
posted @ 2016-10-13 13:43 窗棂 编辑
摘要:一、不起眼的字母’x’ 首先,我们这里的字母'x'就是26个英文字母a,b,c,...中的x. 由于自身形态的一些特殊性,因此,这个小小的不起眼的字母担当大任,在CSS世界中扮演了一个重要的角色。 有人可能的第一反应是:“我知道,可以模拟关闭按钮的那个叉叉效果!” 这位同学思维很活跃,但是呢,本文所 阅读全文
posted @ 2016-07-11 21:57 窗棂 编辑
摘要:一、关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣;今天又是国际护士节,看到微博上护士照横流,我很欣慰。 一段放松的YY后,进入正题。上个月21号,有位同行留言想让我讲讲vertical-align属性,我其实对vertical-align属性也是略知皮毛,要说 阅读全文
posted @ 2016-07-11 10:58 窗棂 编辑
摘要:7.4.1 语 法 vertical-align属性的具体定义列表如下: 语法: vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | in 阅读全文
posted @ 2016-07-10 12:51 窗棂 编辑
摘要:行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响。 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: 阅读全文
posted @ 2016-07-10 12:45 窗棂 编辑
摘要:到底这个line-height行高怎么就产生了高度呢: 在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着 阅读全文
posted @ 2016-07-09 08:35 窗棂 编辑
摘要:一、想死你们了 几个星期没有写文章了,好忙好痒;个把月没有写长篇了,好忙好想;半个季度没在文章中唠嗑了,好痒好想。 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上。 刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展 阅读全文
posted @ 2016-07-08 12:55 窗棂 编辑
摘要:一、写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一 阅读全文
posted @ 2016-07-08 09:22 窗棂 编辑
摘要:一、哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”)。这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理。实际上,这玩意确实有点复杂。 然而,这却是屌丝 阅读全文
posted @ 2016-07-08 09:16 窗棂 编辑
摘要:一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打算深究CSS3的一些属性的,但是其效果以及实际应用价值之诱惑实在巨大,还是抵挡不住,折 阅读全文
posted @ 2016-07-08 09:08 窗棂 编辑
摘要:根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 实例: 分析: flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 本例中c显式的定义了flex-shrink,a,b没有显式定义,但将根据默认值1来计算,可以看到总共将剩余空 阅读全文
posted @ 2016-07-07 23:56 窗棂 编辑
摘要:根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 实例: 解析: flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。 本例中b,c两项都显式的定义了flex-grow,flex容器的剩余空间分成了4份,其中b占1份,c占3分,即1:3 flex容器的剩余空间 阅读全文
posted @ 2016-07-07 23:50 窗棂 编辑
摘要:设置或检索弹性盒伸缩基准值: 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间 计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时,浏览器会自动缩小它们 实例: <!DOCTYPE html> < 阅读全文
posted @ 2016-07-07 23:38 窗棂 编辑
摘要:说明: 本属性适用于:flex容器 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式 实例: 阅读全文
posted @ 2016-07-07 21:52 窗棂 编辑
摘要:说明: 本属性适用于:多行的弹性盒模型容器 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果 实例: 阅读全文
posted @ 2016-07-07 21:49 窗棂 编辑
摘要:align-items align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式,还有一位回答者的回答也很好,如下: align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中 alig 阅读全文
posted @ 2016-07-07 21:42 窗棂 编辑
摘要:讲解: 设置或检索弹性盒模型对象的子元素的所属组。动态给数值较大的组分配其内容所需的实际空间(如无内容、padding、border则不占空间),剩余空间则均分给数值最小的那个组(可能有1个或多个元素)实例: 阅读全文
posted @ 2016-07-07 19:05 窗棂 编辑
摘要:Insert you title 我是王小二 我是王小二的大儿子 我是王小二的二儿子 我是王小二的二儿子的大孙子 我是王小二的二儿子... 阅读全文
posted @ 2016-07-07 11:46 窗棂 编辑
摘要:Insert you title 部门: 市场部: 张三 李四 ... 阅读全文
posted @ 2016-07-07 11:45 窗棂 编辑

点击右上角即可分享
微信分享提示