时间: 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属性
关键词：