绝对定位 | 易学教程

中高级前端面试秘籍，助你直通大厂(一)

阅读更多关于中高级前端面试秘籍，助你直通大厂(一)

引言又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十，经过一场惨烈的江湖厮杀后，相信有很多小伙伴儿已经找到了自己心仪的工作，也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀，这里提前记录一下自己平时遇到和总结的一些知识点，自己巩固复习加强基础的同时也希望能在你的江湖路上对你有所帮助。笔者在入职最近这家公司之前也曾有过长达3个月的闭关修炼期，期间查阅资料无数，阅读过很多文章，但总结下来真正让你印象深刻的，不是那些前沿充满神秘感的新技术，也不是为了提升代码逼格的奇淫巧技，而是那些我们经常由于项目周期紧而容易忽略的基础知识。所谓万丈高楼平地起，只有你的地基打得足够牢固，你才有搭建万丈高楼的底气，你才能在你的前端人生路上越走越远。这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。 1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型

css的浮动

阅读更多关于 css的浮动

定位postion是css的属性之一方向的属性值都是 length relative 相对定位 absolute 绝对定位 Margin:10px 20px 30px 40px; 代表上右下左。 Margin:10px 20px 30px 代表上左右下。 Margin:10px 20px; 代表上下左右 Margin ： 10px; 代表上右下左。 adding 和 margin 的简写一样 1.标准流下，垂直方向的 margin 不叠加，以最大的为准。如果不在标准流下， margin 会叠加。 2.Margin 最好不要用在父子元素之间，用在兄弟元素之间。父子之间最好用 padding 。来源： https://www.cnblogs.com/chuliwei/p/11933090.html

css 关于浮动float的使用以及清除浮动

阅读更多关于 css 关于浮动float的使用以及清除浮动

float ：none | left | right 默认值：none 适用于：所有元素 none：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即 display 属性等于block。也就是说，浮动对象的display特性将被忽略。 float在绝对定位和 display 为none时不会被应用。什么时候用浮动？--让元素变成一行，水平布局时、需要文本环绕效果时浮动的特点，半脱离文档流，且会对后面的元素产生影响。 1、父级没有设置高度的时候，会出现塌陷 2、父级的宽度不够，会换行排列 3、改变元素类型变成行内块清除浮动float的三种方法对后面的元素进行操作。给后面元素添加，clear：both; 1.1额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） 2触发BFC效果。通过触发BFC方式，实现清除浮动父级添加overflow属性（父元素添加overflow:hidden）（不推荐） 3对父元素进行操作. 3.1父级添加overflow属性（父元素添加overflow:hidden）（不推荐） 3.2使用after伪元素清除浮动（推荐使用） 3.3使用before和after双伪元素清除浮动来源： https:

相对定位与绝对定位的分析测试

阅读更多关于相对定位与绝对定位的分析测试

相对定位与绝对定位在我们制作网页的过程中应用很频繁。但对于其具体作用的深度分析我们也是一知半解，只管怎么用，不管为什么这么用。这次，作为前端萌新的我，对二者进行了如下分析与测试，如有错误，欢迎指导讨教。相对定位与绝对定位在被定位时。相对定位是相对于自身定位的，且在文本流中保留其原本的位置。而绝对定位是相对于父级定位的，但前提是父级也必须定位，如果父级没有定位，那么子级就会寻找祖父级（即父级的父级）定位，如果祖父也没有定位，那就寻找祖父的父级，如果祖父的父级都没有定位，那就寻找body进行定位。简单说，绝对定位采用就近原则来定位，相对定位选择自身原本所在位置定位。说了这么多，如果还不明白，那咋们举个例子：没定位之前： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one { background-color: red; width: 200px; height: 200px; } .two { background-color: blue; width: 100px; height: 100px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <

CSS的浮动及其在布局中的应用

阅读更多关于 CSS的浮动及其在布局中的应用

CSS浮动是什么 CSS中浮动属性(float)设计的初衷是为了解决页面展示样式时需要文字环绕图片的场景；类似于Word中的文字环绕属性，基础使用场景如下: 浮动前: 浮动后: 代码实现如下(简化版) <style> img{ float:left; } </style> <div> <img src="xxx.jpg" alt="test"> <p>xxx</p> </div> 浮动带来的问题--高度塌陷由于设置了float后元素脱离了标准流，从而导致了高度的塌陷，这里有一个很直观的例子浮动前浮动后高度塌陷带来的问题当出现高度塌陷后原本想放在下面的元素会自动向上补充，出现这种结果演示代码 <style type="text/css"> .div1{ height:100px; width:100px; background:blue; float:left; } .div2{ height:10px; width:300px; background:red; } </style> <main> <div class="div1"></div> <p>这里是一个段落</p> </main> <div class="div2"></div> 如何解决塌陷--清除浮动清除浮动主流方法有两种:1）使用clear属性清除浮动；2）新建BFC 利用clear属性方式一

css的position属性

阅读更多关于 css的position属性

Html css position属性 position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> </head> <style> /*绝对定位*/ div.pos_abs{ position:absolute; left:100px; top:150px; width:200px; height:200px; background-color:black; color:white; text-align:center; } div{ border:2px solid black; } </style> <body> <div class="pos_abs"> 这是一个绝对定位的盒子 </div> <div> 通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px. </div> </body> </html> 我们

中高级前端面试秘籍，助你直通大厂(一)

阅读更多关于中高级前端面试秘籍，助你直通大厂(一)

好程序员web前端教程分享web中CSS绝对定位

阅读更多关于好程序员web前端教程分享web中CSS绝对定位

　　今天好程序员web前端教程为大家分享web中CSS绝对定位的教程　　绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。　　普通流中其它元素的布局就像绝对定位的元素不存在一样：　　#box_relative{ 　　position:absolute; 　　left:30px; 　　top:20px; 　　} 　　如下图所示：　　绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。　　对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。　　注释：根据用户代理的不同，最初的包含块可能是画布或HTML元素。　　提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。来源： oschina 链接： https://my.oschina.net/u/4177020/blog/3133497

css-基础

阅读更多关于 css-基础

1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。 CSS盒模型可以看成是由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。内容区是盒子模型的中心，呈现盒子的主要信息内容；内边距是内容区和边框之间的空间；边框是环绕内容区和内边距的边界；外边距位于盒子的最外围，是添加在边框外周围的空间。根据计算宽高的区域我们可以将其分为 IE盒模型和 W3C标准盒模型，可以通过 box-sizing 来进行设置： content-box ：W3C标准盒模型 border-box ：IE盒模型区别： W3C标准盒模型：width(宽度) = content(内容宽度) IE盒模型：width(宽度) = content(内容宽度) + padding(内边距) + border(边框) 2. BFC BFC即Block Fromatting Context(块级格式化上下文)

css学习之路(三)三大重点

阅读更多关于 css学习之路(三)三大重点

一、盒子模型　　引言:类似于面向对象编程里面的万物皆对象，在html里万物皆盒子，也就是每一个html标签都可以看作一个盒子模型　　盒子模型有四个组成部分，（盒子里面的内容信息、内边距、盒子的边框、外边距) 　　对于盒子里面的内部信息这里不过多解释，因为内容可能是文本、图片、按钮等等　　1.盒子的边框（border）　　　　常用属性: 　　　　　　1.1border-width　　定义边框粗细，单位是px 　　　　　　1.2border-style　　边框的样式　　　　　　　　1.2.1常用边框值以及其对应的含义　　　　　　　　　　none：没有边框即忽略所有边框的宽度（默认值）　　　　　　　　　　solid：边框为单实线(最为常用的) 　　　　　　　　　　dashed：边框为虚线　　　　　　　　　　dotted：边框为点线　　　　　　1.3border-color　　边框颜色　　　　例子:border: 1px solid red;（说明:边框是粗细为1px的红色单实线）　　　　上面的写法是给盒子四周的边框同时设置样式，也可以单独给上下左右的某一个边框设置样式，属性名参见 border-top-style，值的设置依旧跟上面的写法一样　　2.内边距（padding）是盒子的内容跟边框之间的距离　　　　设置方式：　　　　　　2.1统一设置(简写模式

订阅绝对定位