绝对定位 | 易学教程

2019前端最全面试题

阅读更多关于 2019前端最全面试题

项目地址 HTML问题 HTML5语义化什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。好处易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。 http://www.daqianduan.com/6549.html 为什么最好把 CSS 的 <link> 标签放在 <head></head> 之间？为什么最好把 JS 的 <script> 标签恰好放在 </body> 之前，有例外情况吗？把 <link> 放在 <head> 中把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。把 <script> 标签恰好放在 </body> 之前脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户

CSS

阅读更多关于 CSS

================转载 https://www.cnblogs.com/yuanchenqi/articles/5977825.html ============== 一、什么是CSS CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现和数据内容分离；二、css的四种引入方式 1、行内式　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出css的优势； <p style="background-color: rebeccapurple">hello yuan</p> 2、嵌入式　　嵌入式是将CSS样式集中卸载网页的<head></head>标签对的<style></style>标签中； <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式　　将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4、导入式　　将一个独立的.css文件引入到HTML文件中，导入式使用CSS规则引入外部CSS文件，

web前端入门到实战：CSS定位

阅读更多关于 web前端入门到实战：CSS定位

一、什么是定位改变元素在页面中的位置二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位三、普通流定位页面中元素的默认定位方式，默认文档流，从上往下，从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行 4、行内元素是多个元素在一行显示，从左往右逐个排列四、浮动定位 1、当元素设置浮动后，该元素脱离默认文档流，后面的元素会上前补位。当前元素会在当前行，向左或者向右排列 float：left、right、none 特点：（1）、元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位（2）、浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘（3）、浮动就是解决多个块级元素在一行显示的问题 2、浮动引发的特殊情况 a、（1）当父元素显示不下所有已浮动元素的时候，显示不下的几个将换行显示，换行显示的规则：优先上浮，之后向左/右对齐（2）浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他后面浮动元素占用 b、元素一旦浮动，如果没有定义宽度，宽度会以内容为准 c、元素一旦浮动起来，就变成了块级元素，可以设置宽高，可以设置上下外边距 d、文本，行内元素，行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素

web前端入门到实战：css绝对定位和相对定位、固定定位

阅读更多关于 web前端入门到实战：css绝对定位和相对定位、固定定位

1、绝对定位 position：absolute；绝对定位指的是通过规定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>定位和布局</title> </head> <style> .big { width: 900px; height: 600px; background-color: black; position: relative; } .box4 { width: 150px; height: 100px; background-color: blue; position: absolute; top: 150px; left: 200px; } </style> <body> <div class="big"> <div

CSS 教程 - 闭合浮动元素

阅读更多关于 CSS 教程 - 闭合浮动元素

　　按照CSS规范，浮动元素(floats)会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。　　因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。　　但是有时我们却需要这种自动闭合行为，具体如何处理呢? 　　有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的(而且通常是无语义的)标签，所以我个人不大喜欢。　　后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。　　再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对IE 做了不同处理(具体就是触发layout)，不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。　　在使用 overflow 之前还有过一种使用 float

转发- css（display，float，position）

阅读更多关于转发- css（display，float，position）

此文章仅为转发，非原创，原文 http://www.cnblogs.com/zhuanggege/p/5778309.html 请支持原创 display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边浮动的目的：就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性任何申明为 float 的元素自动被设置为一个“块级元素” 在标准浏览器中浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该所处的位置如果水平方向上没有足够的空间容纳浮动元素，则转向下一行文字内容会围绕在浮动元素周围浮动元素只能浮动至左侧或者右侧 clear 清除浮动 clear : none | left | right | both none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象

CSS中的三种基本的定位机制

阅读更多关于 CSS中的三种基本的定位机制

CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。一、普通流　　除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。二、定位　　１、相对定位　　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。 <html> <head> <style type="text/css"> .box1{ background-color: red; width:100px; height:100px; } .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class=

.CSS定位详解

阅读更多关于 .CSS定位详解

CSS定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但是却能够形成丰富的表现。一、相对定位：relative 相对定位是相对于自身定位的元素进行定位的，它的参照物就是本身。还有一点，相对定位后的元素依然会占据原来的位置空间，我们可以通过代码来观察它。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位</title> <style> *{ margin: 0px; padding: 0px; } .model1{ position: relative; background-color: aqua; left:200px; } .model2{ position: relative; background-color: blue; } </style> </head> <body> <span class="model1"> Model1 </span> <span class="model2"> Model2 </span> </body> </html> 如图可以看到当前Model1存在的位置，通过代码段我们发现虽然Model1右移了200px

css position

阅读更多关于 css position

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。来源： https://www.cnblogs.com/qianjin888/p/8990754.html

CSS position

阅读更多关于 CSS position

position: 可能的值值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。 Absolute: 絕對定位，如果父級元素，如div，沒有 position，則以瀏覽器的x=0，y=0，為起點，left，top定位。 relative 相對定位：以父級div為頂點來算。如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。来源： https://www.cnblogs.com/liubo175175/p/3151994.html

订阅绝对定位