Benjamin - 专注前端开发和用户体验

 分类:深入CSS属性系列

Flexbox#1:基本属性的使用

Flexbox是一个CSS布局系统,使用它可以很容易的实现动态布局。使用flexbox,平常开发中遇到的垂直居中布局,等高布局,重排,方向不可知等布局都是小菜一碟。 可能你会说现在还不是使用flexbox的最佳时间,但是据统计93%的人都在运行支持flexbox的浏览器,它比对HTML5 元素的支持...

Benjamin 2年前 (2015-06-18) 3239℃ 0评论 0 喜欢

深入CSS属性(七):z-index

如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入的了解z-index是如何工作的,使用z-index的时候有哪些问题,以及z-index在日常开发中...

Benjamin 3年前 (2014-10-21) 3376℃ 2评论 2 喜欢

深入CSS属性(六):margin

一、属性介绍 margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。 可取值: auto 浏览器计算外边距。 length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比计算的外边距。 inherit 规定应该从父元素继承外边距。 二...

Benjamin 3年前 (2014-03-02) 3479℃ 0评论 2 喜欢

深入CSS属性(五):min-width

一、基本含义 min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。min-width 的值会同时覆盖 max-width 和 width。 二、可取值 常用百分比、固定px|em|ex等,其他属性值如max-content,min-co...

Benjamin 3年前 (2014-03-02) 1992℃ 0评论 0 喜欢

深入CSS属性(四):vertical-align

一、前言 vertical-align对于初学者最常见的使用是在表格中了,尤其是使用dreamweaver的童学,常见的数top,middle,bottom了,其他的应该很少用到,但是vertical-align的属性之多,所以情况也略显复杂,下面先来看看百度及Google常见问题: 1.verti...

Benjamin 3年前 (2014-03-01) 2641℃ 0评论 0 喜欢

深入CSS属性(三):line-height

一、line-height的定义 line-height(行高),相邻文本行基线间的距离。那什么是基线呢?对于文字“Benjamin-xx工程师”,来说基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 二、line-height理解 有的时候我们会遇到,不给盒子设置宽度...

Benjamin 3年前 (2014-03-01) 4401℃ 0评论 5 喜欢

深入CSS属性(二):overflow及相关属性text-overflow

一、overflow 指定盒中容纳不下的内容的显示方法。 1.适用范围:块级元素 2.可取值: visible:不剪切内容(默认)。 hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。 scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。 auto: 在需要时...

Benjamin 3年前 (2014-02-26) 2192℃ 0评论 4 喜欢

深入CSS属性(一):word-break与word-wrap

一、浏览器自带的自动换行 各浏览器自身都带有自动换行功能,当浏览器显示文本的时候会让文本在浏览器或者div元素的右端自动换行。换行情况如下: 1.non-CJK:会在半角空格或者连字符(-)位置自动换行,不会在长单词的中间换行 2.CJK(中日韩):可以在任何一个CJK字体后换行 3.CJK中包含n...

Benjamin 3年前 (2014-02-25) 3298℃ 0评论 1 喜欢