【CSS彻底研究(2)】的更多相关文章

CSS深入研究:display的恐怖故事解密(2) - table-cell

上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用属性外,其他的都是传说哥.既然是传说哥,请不要迷恋.就让传说继续传说着吧.这次我们来搞定table-cell这个货.(table-cell:IE6.7不支持) table-cell这个家伙在国外的网站中偶有露头,天朝由于IE6.7这两个货泛滥成灾,难有发挥,那么,这个家伙到底能干些什么呢?先让我们来研究下ta…

CSS深入研究:display的恐怖故事解密(2) - table-cell(转)

http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用属性外,其他的都是传说哥.既然是传说哥,请不要迷恋.就让传说继续传说着吧.这次我们来搞定table-cell这个货.(table-cell:IE6.7不支持) table-ce…

CSS彻底研究(3) - 浮动,定位

Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则 准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

css定位研究

css的定位是很重要的一个知识点,要学会网页布局,一定要先把定位弄清楚,今天抽空整理一下这方面的知识. 1.块级元素和行内元素(内联元素) 块级元素:display值为block的元素就是块级元素,比如div,h,p,table,块级元素会占据一定的矩形空间,通过设置width,height,padding,margin等来调整这个矩形框(也就是盒模型)的大小. 行内元素(内联元素):display的值为inline的元素为内联元素,这些元素本身不占据矩形空间,必须依附于块级元素而存在,所以给他…

CSS导航的魔力——源自温谦老师《CSS彻底研究设计》

web标准出台以后,非常注重的一个标准就是希望内容与样式分离.希望HTML就干HTML该干的事.但是有的时候我们为了美观必须多多少少改动HTML 代码.下面介绍几个导航栏.                   1.折角试导航栏(这个导航栏的特点是,没有使用任何背景图片,却在导航文字前面加了一个小小的三角形.原理是利用边框的构成,隐藏DIV的其余三边,只留下左边框.)                   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

CSS彻底研究(2)

Github pages 博文 一 . CSS盒模型 1.盒子的结构 margin-border-padding结构 + 内容content 组成盒模型 注意 width,height 取的是content区域的宽高,不包括padding border margin,但是盒子实际所占高度要算上外面三个(padding border margin) 赋值顺序,顺时针,上(top)->右(right)->下(bottom)->左(left) ----top(1)----->| | |…

CSS彻底研究(1)

Github pages 博文 基本选择器 标记选择器h1 {...} 类别.class_name{...},两个class同时作用,如class = 'one two',冲突取前者 ID选择器 #id{...} 复合选择器:两个或多个选择器,通过不同的方式连接 交集 h3.class_name { ... } 其中第一个必须是标记选择器,第二个必须是(类别选择器)or(ID选择器),中间没有空格,必须连续书写 并集选择器a_selector , b_selector 也就是多个选择器 后代选择…

CSS currentColor研究

刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变量currentColor,兼容良好.功能强大,接下来我们来一探究竟. 简介 CSS里已经有一个长期存在的兼容性良好的变量currentColor,表示对当前元素颜色的引用,可以应用在当前元素的其他属性和后代元素上. h1 { color: hsl(0,0%,44%); padding: 1rem; /* 这…

对浏览器如何计算CSS的研究---------------引用

1. 加载CSS 在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接: 上面的rel指明了它是一个样式文件.这个加载是异步,不会影响DOM树的构建,只是说在CSS没处理好之前,构建好的DOM并不会显示出来.用以下的html和css做试验: demo.css如下: 从打印的log可以看出(添加打印的源码略): 在CSS没有加载好之前,DOM树已经构建好了.为什么DOM构建好了不把html放出来,因为没有样式的html直接放出来,给人看…

响应式疑惑？ CSS单位研究

各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率    响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分辨率 -  浏览器的侧边框哦! 同样,网页的宽度是电脑的分辨率 - 浏览器上下边框哦! 3.手机分辨率: 我的手机:1280x780 iphone :1920*1080(FHD)   擦,好多手机都是这个了,那网页在这上面显示不是很小的吗? FHD:Full High Definition 标清:1…