css
Apress92
这个作者很懒,什么都没留下…
展开
-
什么是CSS包含块(Containing Block)
包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。包含块简单说就是定位参考框,或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。转载 2016-04-29 10:45:12 · 805 阅读 · 0 评论 -
Emmet教程
介绍Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析转载 2016-10-18 17:39:02 · 435 阅读 · 0 评论 -
史上最全的CSS hack方式一览
来自CSDN freshlover的博客专栏《史上最全CSS Hack方式一览》做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器转载 2016-12-26 16:26:08 · 256 阅读 · 0 评论 -
如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间转载 2017-02-07 16:24:59 · 246 阅读 · 0 评论 -
CSS初始化示例
@charset "UTF-8";/*css 初始化 */html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {margin:0;padding:0;}fieldset,img,input,button原创 2017-02-14 09:11:21 · 282 阅读 · 0 评论 -
“位置”在css里的细节
位置是个怎样的概念哎,这个元素怎么跑那里去了?回想一下,在我们觉得“样式崩了”,“页面出bug了”的时候,是不是会有相当一部分情况都可以描述成上面这句话呢?我们在写css的时候,就会经常考虑“位置”这个事。理念就是,所有的页面元素都应该被安排在为它预定的位置上。毕竟按照计划预定的来,才能有条不紊,不容易出错。就像一本杂志的编辑,即便文稿都已准备好,但具体哪篇放在第几转载 2017-02-14 13:57:54 · 246 阅读 · 0 评论 -
CSS3 background介绍
background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各种特性。CSS3之前主要有5个属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionCSS3增加了3个属性:backgrou转载 2017-02-14 14:10:35 · 591 阅读 · 0 评论 -
table 详解
table 这个 HTML 标签,是一个很有传奇色彩的标签。它经历过大起大落,走过巅峰,又被人深深唾弃,但仍然不气不馁,在 EDM网页 、居中、数据展示等需求中发挥着不可替代的作用。很多人认为那就是个用 DW 拖拽出来的结构,太简单了,却无法手写出一个完整符合语义性的表单结构。所以,今天就来好好研究一下这个 table。table 的使用范围学习 table 标签之前,转载 2017-02-15 14:54:10 · 1786 阅读 · 0 评论 -
css中强制换行word-break、word-wrap、white-space区别实例说明
测试用的HTML代码复制代码代码如下:safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafjThis is all English. This is all English. This is all English.全是中文的情况。全是中文的情况。全是中文的情况。中英文混排的情况。Chinese and转载 2017-02-27 11:54:45 · 488 阅读 · 0 评论 -
css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内转载 2016-09-28 15:28:10 · 340 阅读 · 0 评论 -
CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。最近在学习em的相关知识的时候,无意之间让我拾得一转载 2016-09-28 15:20:52 · 231 阅读 · 0 评论 -
移动端(手机)自适应rem布局
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位转载 2016-09-28 14:35:24 · 802 阅读 · 0 评论 -
link和@import的区别
link和@import的区别页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 XML/HTML代码 @import url("CSS文件"); 两者都是外部引用CSS的方式转载 2016-05-04 11:23:30 · 276 阅读 · 0 评论 -
前端学习入门书籍
目前已有的前端书籍,还在学习中。作为一个自学过来的人,谈一谈自己的自学经历。本人文科生,非计算机专业。自学三个月左右,能做大部分前端效果。在这里只谈入门的一些书籍,原创 2016-07-25 10:23:28 · 1565 阅读 · 0 评论 -
web前端开发学习路线
首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整。新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁。初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自转载 2016-08-09 16:34:18 · 421 阅读 · 0 评论 -
block,inline和inline-block概念和区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。大体来说HTML元素各有其自身的布局级别(block元素还是inlin转载 2016-08-31 10:53:54 · 179 阅读 · 0 评论 -
CSS查漏补缺
块级格式上下文(Block formatting context)普通流(Normal Flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (转载 2016-08-24 08:43:20 · 208 阅读 · 0 评论 -
引入CSS的方式有哪些?link和@import的有何区别应如何选择
有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?CSS用import还是link好?本文搜集整理了一下,感兴趣的朋友可以看看哦,希望本人对你有所帮助看到淘宝网页中这样写使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?CSS用import还是link好?从经典论转载 2016-09-22 20:06:31 · 292 阅读 · 0 评论 -
inline-block的间距问题
有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”转载 2016-09-07 19:41:25 · 476 阅读 · 0 评论 -
布局神器display:table-cell
转载自:http://www.520ued.com/article/table-cell 随着时间的推进,ie6、ie7在中国浏览器市场的占有率越来越低的情况,我现在工作的团队,经过用户访问数据,得知ie6、ie7的用户已经非常少的前提下,决定不在兼容ie6、ie7。正式在这个激动人心的决定后,让我对display:table-cell;这个属性有了更加深入的应用和理解。在ie转载 2016-10-24 17:07:00 · 259 阅读 · 0 评论 -
候选样式表
1.html文件html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=原创 2017-03-29 15:59:43 · 646 阅读 · 0 评论