绝对定位 | 易学教程

相对定位和绝对定位 left和margin-left

阅读更多关于相对定位和绝对定位 left和margin-left

1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative，如果不设置则会以最近一个定位的父对象为参考点,。margin-left则不用设position也可以用。 2，通常情况下，我们元素的position属性的值默认为static 就是没有定位，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的， z-index属性这时也不会有效。 3，对某元素设置了相对定位，它移动后仍占据着原来的空间，不会被其他块填补掉，它的偏移也不会把别的块从文档流中原来的位置挤开，会叠在其他元素之上，可用z-index调。被设置了绝对定位的元素不占空间，原位置被删除，也可用 z-index来设置它们的堆叠顺序。 4，设置为相对定位的元素，会相对于它的起点进行移动。设置为绝对定位的元素，绝对定位是“相对于”最近的已定位（非static，即relative,absolute或fixed）祖先元素，如果不存在已定位的祖先元素，那么会“相对于”<body>进行定位，例如设置了top:20,right:30,那元素就会离顶部20，离右边界30，，这里的margin和padding没清零，所以看着top比right大。 5,当两个元素设为relative时，后一个能覆盖到前一个上，前一个不会动。

用绝对定位实现垂直居中

阅读更多关于用绝对定位实现垂直居中

用绝对定位实现垂直居中 HTML代码： <div class="posdiv"> <img src="1.jpg" alt=""> </div> CSS代码： body{background: #ccc;} .posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto} .posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;} 解释：一张包裹在div中的img图片，我们给不光给图片以及div元素定义了尺寸，还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。给img的父元素添加相对定位属性（position: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（position: absolute）。将图片元素的top属性设置为50%。现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半。如果不确定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);属性。来源： https://www.cnblogs.com/jjxhp/p

草珊瑚的css基础

阅读更多关于草珊瑚的css基础

首先要了解如下概念： viewport，窗口大小，containing block，block formatting context，inline formatting context，dirction和unicode-bidi，display和float以及postion的三者关系，盒子模型。一.viewport viewport是你所看到的窗口。它有两个重要属性，一个是css像素，另一个是设备像素。设备像素由分辨率决定，css像素由开发者决定。设备像素和css像素的关系有 1.重叠，即1css像素等于1设备像素。 2.缩小浏览器，一个设备像素覆盖多个css像素。 3.放大浏览器，一个css像素覆盖多个设备像素。设置width=device-width之后，一个css像素会占用多个设备像素，从而感觉上网页放大了。占用计算方式是，css像素=设备像素/(device-width)。二.窗口大小浏览器窗口的大小，一种带滚动条，另一种不带滚动条。不带滚动条的窗口宽高获取，document.documentElement.clientWidth和document.documentElement.clientHeight。带滚动条的窗口宽高获取，window.innerWidth和window.innerHeight。这些个属性获取到的是css像素。因此，当用户放大浏览器

前端学习（111）：绝对定位

阅读更多关于前端学习（111）：绝对定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位</title> <style> #box1{width:100px; height: 100px;background: red;position: absolute;} #box2{width:200px; height: 200px;background: blueviolet;} </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> 运行结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

前端学习（112）：绝对定位和绝对定位

阅读更多关于前端学习（112）：绝对定位和绝对定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相对定位和绝对定位</title> <style> #box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;position: relative;} #box2{width: 100px;height: 100px;background: red;position: absolute;left: 0px;top: 0px;} </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details/103518077

Div CSS常用布局方式代码集锦

阅读更多关于 Div CSS常用布局方式代码集锦

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 现在都Div CSS布局了，本文收集整理了一些常用的DivCSS布局代码，比如两行一列、三行一列、两行两列、三行两列、两行三列、单行三列以及float定位的代码集锦，下面逐一帖出各个布局的代码： CSS一行一列布局代码： body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:350px;} CSS两行一列布局代码： body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:350px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:350px;} CSS三行一列布局代码： body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width

css浮动(float)及如何清除浮动

阅读更多关于 css浮动(float)及如何清除浮动

前言： CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。 (2)网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、相对定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。（了解）浮动float用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。浮动值： left：向左浮动 right：向右浮动特征：块元素可以在一行显示浮动特征： 1.按照一个指定的方向移动，遇到父级的边界或者其他的元素停下来 2.块元素可以在一行显示，宽由内容撑起来 3.行内元素支持设置宽高 4.脱离文档流 float不是完全脱离文档流的块元素：对于块元素，后面未浮动的元素所占的位置是浮动元素的位置注意：内容会把浮动元素的位置保留，行内元素

CSS五种定位的使用方法

阅读更多关于 CSS五种定位的使用方法

前端开发：CSS的使用一、定位二、position定位练习：用浮动做出导航栏：相对定位：绝对定位：固定定位：伪类的使用：英雄联盟点击图片显示文字一、定位所为定位，实际上就是定义元素框相对于其正常位置，应该出现在哪儿定位就是改变元素在页面上的默认位置分类：普通流定位：（元素默认的定位方式）浮动定位相对定位绝对定位固定定位 1、普通流定位文档流是页面元素默认的定位方式块级：从上到下排列（独占一行）行级：从左到右排列（不独占一行） 2.浮动定位 float：left float：right 如果将元素的定位方式设置了浮动定位那么具有以下几个特点 1.浮动元素会脱离文档流，其他未浮动的元素要上前补位 2.浮动元素会停靠在父元素的左边或者右边，或者停靠在其他浮动元素的边缘上 3.浮动元素只会在当前行内浮动 4.浮动元素依然位于父级元素内 5.让多个块级元素处于一行浮动引发的效果当父元素的宽度显示不下所有已浮动的元素时，最后一个元素将换行（有可能会被卡住）元素一旦浮动起来，那么将变成块级元素，尤其对行内元素影响最大。文本、行内元素、行内块元素采用文字环绕的方式排列，是不会被浮动元素压在底下的会巧妙的避开浮动元素清除浮动元素浮动起来之后，除了影响到自己的位置，还会影响后续元素如果不想被前面浮动元素影响可以使用清除浮动来解决这个问题

前端css基础（二）布局定位三种方式文档流,浮动,层定位 clear

阅读更多关于前端css基础（二）布局定位三种方式文档流,浮动,层定位 clear

对盒子进行定位定位方式分为三类：（1）文档流（2）浮动定位（3）层定位文档流flow 默认的方式，相当于平常写字一样，从上到下，从左到右浮动定位float 想要盒子并列排列一般采用浮动定位层定位layer 使用position属性设定，像图层一样前后层叠在一起一.文档流flow 文档元素分类 block,inline,inline-block 1.block元素独占一行元素的height、width、margin、padding都是可以设置的常见的block元素： div、段落、列表、标题、表格、表单等 <div>div标签</div> <p>p标签</p> <h1>h标签</xmp></h1> <ul>ul标签</ul> <table>table标签</table> <form>form标签</form> 2.inline 不单独占一行 width、height不可设置 width是由元素里面的文字和图片的宽度决定的，不能改变常见的inline元素：<span>、<a> <a>a标签</a> <span>span标签</span> 3.inline-block元素：不单独占一行元素的height、width、margin、padding都可以设置常见元素：<image> display属性二.浮动定位float 1.float属性 float属性

HTML第12章：CSS布局模型

阅读更多关于 HTML第12章：CSS布局模型

12.1css布局模型布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer） 12.2、12.3流动模型流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 12.4浮动模型块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用

订阅绝对定位