盒模型居中及水平垂直
16lz
2021-01-27
6.盒模型居中及水平居中
1.常见盒模型元素
属性 | 注释 |
---|---|
box-sizing:border-box | 不计算 pading |
background-clip:content-box | 将 padding 裁剪出来 |
overflow: hidden | 超出部分隐藏 |
overflow: auto | 使用滚动条查看被隐藏的内容 |
height: auto | 默认高度由内容撑开 |
min-height | 最小高度当内容超过最小高度时会自动伸展 |
max-height | 最大高度,一般配合 overflow:hidden 使用 |
text-align: center | 规定元素中的文本的水平对齐方式 |
line-height | 适合文字垂直居中 |
margin:auto | 块级元素居中 |
position: relative | 块级元素水平垂直居中,父级声明,二者缺一不可 |
position: absolute | 块级元素水平垂直居中,当前元素声明,二者缺一不可 |
2.实现 padding 内容区可见及计算到元素内
padding: 2em;
/* 裁剪padding内容可见 */
background-clip: content-box;
/* 将 padding计算到元素大小内*/
box-sizing: border-box;
3.盒模型水平及垂直集中
<div class="box">
<div></div>
</div>
/* \
1.块级元素水平垂直居中,父级声明position:relative;
2.然后再需要垂直居中的块级元素中添加
position: absolute;生成绝对定位的元素,相对定位元素以外的第一个父元素进行定位
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
以上缺一不可 */
.box {
width: 15em;
height: 15em;
border: 1px solid black;
background-color: blue;
position: relative;
}
.box > div {
width: 5em;
height: 5em;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
更多相关文章
- Android- 布局(Layout)和菜单(Menu)
- Android(安卓)开发艺术探索笔记 第四章 View的工作原理
- RelativeLayout相对布局介绍及属性介绍
- 居中显示并旋转 android Button 里的属性drawableLeft
- Appium元素定位(name、classname、相对路径、绝对路径\、list)
- android基础知识13:AndroidManifest.xml文件解析
- ScrollView嵌套LinearLayout布局不能撑满全屏的问题
- android学习--Android五大布局对象---FrameLayout,LinearLayout,
- LinearLayout不能显示全部内容