css 布局用到的相关属性

字数 468阅读 97

一:display: table

display:table解决了一部分需要使用表格特性但又不需要表格语义的情况,设置固定的父元素宽度,可以使若干个子元素平分宽度。

例如:

 <view class='demo1'>
    <view>1111</view>
    <view>2222</view>
    <view>3333</view>
  </view>
.demo1 {
  display: table;
  width: 85%;
  margin: 30rpx auto;
  border: 1px solid red;
  padding: 15rpx;
}

.demo1 view {
  display: table-cell;
  padding: 10rpx;
  border: 1px solid green;
  border-right: none;
  text-align: center;
  vertical-align: middle;
}

.demo1 view:last-child {
  border-right: 1px solid green;
}

效果图:


image.png

二:display: table-cell

该属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7不支持。利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性,使用table-cell时最好不要与float以及position: absolute一起使用。对margin值无反应,可以响应padding的设置。对高度和宽度高度敏感 ,不要对display:table-cell使用百分比设置宽度和高。

例如:

<view class='cell'>table cell</view>
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-left: 50rpx;/*起作用 */
  margin-left: 50rpx;/*不起作用 */
}

效果图:


距离为padding设置的距离


不设置padding,table-cell会垂直居中

三:vertical-align 垂直(居上,居中,居下)

vertical-align 属性设置元素的垂直对齐方式。 以前想要一些元素垂直居中对齐,经常用line-height,可是对于图片来说,line-height的表现并不理想,所以得用vertical-align:middle。
使用方法:

1:父元素(inline-block\block)必须含有line-height(inline元素有无皆可),子元素中的(inline-block/inline元素)vertical-align才能起作用。
2:vertical-align不可继承,必须对子元素单独设置。
例如:

 <view class='demo3'>
    <image src='/images/employeeList/zhanyuan.png'></image>
  </view>
.demo3{ width:200px; height:200px; line-height:200px; border: 1px solid red;}
.demo3 image{ height:100px; width:100px;vertical-align:middle;}

效果图:


image.png

四:justify-content align-items

justify-content align-items 是flex盒子模型的属性

justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items 用于设置弹性盒子元素的侧轴(纵轴)方向上的对齐方式。
例如:

<view class='flex-text'>flex</view>
.flex-text {
  width: 200rpx;
  height: 200rpx;
  border: 1px solid red;
  display: flex;
  justify-content: center;/* 横轴居中 */
  align-items: center;/* 纵轴居中 */
}

效果图:


横轴纵轴居中

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
  • 草在结它的种子 风在摇它的叶子 我 在心疼我的妹子 我的妹子很美 第一次见你的眼瞳 脑海浮现出的 是若彤的一尘不染...