css精确控制表格列宽

table-layout: 默认值为 auto,即自动表格布局算法,列宽会根据其内容进行调整,即使我们显式指定了 width,也只是起到类似提示的作用。

将其设为 fixed,要明显可控一些。设置的宽会直接起作用,溢出行为 text-overflow 也表现正常。

使用时需要为表格元素指定一个宽度(哪怕是100%)。

table {
    table-layout: fixed;
    width:100%;
}

要让 text-overflow:ellipsis 发挥效用。还需要为那一列指定宽度。

demo地址:
http://dabblet.com/gist/7979af102a991cecfcdf

移动设备上的viewport

像素是网页布局的基础。一个像素就是计算机屏幕能显示一种特定颜色的最小区域。

有两种像素:
设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。
css像素:为web开发者创造的,在css和javascript中使用的一个抽象的层。

css像素相当于多少个设备像素取决于屏幕的特性(是否是高密度)和用户的缩放。
用户放大得越大,一个css像素覆盖的设计像素就越多。
如果用户缩小到足够的程度,一个css像素会变得明显比一个设备像素小。

ppk把移动设备上的viewport分为:

layout viewport 布局视口
visual viewport 视觉视口
ideal viewport 理想视口

其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport。
在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。


要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。
缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport吗?


也可以把当前的的viewport变为 ideal viewport。

要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:


配套网站:
http://www.quirksmode.org/blog/archives/the_mobile_web_handbook/

常用媒体查询 ( css media ) 条件

通过媒体查询为不同的设备和大小配置不同的样式。

@media 媒体类型 and (媒体特性){你的样式}

注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。
媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。
与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断。

1、最大宽度max-width

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

2、最小宽度min-width

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

3、多个媒体特性使用,使用关键词”and”将多个媒体特性结合在一起,每个条件包含在圆括号中。例:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4、设备屏幕的输出宽度Device Width

5、not关键词,表示对后面的表达式执行取反操作

6、only关键词,指定某种特定的媒体类型

7、使用逗号(,)被用来表示并列或者表示或

@media screen and (max-width:480px), screen and (min-width:960px){
  body {background-color:#f00;}
}

8、在Media Query中如果没有明确指定Media Type,那么其默认为all

9、非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局。

常用媒体查询 ( css media ) 条件

/* media */
/* 横屏 */
@media screen and (orientation:landscape){
}
/* 竖屏 */
@media screen and (orientation:portrait){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}

参考:
http://nec.netease.com/framework/css-media.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

注:
使用媒体查询的优秀网站:http://mediaqueri.es/

bootstrap-datetimepicker如何只显示到日期

bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢?

minView: “month”, //选择日期后,不会再跳转去选择时分秒

// 日历
$('.form_datetime').datetimepicker({
    minView: "month", //选择日期后,不会再跳转去选择时分秒 
    language:  'zh-CN',
    format: 'yyyy-mm-dd',
    todayBtn:  true,
    autoclose: true
});

读书笔记-css 定位

static是position的默认值
可以使用 position:relative 对元素从排列顺序的当前位置进行偏移
可用position:absolute 对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移
用position:fixed 对元素参照视窗进行偏移

浮动与清除

问题:想把一个元素从正常排列顺序中移除,并令它靠父元素的左侧或右侧显示。想把它当作块状元素来解析,并排列在父元素内边距所包围的区域里。还想让它的顶部基于原始提取位置进行排列。还想控制邻近的其他浮动元素或非浮动内容,或把它们移到自己的下面。

解决方案:
使用float:left和float:right
用float:none覆盖其他元素进行浮动定位的规
浮动元素的定位层位置块状元素之上,与正常排列中的内联内容是相邻的。左浮动是对它的右侧内容缩进,右浮动是对它的左侧内容缩进。
浮动不影响块状盒模型的定位,只影响它们的内联内容。
用clear:left把浮动元素左侧的块状元素或其他浮动元素移到它的下面
用clear:right把浮动元素右侧的块状元素或其他浮动元素移到它的下面
用clear:both把浮动元素两侧的块状元素或其他浮动元素同时移到下面
相对浮动

问题:想在不影响其他元素(包括其他浮动元素和内联内容)定位的前提下,把浮动从现在位置上偏移。你还想控制浮动元素的(浮动元素之间或与其他定位元素之间)堆叠顺序。

解决方案:用position:relative对浮动元素进行相对定位。相对浮动还保留了元素在原始浮动排列顺序中的位置,只是用left和top将它从原来的位置上做一定的偏移。相对浮动也是在定位层被解析的,它允许你用z-index控制它相对于其他浮动元素和定位元素的堆叠顺序。因为相对浮动也是对元素的一种定位方式,所以它的绝对后代可相对于它来进行定位。

读书笔记 - css 盒模型

6种盒模型,盒子的类型有几个属性的组合所决定:display、position、float。

内联 Inline-Box
内联块状 Inline-block Box
块状 Block Box
表格 Table Box
绝对定位 Absolute Box
浮动 Floated Box

overflow 决定元素的内容大于它的内盒时将会发生什么,默认情况下是依然显示溢出的内容。

width:auto 是默认设置,水平包裹内联、内联块状、浮动、表格和绝对定位。
width:auto 水平拉伸块状和绝对定位盒模型(当left和right都设置了一个值,例如0)。

height:auto 是默认设置,包裹内联、内联块状、块状、浮动、表格和绝对定位。
height:auto 竖直拉伸绝对定位盒模型,仅当top和bottom都设置了一个值(例如0)的时候。

height:100% 会把元素的高度设置成与父元素一样,但拥有一些局限,浏览器不会自动调整高度以保持元素的拉伸的状态。元素的垂直外边距、边框或者内边距能够扩展它的高度,甚至超越父元素的高度。

读书笔记 - css 继承

可继承的属性:

被所有属性继承 visibility 和 cursor
内联元素继承
leftter-spacing 属性增加或减少字符间的空白(字符间距)
word-spacing 为单词间添加空格(中文单词不识别,因为中文没有单词的概念)、white-space 设置如何处理元素内的空白
ling-height 、color、font、text-decoration 、
direction 属性规定文本的方向 / 书写方向

终端块状元素继承: text-indent 和 text-align
列表元素继承:list-style
表格元素元素继承:border-collapse 设置表格的边框是否被合并为一个单一的边框

不可继承的元素:
display、 margin、 border、 padding、 background、 height、 width 、overflow、 position、 z-index、 float、 clear 、vertical-align

css语法细节、html元素(读书笔记)

1、css代码应当小写。当引用xhtml中的元素名字、类、属性和ID时,选择符是区分大小写的。css的属性和值则不区分大小写。为了保持简洁和一致性,所有的css代码都使用小写字符,包括元素、类和ID。

2、常量值不用引号。例如:color:black 是正确的,但是 color:”black”是错误的。

3、反斜杠(\)可以在某些不能直接显示字符的地方把它们镶嵌进去。例如:\26B 会在字符串或标识符中镶嵌”&”。

4、分号用于终止css规则和@import语句。

5、规则集是指在大括号中包含了多条规则。

html元素

html结构元素,可以互相嵌套,却不能重叠。核心的有html、head、body

结构化块状元素,拥有结构化的含义,没有语义化的内涵。主要有4种 ol、ul、dl、table

终端块状元素,是文档块状结构的终端节点,不能再包含块状元素,只能包含文本和内联元素。拥有语义上的内涵:标题(h1~h6)、段落(p)、块状引用(blockquote)、定义词汇(dt)、地址(address)和表格标题(caption)这6种。

多目标块状元素,扩展或终止结构,以结构化方式使用时有结构化的内涵,当以终端方式使用时有语义化的内涵。即可以包含块状元素也可以包含内容。有7种,div、li、dd、td、th、form。

内联元素,本身就是内容,用于识别文本的含义、向文档插入额外的内容,例如图片等。切分为四类:语义元素(em、strong)等、排列顺序元素(br)等、可替代元素(img)等、控制元素(input、textarea)等。

 

摘自:精通CSS与HTML设计模式