CSS 布局2(显示方式、水平居中、左侧固定、垂直居中、左右固定)
2018-01-15 23:50
726 查看
CSS 布局 显示方式
元素的diplay显示方式有多种,隐藏、块级、内联、内联-块级
1.隐藏
在隐藏章节已经使用过通过display的方式隐藏一个元素
display:none; 使得被选择的元素隐藏,并且不占用原来的位置
2.块级
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
3.内联
display:inline; 表示内联元素
内联元素前后没有换行,并且在其上的width和height也无效。 其大小由其中的内容决定
div默认是块级元素
span默认是内联元素
4.内联-块级
内联是不换行,但是不能指定大小
块级时能制定大小,但是会换行
有时候,需要元素处于同一行,同时还能指定大小,这个时候,就需要用到内联-块级 inline-block
5.其他
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了
CSS 布局 水平居中
1.内容居中
2.元素居中
左侧固定,右边自动占满
补满剩下效果是float:left做到的,.right会自动补满剩下的。
那么overflow:hidden 它的用途是隐藏多余的高度
这里把overflow:hidden去掉,并且把.right的高度增加,就会看到.right会包围.left。 所以需要加上overflow:hidden
CSS 布局 垂直居中
1.line-height方式
2.内边距方式
借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上
3.table方式
首先通过display: table-cell;把div用单元格的形式显示,然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中,上一步 line-height就不能对图片居中。
4.左右固定,中间自适应的布局
元素的diplay显示方式有多种,隐藏、块级、内联、内联-块级
1.隐藏
在隐藏章节已经使用过通过display的方式隐藏一个元素
display:none; 使得被选择的元素隐藏,并且不占用原来的位置
<style> div.d{ display:none; } </style> <div>可见的div1</div> <div class="d">隐藏的div2,使用display:none隐藏</div> <div>可见的div3</div>
2.块级
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
<style> div,span{ border: 1px solid lightgray; margin:10px; width:200px; height:100px; } .d{ display:block; } </style> <div>普通的div块</div> <span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span> <span class="d">这是span,被改造成了块级元素</span>
3.内联
display:inline; 表示内联元素
内联元素前后没有换行,并且在其上的width和height也无效。 其大小由其中的内容决定
div默认是块级元素
span默认是内联元素
<style> div,span{ border: 1px solid lightgray; margin:10px; width:200px; height:100px; } .s{ display:inline; } </style> <span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span> <div class="s">这是div,被改造成了内联元素</div>
4.内联-块级
内联是不换行,但是不能指定大小
块级时能制定大小,但是会换行
有时候,需要元素处于同一行,同时还能指定大小,这个时候,就需要用到内联-块级 inline-block
<style> span{ display:inline-block; border: 1px solid lightgray; margin:1 4000 0px; width:100px; } </style> 像这样 ,每个都能设置宽度 ,同时还能在同一行。 <br> <span>盖伦</span> <span>梦多医生</span> <span>奈德丽</span> <span>蒸汽机器人</span>
5.其他
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了
CSS 布局 水平居中
1.内容居中
<style> div{ border:1px solid lightgray; margin:10px; } </style> <div align="center"> 通过设置属性align="center" 居中的内容 </div> <div style="text-align:center"> 通过样式style="text-align:center" 居中的内容 </div>
2.元素居中
<style> div{ border: solid 1px lightgray; margin: 10px; } span{ border: solid 1px lightskyblue; } </style> <div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div> <div style="width:300px;margin:0 auto"> 设置本div的宽度,然后再使用样式 margin: 0 auto来使得元素居中</div> <span style="width:300px;margin:0 auto"> span 是内联元素,无法设置宽度,所以不能通过margin:0 auto居中</span> <div style="text-align:center"> <span>span的居中可以通过放置在div中,然后让div text-align实现居中</span> </div>
左侧固定,右边自动占满
<style> .left{ width:200px; float:left; background-color:pink } .right{ overflow:hidden; background-color:lightskyblue; } </style> <div class="left">左边固定宽度</div> <div class="right">右边自动填满</div>overflow:hidden的作用并不是刚好补满剩下的,把这个去掉,也可以观察到补满剩下的效果。
补满剩下效果是float:left做到的,.right会自动补满剩下的。
那么overflow:hidden 它的用途是隐藏多余的高度
这里把overflow:hidden去掉,并且把.right的高度增加,就会看到.right会包围.left。 所以需要加上overflow:hidden
CSS 布局 垂直居中
1.line-height方式
<style> #d { line-height: 100px; } div{ border:solid 1px lightskyblue; } </style> <div id="d">line-height 适合单独一行垂直居中</div>
2.内边距方式
借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上
<style> #d { padding: 30 0; } div{ border:solid 1px lightskyblue; } </style> <div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>
3.table方式
首先通过display: table-cell;把div用单元格的形式显示,然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中,上一步 line-height就不能对图片居中。
<style> #d { display: table-cell; vertical-align: middle; height:200px; } div{ border:solid 1px lightskyblue; } </style> <div id="d"> <img src="example.gif"> </div>
4.左右固定,中间自适应的布局
<style> .left{ width:200px; float:left; background-color:pink } .right{ width:200px; float:right; background-color:pink } .center {margin:0 200px; background-color:lightblue} </style> <div class="left">左边固定宽度</div> <div class="right">左边固定宽度</div> <div class="center">中间自适应</div> </head> <body> </html>
相关文章推荐
- div+css:页面整体布局居中显示:上下居中||垂直居中,左右居中||水平居中
- CSS水平居中,垂直居中以及各种布局方式
- CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)
- CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)
- 三种方式实现元素水平居中显示与固定布局和流式布局概念理解
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中
- CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)
- CSS布局div之水平居中与垂直居中
- css实现高度或者宽度不固定的div元素垂直左右居中
- 解读 CSS 布局之水平垂直居中
- 七种CSS方式让一个容器水平垂直居中
- CSS 两列布局 之 左侧适应,右侧固定 3种方式
- 收罗CSS布局居中的N中方法(水平和垂直)
- 纯CSS完美实现垂直水平居中的6种方式
- CSS大小不固定的图片和多行文字的垂直水平居中
- 七种CSS方式让一个容器水平垂直居中
- CSS之水平垂直居中布局的五种方法
- CSS布局——水平垂直居中
- 七种CSS方式让一个容器水平垂直居中