web开发
html
CSS
general
key=value语法:规定了如value书写时的符号等应用 CSS: Value definition syntax 关于代码规范,参见[译]《编写整洁 CSS 代码的黄金法则》英文原文地址“Golden Guidelines for Writing Clean CSS”归纳如下:
- 避免使用全局选择器和元素选择器
- 避免使用权重(specific)过高的选择器
- 使用语义化类名
- 避免 CSS 和标签结构的紧耦合
Visual formatting mode
css视觉化处理的基本概念,用于绘制元素box容器的算法,取决于:
- box的尺寸
- box的类型:inline/inline-level/atomic inline-level/block
- 其他元素:兄弟元素和子元素
- 设备属性:浏览器窗口大小等
- 图片本身的尺寸
- 其他外部因素
当box的布局超出了其所在的块区域,则为溢出(overflow)。
***box generation:***box的类型由
display
属性定义block-level元素:当
display
属性值为block
、list-item
、talbe
时,表示为blokc-level元素,各元素之间的堆叠方式为垂直堆叠,其内可以包含其他的block-level元素。Anonymous block boxes:其继承父级元素的属性或者得到初始属性值。
Inline-level elements and inline boxes:
display
属性值为inline
、inline-block
、inline-table
。如段落、图片混排的效果由inline-level元素实现。
其他的box模式:table content model、multi-column model、grid or flex-box content models
定位:
- box生成后开始进行定位,可以分为正常定位(normal flow)、浮动定位(floats)和绝对定位(absolute positioning)
- 正常定位(normal flow):其
position
属性值为static
和relative
,其中static
为normal flow布局确定确切的位置;relative
则由top
、bottom
、left
、right
属性的偏移量确定位置。当box为block格式内容时,其元素在此定位规则内为垂直方向布局;当为inline格式内容,元素布局为水平方向布局。 - 浮动定位(floats):其条件为
float
属性值不为none
,且position
属性值为static
或relative
。其元素靠box边缘逐个布局,例如position: right;
、position: left;
。 - 绝对定位(absolute positioning):通过
left
、right
、bottom
、top
来规定其相对容器的位置,其位置与其他元素无关。position
属性为absolute
或fixed
,其中position
属性值为fixed
时,其位置不受scroll的影响。
layout mode:用于计算box和兄弟box及子box的相对关系来决定其定位的算法
- 包括元素的浮动(float)和多列(mutiple columns)布局等
- inline layout用于文本的设计布局
- table layout用于表格的设计布局
- positioned layout用于与其他元素不太相关的元素的布局定位
- flexible box layout用于复杂页面的设计布局,便于缩放的需求
- grid layout相较于fixed grid而言的布局模式
generic value inherit和auto的区别:
inherit是继承父类的属性,一般用于字体、颜色、背景等,auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性
现在一般常用的属性都支持inherit,用的不多,auto自适应长度用的比较多。如{ margin:0 auto}加上这个属性的元素只要定义了宽度就会相对于他的父元素自居中。
集成属性:
主要有背景(background)、字体(font)、边框(border)、内外边距(padding/margin)