HTML CSS 基础知识

html 超文本标记语言（他就是搭网页这个架子的）

表单三要素

1.action 要提交的地址

2.name 数据

3.method 提交方式： get、post

GET：1-get数据是在地址栏里传输的 2-不安全 3-大小32k左右 （优点:可以收藏，易于分享）

POST: 1-不是地址栏传输 2-相对安全 3-大小 1G

表格 table

table / thead / tbody / tfoot / tr / th / td ( table最好都写上，浏览器给你补上，不如咱们自己写 )

th / td 如果要合并单元格合并列-colspan="xx" 合并行-rowspan="xx"

table{border-collapse:collapse; border-spacing:0} 如果要给tr加边框 table 上必须有前面两个属性。

表格内文字属性：中文字符默认会换行、英文字符默认不会换行

如果要自适应表格内的字符换行或超出范围用...显示 table class="table_fixed" 对应的th/td class="ell(出现...) bk(英文字符默认换行)"

.table_fixed{table-layout:fixed;} .ell{white-space:nowrap; text-overflow: ellipsis; overflow:hidden;} .bk{word-break:break-all;}

BFC

1.BFC定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

* BFC的区域不会与float box重叠。

* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

* 计算BFC的高度时，浮动元素也参与计算

3.哪些元素会生成BFC

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

4.BFC的作用：

* 自适应两栏布局（要间距可以在浮动元素上加margin-right 或在自适应栏内加padding-left）

* 清除内部浮动（丢失高度）

防止垂直 margin 重叠

CSS 层叠样式表（装饰这个架子）

单位：

em-相对于父级大小，如果设置height,line-height相对于自己的字体大小

%-相对于父级

rem-相对于根（html）字体 root

盒子模型

盒子模型大小：内容 + border + padding + margin(调整位置)

浮动 float

特点：1.半脱离文档流、 2.没有改变元素类型、 3.如果宽度不够，会掉下来

为什么要浮动：让元素到一行

清楚浮动（解决父级高度塌陷）：

1 overflow : hidden (给父级加，父级下的直接子级的浮动被清除掉)

2 clear (同级加一个空白块标签——clear：both)

3 .clearfix (父级加)

.clearfix:after{content:""; display:block; clear:both; height:0; visibility:hidden;}

.clearfix{zoom:1}

4 父容器形成 BFC

定位

1.相对定位：相对自己、*不脱离文档流、不改变元素的类型

2.绝对定位：相对于定位父级（如果都没有就body）、*脱离文档流、改变元素类型、*必须设置宽高、必须top和left写一下

3.固定定位：相对于可视去（浏览器）、 *脱离文档流、改变元素类型、*必须设置宽高、必须top和left写一下

最后编辑于：2017.11.23 17:04:54