HTML CSS 基础知识

2017-06-01  本文已影响0人  七小木_74ba


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写一下

上一篇下一篇

猜你喜欢

热点阅读