position

P.S: 这是我刚刚在博客园里看到的文章，对我比较有用处，我就把它摘抄了下来。 层级关系为： <div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————- position:relative 参照物 <div box1 <div box2 ——–position:absolute; top:50px; left:120px; <div box3 效果图： 为改变参照物（橘色框）后的效果 层级关系为： <div ——————————— position:relative;最近的祖先定位元素，参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position:absolute; top:50px; left:120px; <div box3 效果图： 参照物为最顶级的元素情况 。 层级关系为： <div ———————————没有设置为定位元素，不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow， transform 等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE<9的浏览器，最好用firefox，chrome等浏览器。以下案例都由本人亲自测试，希望好学您也可以一一测试一下。 1.正方形 正方形 1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2.长方形 长方形 1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3.圆形 圆形 1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;6 -webkit-border-radius: 50px;7 border-radius: 50px;8 } 4.椭圆 椭圆 1 #oval {2 width: 200px;3 height: 100px;4 background: red;5 -moz-border-radius: 100px / 50px

一、前言 有时候，组件库中没有我们想要的图标，这时候我们需要另外的从网上搜一下图标了，这时候引入到我们的项目中，如何调整大小呢？ 二、解决方法 （1）调整图标的大小，给Img，class属性。 （2）设置样式 （3）给图片加一个div,然后设置这个图片和组件的相对关系，这时候，要在图片的样式加上position:absolute.在组件的class中加上position:relative 组件：div (4)之后，可以直接设置left、top就可以了。 第二种情况： 如果是组件中自己带的，如果想要设置大小则直接改变：font-size的大小，左右可以调整，width，上下可以调整Height. 来源： CSDN 作者： 赵晓东-Nastu 链接： https://blog.csdn.net/MyxZxd/article/details/103492898

问题描述 ：移动端iPhone上的1px边框看起来像2px那么粗。 问题分析 ：不同的手机有不同的像素密度，在window对象中有一个devicePixelRatio属性，它可以反应设备的像素与css中的像素比。即devicePixelRatio=物理像素/独立像素。iPhone使用的是Retine屏，“Retina”是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的Retine屏下会显示成2px，所以css设置1px的样式，实际是2px的效果。 解决方案 ： 1、用小数实现 div { border: 1px solid #dfdfdf; } @media screen and (-webkit-min-device-pixel-ratio: 2) { div { border: 0.5px solid #dfdfdf; } } @media screen and (-webkit-min-device-pixel-ratio: 3) { div { border: 0.333333px solid #dfdfdf; } } 无法兼容安卓设备和iOS8以下的设备。 2、用border-image实现 .border-image-1px

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的宽度和高度—