css中display属性

来源:http://www.chinese-glasses.com 作者:Web前端 人气:116 发布时间:2020-04-22
摘要:时间: 2019-09-20阅读: 456标签:属性display属性共有4个值:blcok:块级元素inline-block:行内块级元素inline:行内元素none:隐藏元素,不占据空间1.块级元素 常见的块级元素有div,p,ul,ol,li,h1~h

时间: 2019-09-20阅读: 456标签: 属性display属性共有4个值:blcok:块级元素inline-block:行内块级元素inline:行内元素none:隐藏元素,不占据空间1.块级元素


常见的块级元素有div,p,ul,ol,li,h1~h6等块级元素会默认占满父元素的宽度且独占一行

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


div p尽可能的占满父元素的宽度/p/div

标签:

块标签: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 )


2.行内元素

表单三要素

1.action 要提交的地址

2.name 数据

3.method 提交方式: get、post

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

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


常见的行内元素有span,img,a,input,button,textarea、select等,他的宽度完全由内容撑开,不能为其设置宽高。除非父元素一行放满了,行内元素不然不会换行行内元素受父元素的text-align的影响,父元素设置text-align:center,行内元素会居中显示行内元素受父元素的white-space的影响,父元素设置white-space:nowrap,行内元素将不会换行

表格 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;}


3.行内块级元素

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 重叠


本文由10bet发布于Web前端,转载请注明出处:css中display属性

关键词:

最火资讯