margin

/* 让盒子居中，不受屏幕像素大小限制 前提需要设置宽度 width ;不要简单使用left 移动多少px ;屏幕大小不同 左移位置都不同*/ /* margin:0 auto; 是用于文档流居中，对于脱标的盒子没办法居中 */ １.1 文档流(标准流) 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行 行内元素独占一行 １.2 浮动 Float:left | right 特点: 不占据原来的位置，会脱标。 可以让块元素在一行上显示。 可以将行内元素转成行内块。（不推荐使用） １.3 清除浮动 Clear:both; １.4 额外标签法 在最后一个浮动元素后边添加新标签。 １.5 Overflow:hidden; 在父元素上使用overflow:hidden; １.6 伪元素清除浮动 2 定位 Position: left | right | top | bottom 2.1 静态定位 Position:static; 标准流。 2.2 绝对定位(看脸型) Position:absolute; 特点： ◆自身从浏览器出发。 ◆绝对定位之后，元素不占位置，会脱标。 ◆嵌套的盒子，父元素没有给自身绝对定位，子元素绝对定位，子元素从浏览器出发设置自身位置。 ◆嵌套的盒子，父元素绝对定位，子元素绝对定位，子元素从父元素出发设置自身位置。

一、方案一（已知子元素的宽高） 1.子元素开启绝对定位，父元素开启相对定位 2.子元素设置left、right、top、bottom属性都为0，margin为auto 或者 （注意2、3步二选一） 3.子元素left设为50%，top设为50%，margin-left设为 -子元素的width/2px，margin-top设为 -子元素的height/2px 二、方案二（未知子元素宽高） 1.子元素开启绝对定位，父元素开启相对定位（这一步和方案一相同） 2.子元素left设为50%，top设为50%，transform设为translate(-50%,-50%) 特别说明：子元素开启了绝对定位，随之父元素也要开启非static定位（relative相对定位或者是absolute绝对定位都可以，根据需求），才能使子元素的绝对定位是相对于其父元素进行定位。 end，每种方案实现原理都不尽相同，望辩证待之。 来源： https://www.cnblogs.com/chasesunforever/p/12103152.html

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 先看看成功展示（评论是固定在底部）： 页面wxml： <view class='commentsInputLayout' wx:if="{{showview}}" style="bottom:{{keyboardHeight}}px;height:150rpx;border: 1px solid lightgray;"> <input value='{{commentsContent}}' type='text' name="content" style="background-color: #F3F3F3;margin-top: 3rpx;margin-left: 15rpx;margin-bottom: 20rpx;margin-right: 5rpx;border-radius:19rpx;float: left;height:80rpx;" class='commentsInput' placeholder='写评论...' placeholder-class='phcolor' bindinput='inputCommentsContentListening' bindfocus="inputCommentsFocus" bindblur="inputCommentsBlur" value="{

效果图： wxml: <!-------------------- 选择版本 -------------------> <view class="size">选择版本</view> <scroll-view scroll-x > <view class="con"> <view wx:for="{{banben}}" wx:key="" data-index="{{index}}" bindtap='goSize'> <view class="{{index==idxSize?'_item-size':'item-size'}}" >{{item.size}}</view> </view> </view> </scroll-view> <!-------------------- 选择颜色 -------------------> <view class="color">选择颜色</view> <scroll-view scroll-x > <view class="con"> <view wx:for="{{banben}}" wx:key="" data-index="{{index}}" bindtap='goColor'> <view class="{{index==idxColor?'_item-color':'item-color'}}" >{{item.color}}

文章目录 height width max-height max-width min-height min-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top margin margin-bottom margin-left margin-right margin-top 属性 描述 版本 height 设置元素的高度 CSS1 width 设置元素的宽度 CSS1 max-height 设置元素的最大高度 CSS2 max-width 设置元素的最大宽度 CSS2 min-height 设置元素的最小高度 CSS2 min-width 设置元素的最小宽度 CSS2 overflow 设置元素内容溢出时样式。 CSS2 overflow-x 设置元素内容水平方向溢出时样式。 CSS3 overflow-y 设置元素内容垂直方向溢出时样式。 CSS3 padding 在一个声明中设置所有内边距属性 CSS1 padding-bottom 设置元素的下内边距 CSS1 padding-left 设置元素的左内边距 CSS1 padding-right 设置元素的右内边距 CSS1 padding-top 设置元素的上内边距 CSS1

文本缩进：text-indext：2em；（缩进两个字）。 单行文本垂直居中：line-height：20px；（当行文本行高20px，当line-height等于容器的高时，当行文本在容器中垂直居中）。 文本左对齐：text-align：left； px（像素单位）和em都是相对单位，em=1*font-size； 字体下划线：text-decoration：underline； 鼠标光标的样式：cursor：pointer； 圆角：border-radius：10px； ---------------------------------------------------- 行级元素（display:inline;）：（1）内容决定元素所占位置（2）不能通过css改变宽高。 <sapn><strong><a><em><del> 块级元素（display:block;）：（1）独占一行（2）可以通过css改变宽高。 <div><p><ul><ol><li><form> 行级块元素（display:inline-block;）：（1）不独占一行（2）可以改变宽高 <img> （ps：带有inline或者inline-block的都带有文字的特性，例如：两个单词在浏览器中显示会通过一个空格隔开，两张图片并排中间也会有一条小间隙） （ps：行级元素只能嵌套行级元素

1.点击表格展示对应扇形统计图，效果如下： 2.统计图组件Statistics .vue代码如下： <template> <div> <div :id="idname" :style="{width: '100%', height: allheight+ 'px'}"></div> </div> </template> <script> export default { name: 'Statistics', props: { statitle: { type: String }, idname: { type: String }, signlist: { type: Array }, colorlist: { type: Array }, showDatalist: { type: Array }, staradios: { type: String }, subtext: { type: String }, legendbottom: { type: Number }, allheight: { type: Number } }, mounted () { this.refreshpic() }, watch: { showDatalist: function (nval, oval) { this.refreshpic() } }, methods: { refreshpic