1.边框盒模型和box-sizing属性
标准CSS盒模型规定width和height样式属性只包含内容区域,不包括内边距和边框。称作“内容盒模型”。
box-sizing:border-box将会变成边框盒模型,即,height和widht包括内边距和边框。
Chrome和Safari使用-webkit-box-sizing,Firefox使用-moz-box-sizing
2.元素显示和可见性
visibility和display,区别在于visibility设置hidden时候会占用位置,而display不会。
3.颜色、透明度和般透明度
(1)rgba(),alpha设置透明度,0~1。
(2)background-color:transparent 可以覆盖默认颜色,变成透明的。
(3)opacity,设置透明度0~1,CSS3标准属性
(4)filter:alpha(opacitry=75) IE设置透明度,没有小数点
4.部分可见:overflow和clip
visibility属性可以让文档元素完全隐藏,而overflow和clip属性允许只显示元素的一部分。
overflow可选属性
visible 默认值,如果需要,内容可以溢出并绘制在元素的边框外面
hidden 裁减并隐藏溢出的内容
scroll 元素一直显示水平和垂直滚动条
auto 滚动条只有在内容超出元素尺寸时才出现,并非一直显示。
5.text-align只应用于块级元素的内联内容
6.七个水平属性的总和等于父元素的width,只要所有属性都是大于或等于0的,元素就不会大于其父元素的内容区。只有外边距可以为负数。
百分数设置width、内边距和外边距:
假设你希望一个元素的内容时其包含元素宽度的三分之二,左右内边距分别设置为5%,左外边距为5%,剩下的就是右外边距,即18%。
垂直属性:
如果正常流中一个块元素的margin-top或margin-bottom设置为auto、它会自动计算为0,也就是元素框没有外边距。对于定位元素来说,上下外边距设置
auto,其处理会有所不同。七个垂直属性加一起等于父元素的width。
7.合并外边距
8.行内元素:
width,height,内外边距的top/bottom都没法设置
行内元素:
* a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* big – 大字体
* br – 换行
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* label – 表格标签
* s – 中划线(不推荐)
* select – 项目选择
* small – 小字体文本
* span – 常用内联容器,定义文本内区块
* strike – 中划线
* strong – 粗体强调
* sub – 下标
* sup – 上标
* textarea – 多行文本输入框
* tt – 电传文本
* u – 下划线
* var – 定义变量
9.块级元素:
2.块级元素
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级容易,也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
* h2 – 副标题
* h3 – 3级标题
* h4 – 4级标题
* h5 – 5级标题
* h6 – 6级标题
* hr – 水平分隔线
* isindex – input prompt
* menu – 菜单列表
* noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容)
* noscript – )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol – 排序表单
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 非排序列表
10.line-height
可以应用于哪些元素:
line-height只影响行内元素,并不能直接应用于块级元素