css布局随笔

字数 515阅读 18

学习地址:http://zh.learnlayout.com/display.html

1,把display设置成none元素不会占据它本来应该显示的空间,但是设置成visibility: hidden;还会占据空间。

2,把li元素修改成 inline,可以制作成水平菜单。

3,盒模型。当你设置了元素的宽度,实际展现的元素却超出你的设置:这是因为元素的边框和内边距会撑开元素。当你设置一个元素为box-sizing: border-box;时,此元素的内边距和边框不再会增加它的宽度。不过box-sizing是个很新的属性,目前你还应该使用-webkit(苹果浏览器)-和-moz-(火狐浏览器)前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

4,在使用浮动的时候经常会遇到一个古怪的事情:图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!有一种比较丑陋的方法可以解决这个问题,它叫做清除浮动overflow:auto;    如果你想要支持IE6,你就需要再加入如下样式:overflow:auto; zoom:1;


学习地址:http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html

CSS3 Media Queries

1,直接在link中判断设备的尺寸,然后引用不同的css文件。

<link rel="stylesheet" type=''text/css'' href=''styleB.css'' media=''screen and (min-width:600px) and (max-width:800px)''>,意思就是当屏幕的宽度大于600小于800的时候应用styleB.css样式文件

2,另一种方式是直接写在style标签里:

<style>@media screen and (max-width:600px){.class{blackground:#ccc}}</style>,意思就是当屏幕小于600时应用.class{blackground:#ccc}。

在media属性里:

screen是媒体类型里的一种,CSS2.1定义了10种媒体类型

and被称为关键字,其他关键字还包括not(排除某种设备),only(限定某种设备);



推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
  • 今天天气有点闷,心情随之有点烦躁,也许是不合时宜地穿了条紧身长裤,感觉整个人有种装在壳子里的感觉。上海开始进入梅雨...