html 超文本标记语言（他就是搭网页这个架子的）
标签：
块标签：div、 p、 ul、 ol、 li、 h1-h6、 dl、 dd、 dt、 form 特性：独占一行，可以设置宽高 margin 上下左右都可以。
行内标签：span、 i、 b、 em、 strong、 a 特性：共处一行，设置高无效 margin 只能左右。
行内快标签：input、 img 特性：共处一行，可以设置宽高 margin 上下左右都可以。
怎么互相转换：转换成快-display:block; 行内-display：inline; 行内块-display:inline-block;
标签的嵌套规则：块标签 - 能包块，行内，行内快（ p 只能包行内，行内块） 行内元素 - 只能包行内元素，行内快（ a 不能包 a ）
表单三要素
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 层叠样式表（装饰这个架子）
单位：
px
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写一下
网友评论