position

个人建议：不论是学css还是其他，遇到属性、方法之类的问题，先看官方文档。如果看不懂，再看别人的博客。 关于position的属性有哪些，官文是这样的： 这里有一个值得注意的点是 absolute 属性，就是说使用该属性的元素会被定位在相对于第一个父元素的位置，而 fixed 是定位在相对于浏览器的位置。两者的区别在于，当使用 absolute 的元素与使用 fixed 的元素定位在同一位置时，如果网页滚动，那么 fixed 的元素不会有任何变化，而 absolte 元素会被滚走。如下图 接下来使用position属性来实现各种居中效果： 一、屏幕的各种居中 1、屏幕左上方 .parent{ position: absolute; //可加可不加 background: #FF5722; width: 300px; height: 300px; } < div class = " parent " > </ div > 2、屏幕中上方 .parent{ position: absolute; left: 50%; margin-left: -150px; //宽度的1/2 background: #FF5722; width: 300px; height: 300px; } < div class = " parent " > </ div > 3、屏幕右上方 .parent{

说到 css sprite技术 第一次接触还是在百度站长工具中网站检测时看到到，说这个技术可以减少网站图片请求次数，当时还不是很理解，之后了解了一番，明白了其中的原理，故在此给大家分享一下。 　 CSS Sprites 在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。 　 CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。 下面我就详细的讲解下他的使用技巧，包你现在不懂的童鞋会有个清楚的全新了解，虽然目前有这样的工具，但是还是要先清楚他的原理

什么是WebGL？ WebGL使用了GLSL ES(OpenGL ES)着色器语言，通过配合调用js相关的绘制接口来实现3D效果。 采用页面中的<canvas>元素来定义绘图区域，canvas支持三维图形的绘制，但它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形。 绘制流程 获取画布canvas和3D绘制上下文 1 var canvas = document.getElementById('canvas'); 2 var gl = canvas.getContext('webgl'); 具体的参数可以参考这里： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext 编写顶点着色器和片段着色器 1 // 着色器是字符串形式的glsl代码 2 var VSHADER_SOURCE = "..."; 3 var FSHADER_SOURCE = "..."; 编译着色器并提交到GPU 1.创建Shader对象 createShader方法，需要传递参数指明是顶点着色器还是片段着色器； 2.将写好的着色器附加到Shader上 shaderSource方法，可以指定着色器代码添加到指定的Shader上； 3.编译着色器 compileShader方法

前言 在 Java NIO 中， 缓冲区 用来 临时 存储数据，可以理解为是 I/O 操作中数据暂存的中转站。 缓冲区 直接为 通道 ( Channel )服务，数据是从 通道 读入 缓冲区 ，从 缓冲区 写入到 通道 中的。 缓冲区 本质上是一块可以 写入数据 ，然后可以从中 读取数据 的内存。这块内存被包装成 NIO Buffer 对象，并提供了一组方法，用来方便的访问 这块内存 。 正文 Buffer的类型 Java NIO 提供以下几种 Buffer 类型： ByteBuffer MappedByteBuffer ShortBuffer LongBuffer FloatBuffer CharBuffer IntBuffer DoubleBuffer 这些 Buffer 类型代表了 Java 中7种基本数据类型。换句话说，就是可以通过 byte 、 char 、 short 、 int 、 long 、 float 或 double 类型来操作 缓冲区 中的数据。 Buffer的基本用法 使用 Buffer 读写数据一般遵循以下四个步骤： 写入数据到 Buffer 中； 调用 Buffer 的 flip() 方法； 从 Buffer 中读取数据； 调用 clear() 方法或者 compact() 方法。 当向 Buffer 写入数据时， Buffer 会记录下写了多少数据

Given an array of integers nums sorted in ascending order, find the starting and ending position of a given target value. Your algorithm's runtime complexity must be in the order of O (log n ). If the target is not found in the array, return [-1, -1] . Example 1: Input: nums = [ 5,7,7,8,8,10] , target = 8 Output: [3,4] Example 2: Input: nums = [ 5,7,7,8,8,10] , target = 6 Output: [-1,-1] 思路：binary search标准模板走起； class Solution { public int[] searchRange(int[] nums, int target) { int[] res = {-1,-1}; if(nums == null || nums.length == 0) { return res; } res[0] = findFirstPosition(nums, target, 0,

最近爬取一个报表的数据，里面有个INPUT元素，没有ID,NAME,CLASS是重复使用的。没有办法，只好学习by_xpath的详细用法； from selenium import webdriver from selenium.webdriver.common.keys import Keys #浏览器启动配置 browser = webdriver.Firefox() browser.maximize_window() # 最大化浏览器窗口 url= "file:///D:/py/ftn/a.html" browser.get(url) qssj =browser.find_element_by_xpath('//div[@widgetname="STARTDATE"]/div/input') qssj.send_keys('2020-02-24') 下面是我构造的a.html的文件 1 <div class="pmeter-container fr-absolutelayout ui-state-enabled" style="height: 62px; width: 935px; overflow: hidden; position: absolute; left: 0px; top: 0px;" widgetname="PARA"><div style="width:

定位 定位（position）：用来检索或者设置元素的定位方式（改变元素位置的属性） position的属性值有static、absolute、relative、fixed、sticky 注:使用了定位属性margin:auto会失效。 使用定位的步骤 1:给元素添加position属性 2:寻找参照物 3:添加坐标(四坐标:top、bottom、left、right) 静态定位(static) position的默认值，默认文本流的状态。 不会识别left right top bottom指定的坐标 注:加了静态定位等于无作用，默认值不识别坐标。如下图 绝对定位(absolute) 1: 参照物：按照已经有定位的父元素进行位置的变化。 2: 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。 3: 绝对定位，脱离文档流、不占据空间 注:此图父子元素都用了绝对定位,根据坐标进行了移动。 相对定位(relative) 1 : 参照物：自身默认的位置！ 2 : 始终占据空间，不会破坏文档流 注:以下两图可做对比 固定定位(fixed) 1 : 参照物：浏览器窗口 2 : 脱离文本流，不占据空间 注：比较下面两图可知红色盒子固定位置了！ 黏性定位(sticky) 1:position:relative 和 position:fixed的结合。 2:页面没超出窗口范围

一、 上中下左固定 - fixed+margin 概括： 如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

position定位 position定位 概念：某一元素相对于元素本身，或者相对于另外一个元素或者是浏览器窗口所在的位置，按照相对位置的不同，具体分为相对定位，绝对定位和固定定位。 Position的属性及属性值 Static：静态定位，元素初始默认的位置 Relative：相对定位，元素相对于自身默认位置的所发生偏移的距离，原自身所占的空间会被保留，不会影响其他盒子位置。 Absolute：绝对定位。 第一种情况：若只是给元素添加absolute，没有定位父元素，那位置是相对于浏览器窗口的定位，并且该元素会脱离文档流，同时影响下面元素的位置，对前面标准流元素无影响。 第二种情况：如果有定位父元素，相对于父元素发生的偏移距离，元素本身会脱离文档流，从而会影响到后面元素的位置，对前面标准流元素没有影响，此时给元素添加absolute时，一定要找父元素添加relative。如果父元素中有多个元素具备定位模式，那么此元素的相对于离自身最近的父元素的位置发生偏移的。 Fixed：固定定位，可以理解为特殊的绝对定位，只不过元素是相对于浏览器可视窗口的位置，不会受到浏览器滚动条的影响，也不会受到父元素的影响。 举例说明： Sticky：粘性定位 在没有达到指定位置的时候，是没有定位效果的，到达指定位置后，就变成固定模式。 定位偏移量是指top bottom left right