CSS元素显示模式（display）

一、什么是元素显示模式在 HTML 中每个元素都有自己的显示方式这种显示方式决定了元素如何排列元素占据空间大小是否可以设置宽度和高度是否会独占一行CSS 中通过display 属性来控制元素的显示模式。语法选择器 { display: 属性值; }例如div { display: inline; }表示让div元素变成行内元素。常见的元素显示模式显示模式英文特点块级元素block独占一行可以设置宽高行内元素inline一行显示不能设置宽高行内块元素inline-block一行显示可以设置宽高二、块级元素block1. 什么是块级元素块级元素最大的特点独占一整行宽度默认占满父元素可以设置宽度和高度。例如div我是div/div p我是段落/p h1我是标题/h1效果---------------- 我是div ---------------- 我是段落 ---------------- 我是标题 ----------------每个元素都会换行。2. 常见块级元素常见的块级元素div/div p/p h1/h1 ul/ul ol/ol li/li form/form table/table3. 块级元素特点1独占一行例如div盒子1/div div盒子2/div显示盒子1 盒子2两个 div 自动换行。2可以设置宽高div { width:300px; height:100px; }有效---------------- | | | div | | | ----------------3可以设置内外边距例如div { margin:20px; padding:30px; }有效。三、行内元素inline1. 什么是行内元素行内元素不会独占一行只占自身内容大小。例如spanhello/span spanworld/span显示hello world两个 span 会在同一行。2. 常见行内元素a/a span/span strong/strong em/em i/i b/b3. 行内元素特点1不会独占一行例如a href#百度/a a href#谷歌/a显示百度 谷歌2不能设置宽度和高度例如span { width:200px; height:100px; }不会生效。原因行内元素的大小由内容撑开。3只能设置水平方向的 margin 和 padding例如span { margin-left:20px; }有效。但是span { margin-top:50px; }效果不明显。四、行内块元素inline-block1. 什么是行内块元素行内块元素同时具有行内元素和块级元素的特点。特点可以和其他元素在一行显示可以设置宽度和高度例如img src1.jpg img src2.jpg图片默认就是行内块元素。显示图片1 图片22. 行内块元素特点1可以设置宽高img { width:200px; height:200px; }有效。2不会独占一行div classbox/div div classbox/divCSS.box { display:inline-block; width:100px; height:100px; }效果---- ---- |盒1| |盒2| ---- ----五、三种显示模式对比特点block块级inline行内inline-block行内块独占一行√××设置宽度√×√设置高度√×√设置margin全部有效左右有效全部有效常见元素div,pspan,aimg,input六、display属性改变元素显示模式CSS 中可以使用display改变元素类型。例如1. div变成行内元素HTMLdiv 我是div /divCSSdiv{ display:inline; }效果div 不再独占一行。2. span变成块级元素HTMLspan 我是span /spanCSSspan{ display:block; }效果span 可以设置宽高并且独占一行。3. 转换成行内块div{ display:inline-block; }效果div 可以像图片一样排列。七、display:none隐藏元素display:none可以隐藏元素。例如.box{ display:none; }效果元素消失并且不占空间。例如div 盒子1 /div div classhide 盒子2 /div div 盒子3 /divCSS.hide{ display:none; }显示盒子1 盒子3盒子2不存在。八、display:none 和 visibility:hidden区别display:none特点元素隐藏不占位置例如盒子1 (消失) 盒子3visibility:hidden特点元素隐藏仍然占据空间CSS.box{ visibility:hidden; }效果盒子1 空白区域 盒子3九、实际开发中的应用1. 导航栏HTMLa首页/a a新闻/a a关于/a默认首页 新闻 关于转换a{ display:inline-block; width:100px; height:40px; }效果首页 新闻 关于2. 图片排列img{ display:inline-block; width:200px; height:150px; }多个图片可以横向排列。3. 块级盒子居中div{ width:300px; margin:auto; }前提必须是块级元素。十、为什么需要学习元素显示模式网页布局本质就是使用不同显示模式控制元素的位置和大小。例如网页顶部导航logo 首页 产品 联系需要inline-block网页主体文章内容需要block文字中的链接点击这里需要inline十一、总结CSS 三大元素显示模式1. 块级元素 block特点独占一行可以设置宽高常用于页面大结构代表div p h1 ul2. 行内元素 inline特点不换行不能设置宽高大小由内容决定代表span a strong3. 行内块元素 inline-block特点不换行可以设置宽高常用于导航、图片排列代表img input4. display属性常用display:block; display:inline; display:inline-block; display:none;