IT开发学习笔记

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)。

1. ***box generation:***box的类型由display属性定义

2. block-level元素：当display属性值为block、list-item、talbe时，表示为blokc-level元素，各元素之间的堆叠方式为垂直堆叠，其内可以包含其他的block-level元素。

3. Anonymous block boxes:其继承父级元素的属性或者得到初始属性值。
   

4. Inline-level elements and inline boxes:display属性值为inline、inline-block、inline-table。如段落、图片混排的效果由inline-level元素实现。
   
   

5. 其他的box模式：table content model、multi-column model、grid or flex-box content models

6. 定位：

   • 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)

选择器

属性

display

position:

javascript

java

swift&IOS

python