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