margin

div 行内样式style常用属性 观看演示 下载源代码 〖 作者：Nimitz 〗〖 发布日期：2014-02-16 〗 一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： <div style="width:200px;height:200px;"></div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 点击查看效果： <div style="width:300px;height:300px;"> <div style="margin:5px 10px 20px 30px;width:200px; height:200px;"> </div> </div> 说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。 在标准的浏览器中，box模型首先确定的是content的宽度和高度，而margin和padding不会影响content的宽度和高度—

给元素打上top:50%;left:50%以及margin-top:一半的height值的的负数; margin- left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上这样的css {width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px} 使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了。 来源： https://www.cnblogs.com/mxdneu/p/5211347.html

bootstrap4 常用样式类名 （供自己参考） 1、容器和网格系统 容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色 字体 text-muted 柔和 text-primary 重要 text-success 成功 text-info 提示 text-warning 警告 text-danger 危险 text-secondary 副标题 text-dark 深灰色文字 text-light 浅灰色 text-white 白色 背景 bg-primary bg-secondary bg-success bg-danger bg-warning bg-info bg-light bg-dark bg-white 3、边框 增加边框 border //默认：1px solid #dee2e6!important border-top border-left border-right border-bottom 删除边框 border-0 //去除边框或者除去某一边的边框 border-top-0 border-left-0 border-right-0

微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{{item.activityContentId}}" > <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='true' indicator-dots='true' circular='{{circular}}' > <block wx:for="{{carousels}}"> <swiper-item> <image src='{{baseUrl}}{{item.imgUrl}}' class='slide-image' binderror="errorFunction"></image> <text class="item-title">{{item.title}}</text> </swiper-item> </block> </swiper> </view> <!-- 图标 --> <!-- <view class="nav"> <view bindtap='classify'> <view> <image src="

clientWidth、clientHeight document.documentElement. clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement. clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 offsetWidth、offsetHeight document.documentElement. offsetWidth 获取DOM文档的根节点html元素对象的宽度，即offsetWidth=width+padding+border，不包括margin。 document.documentElement. offsetHeight 获取DOM文档的根节点html元素对象的高度，即offsetHeight=height+padding+border，不包括margin。 兼容性 在 IE9、10 中，offsetWidth和offsetHeight指的是浏览器窗口文档显示区域的宽度和高度，包括滚动条。 在 IE8 中，offsetWidth和offsetHeight指的是浏览器窗口文档显示区域的宽度和高度，包括滚动条和文档显示区域边缘2px的灰色边框。 在 IE7 中

1.定位+transform 给居中元素 div.box { position : absolute ; <!--设置元素的定位位置，距离上、左都为50%--> left : 50% ; top : 50% ; <!--设置元素的相对于自身的偏移度为负50% ( 也就是元素自身尺寸的一半 ) --> transform : translate ( -50%,-50% ) ; } 2.四个零+margin：auto 给居中元素 div.box { weight : 200px ; height : 400px ; position : absolute ; <!--设置元素的定位位置，距离上、下、左、右都为0--> left : 0 ; right : 0 ; top : 0 ; bottom : 0 ; <!--设置元素的margin样式值为 auto--> margin : auto ; } 3.flex布局 .parent { display : flex ; justify-content : center ; align-items : center ; } 4.grid布局 .parent { display : grid ; justify-items : center ; align-items : center ; } 5.利用flex或grid布局结合margin

页面布局 盒模型   文档中的每一元素都被认为是一个矩形盒子。如下图所示，盒子是由内容区以及围绕着内容区的内边距、边框以及外边距组成。这就是所谓的盒模型。 内容   内容区由文本和其它诸如图像、段落、标题、列表之类的网页元素组成。页面上元素的可见宽度为内容、内边距和边框三者宽度的总和。当然，width属性仅设置了内容的实际宽度；它并不包括内边距、边框或外边框。 内边距   内边距（Padding）指内容和边框之间的区域。默认的内边距值为0。某个元素的背景属性对内边距与内容区域而言是一致的。我们使用padding属性来设置元素的内边距。 边框   边框是位于内边距与外边距之间的区域。默认的边框值为0，也即不显示边框。我们使用border属性来设置元素的边框。 外边距   外边距（Margin）是指元素和相邻元素之间的空白区域。 Margin属性   我们用margin属性来设置某个元素各个方向上的外边距。这一区域总是透明的，显示的是网页或父元素的背景色。对于网页文档以及特定的如段落、标题、表单等元素，浏览器自带默认的外边距值。指定margin属性就能覆盖默认值。   外边距的值是数值类型，单位为px或em。将其设置为0（无单位），外边距就消失了。设置为auto，将由浏览器计算决定外边距值。下标列出了配置外边距的各种CSS属性： 属性 简介与常用值 margin