绝对定位 | 易学教程

20-----定位（Position）

阅读更多关于 20-----定位（Position）

定位定位有三种： 1.相对定位 2.绝对定位 3.固定定位这三种定位，每一种都暗藏玄机，所以我们要一一单讲。相对定位相对定位:相对于自己原来的位置定位现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right 特性： 1.不脱标 2.形影分离 3.老家留坑（占着茅房不拉屎，恶心人）所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。参考点：自己原来的位置做参考点。绝对定位特性： 1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。参考点(重点)：一、单独一个绝对定位的盒子 1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。二、以父辈盒子作为参考点 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位

纯CSS实现枫叶下落

阅读更多关于纯CSS实现枫叶下落

纯CSS实现枫叶下落教程地址：原文地址（YouTube） B站教程：原文转载（bilibili）两个视频的内容相同，第二个为转载效果图代码区以下代码为本人填写，转载请注明教程地址和本贴地址 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 " content = " ie=edge " > < title > Document </ title > < link rel = " stylesheet " href = " css/style.css " > </ head > < body > < section > < h2 > Autumn leaves </ h2 > < div class = " set " >  < div > < img src = " img/f1.png " > </ div > < div > < img src = " img/f2.png " > </ div

CSS布局入门

阅读更多关于 CSS布局入门

从一个居中方案，来看CSS的布局。一、水平居中 1.行内元素的水平居中 text-align:center; 2.块状元素的水平居中设置宽度，margin:atuo; 子元素设置为inline-block，父元素增加text-align:center; 父元素设置display:flex;和justify-content:center; 绝对定位配合margin负值二、垂直居中　　1.display:inline-block;时，height和line-height设置为父元素高度　　2.display:table-cell;和vertical-align:middle; 　　3.已知高度，绝对定位配合margin负值　　4.未知高度，绝对定位配合CSS3的transform:translateY(50%) 　　5.父元素display:flex;和align-items:center; 　　6.父元素display:flex;然后子元素marigin:auto; 　 7.table元素中的td元素增加vertical-align:top;和text-align:center; 　　8.绝对定位，四个方向设置为0，配合margin:auto; 　　9.利用浮动，父元素浮动配合relative到中间，子元素利用relative进行偏移　　10.利用font-size

CSS入门指南-4：页面布局

阅读更多关于 CSS入门指南-4：页面布局

这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。 inline img 是一个标准的行内元素。你可以把两个 <img> 标签写在两行，但这并不影响图片再浏览器中的显示效果，它们会并列出现在一行上。而且标签直接的空白（标记中的两个<img>标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上。而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。 a 元素是最常用的行内元素，它可以被用作链接。 none 另一个常用的 display 值是 none。一些特殊元素的默认 display 值是它，例如 script 。display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

CSS 外边距(margin)重叠及防止方法

阅读更多关于 CSS 外边距(margin)重叠及防止方法

CSS 外边距(margin)重叠及防止方法胡俊涛 | 2011-11-17 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。 4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。 5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。 6

[译]HTML&CSS Lesson5: 定位

阅读更多关于 [译]HTML&CSS Lesson5: 定位

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局和针对单元素的布局——来介绍每种方法。浮动定位的其中一种方法就是使用 float 属性。 float 属性非常好用，可以用在很多地方。本质来说， float 属性是使元素脱离正常的流式布局，并将它放置在父元素的左侧或右侧。然后页面中所有的元素都会环绕浮动元素布局。例如我们将段落间的一张图片设置为浮动，那么这些段落都会围绕图片换行。当我们将多个元素同时设置为浮动元素，那么这些元素将呈现相邻或相对布局，如多列布局。 float 有好几个值，最常用的值是 left 和 right 。使元素浮动到父级元素的左侧或右侧。 img { float: left; } 浮动练习我们先创建一个通用页面，含有页头，页脚，中间有两列。最理想的情况就是在 <body> 元素内创建第二节课"了解HTML" 中提到的 <header> ， <section> ， <aside> 和 <footer> 元素。 <header>...</header> <section>...</section> <aside>...</aside> <footer>...</footer> <section> 和

CSS中\"position:relative\"属性与文档流的关系

阅读更多关于 CSS中\"position:relative\"属性与文档流的关系

前言近期遇到一个问题—— "position:relative" 到底会不会导致元素脱离文档流？主流观点是不会，但都给不出一个有说服力的论据。最后我自己佐证了一番，总算有了个结果： "position:relative" 不会导致元素脱离文档流。博文地址： CSS中"position:relative"属性与文档流的确切关系 "relative" 与文档流说到标准，最权威的自然莫过于 CSS标准文档。经过一番繁琐的查找之后（w3c网站找东西是真的累。。。），终于被我找到了。文档中 "positioning-scheme" 一节写道：链接： https://www.w3.org/TR/CSS22/v... An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. 当元素是浮动，绝对定位或者根元素时，元素被称为"流外元素"，否则被称为"流内元素"。很明显， "position:relative" 的元素仍在文档流中。另外，推荐下一个人认为不错的文章： html/css基础篇——DOM中关于脱离文档流的几种情况分析来源：

前端学习笔记 CSS布局

阅读更多关于前端学习笔记 CSS布局

1、绝对定位属性：position 值： absolute 会将该元素从原文档删除，重新给它指定一个位置。（原来的位置就被其他东西占了）通过指定left,top绝对定位一个元素，绝对定位是基于最近的一个定位了的父容器。绝对定位可能会造成谁把谁掩盖了的问题，这时候可以使用z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。 2、相对定位相对定位属性：position 值：relative 与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。（这样它原来所处的位置还留着空。） 3、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。属性：float 值： left,right 向右浮动后，原来的“坑”就让出来了，别的会填上来。并且是在原来的高度的基础上，向右浮动向左浮动后，也是原来的坑让出来了，那么下面的文字内容就想来占这个坑，但是突然发现我是向左浮动的，我并没有让出这个坑，于是下面的内容就只有排在我的右边了。利用上面的这一点可以让文字在右边围绕着图片。若不想要围绕着浮动的元素，可以把上来占位的元素设置clear:left属性还有！ div标签默认是换行的如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方

理解CSS外边距margin

阅读更多关于理解CSS外边距margin

前面的话 margin是盒模型几个属性中一个非常特殊的属性。简单举几个例子：只有margin不显示当前元素背景，只有margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性。之前的博文中已经分别详细地介绍了 margin的基础知识和负margin的详细用法。本文将详细介绍外边距margin的几个重点部分，包括重叠、auto和无效情况重叠【前提】 margin重叠又叫margin合并，发生这种情况有两个前提 1、只发生在block元素上(不包括float、absolute、inline-block元素) 2、只发生在垂直方向上(不考虑writing-mode) 【分类】 margin重叠共包括以下3种情况 1、相邻的兄弟元素 <style> p{ line-height: 2em; margin:1em 0; background-color: lightblue; display:inline-block; width: 100%; } </style> <p>兄弟一</p> <p>兄弟二</p> 2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递 <style> .box{ background-color: pink; height:30px; } .inner{

css学习之-margin篇

阅读更多关于 css学习之-margin篇

margin的作用：一：改变可视区域的尺寸　　注意点：1.适用于没有设定width/height的普通block元素　　　　　　2.只适用于水平尺寸，不会改变行高　　应用：实现一侧定宽的自适应布局 <!DOCTYPE html> <html> <head> <title>一侧定宽的自适应布局</title> <meta charset="utf-8"> <style type="text/css"> .auto{ border: 1px solid blue; } .auto img{ float: left; width: 80px; height: 80px; border: 1px solid blue; margin: 20px; } .auto p{ margin-left: 120px; } </style> </head> <body> <div class="auto"> <img src="1.jpeg"> <p>本间芽衣子是动画《我们仍未知道那天所看见的花的名字》及其衍生作品的女主角。拥有白皙的皮肤，白色的直长发，性格天然，有点“少根筋”，身材娇小的少女。五年前因意外滑下山崖，由于溪河十分湍急溺水而死。五年后出现在宿海仁太面前,并且以类似幽灵的型态存在。一开始只有仁太能看见，能碰到任何东西，也能吃饭，能打电话却无法出声

订阅绝对定位