学习bootstrap之前 总结下前面的学习,和自己的心得体会

HTML：页面内容，内容的结构。语义化标签：不同的标签代表不同内容的意义，不要为了实现某个样式而选择无意义标签，比如为了字体大选择H1-H6

HTML 应当掌握不同内容所对应的标签。

div与span 盒子与行内是主要应用的无意义标签。主要用来构建页面的内容结构。主要掌握盒子模型和块级与行内属性

1.1盒子模型 border-box：元素宽高=width/height or 内容宽高 content-box 宽高=border+margin+padding+width/height

1.2inline属性：line-height就是内容的高度，内容的宽度就是自己本身

2.1 块级元素，独占一行，宽度默认为父元素宽度，高度默认为内容高度，可以设置宽高 

2.2 行内元素，不占一行，宽度默认为内容宽度，高度默认为内容高度，不能设置宽高 重要属性  

CSS: 布局与样式。1.CSS首先要根据页面的内容结构，给页面设计总体布局 2.根据页面内容结构，由外至内为内容布局 3.设计不同内容的样式

1.1整体布局：标准流：由上至下垂直布局。浮动流：元素在当前标准流所在行的位置脱离标准流浮动至当前标准流的左或右。定位流：绝对定位：脱离标准流以祖先级元素（最高至body）定位布局，相对定位：元素根据所在标准流位置定位。flex流：父元素的所有子元素根据流体布局定位（非常方便）

1.2细节布局：每个元素的margin/padding属性制造元素间相对位置的不同，同级用margin，嵌套用padding；每个元素垂直水平居中问题（父元素定高/不定高，元素display属性有不同方法，flex：非常方便）。浮动元素/绝对定位流元素，与其他元素的位置设置和居中问题是难点

1.3自适应：1.设置meta viewport 让元素宽高根据屏幕尺寸设置 2.宽：width/max-width设置为父元素%值，一般不要设置固定尺寸（大）3.高一般为内容高度，一般不设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.@media only screen and (max-width/min-width: )  为不同尺寸的屏幕，设置不同的css样式。屏幕尺寸的缩小会对具有文字内容的元素的高产生影响，所以要从最小尺寸的屏幕设置布局

4.使用col为页面布局，非常方便的不同尺寸屏幕的水平布局。

2.1样式 样式细节不同页面不同要求，主要是背景background/text-/font-/color./样式要注意继承性

2.2样式 大致看bootstrap，似乎bootstrap 就在其提供的container>row>colomn 布局框架下，提供了多种标签的样式和组件 非常方便的给我们这样的初学者使用，让我们不用花费过多时间在设计细节样式上。

近日目标：用bootstrap改写已初步完成的task6