绝对定位 | 易学教程

绝对定位和相对定位的一些特性

阅读更多关于绝对定位和相对定位的一些特性

position：absolute/fixed优先级最高，有他们在时，float不起作用 postion与display:使用定位属性时，元素的display变成了inline-block，宽度从100%变成了auto postion与z-index:后者必须在定位属性下才会有效 position与overflow:当父元素使用了overflow且没有定位属性时，如果子元素是绝对定位且宽度或高度大于父元素，则oveflow会无效，如果想让父元素能限制子元素的溢出，则父元素必须使用相对定位一、绝对定位绝定对位是相当于最近一个具有定位属性的元素(postion不能为static)来进行偏移，如果没有找到这个元素，则以body作为偏移的基准，绝对定位后会随着页面的滚动而滚动。绝对定位在块级元素上使用和行内元素上使用时有一些比较特殊的地方。块级元素使用绝对定位 1.块级元素在定位前没有指定的宽度的话，默认是100%，但是定位以后宽度变成了auto 2.定位后如果没有指定top或left,此块级元素还是会占据原来的空间 < html > < head > < meta charset ="UTF-8" > < title ></ title > < style > * { margin : 0 ; padding : 0 ; } body { position : relative

CSS 浮动和定位（new）

阅读更多关于 CSS 浮动和定位（new）

CSS浮动 1、网页的布局方式（1）标准流（文档流）排版块级元素垂直排版；行内和行内块级是水平排版；（2）浮动流排版是一种半脱离标准流的排版方式；浮动流只有水平排版，设置相对于父级元素的左对齐或者右对齐，没有 center，不可以使用 margin：0 auto；浮动流不区分块级和行内元素，更类似于行内块级元素的特点，即可水平排版又可以设置宽高；（3）定位流排版 2、浮动（float）（1）浮动元素脱标定义：浮动的元素脱离标准流，像是从标准流里被删除了一样；影响：会造成元素的覆盖问题；（2）浮动元素排序规则相同方向，先浮动的在前；不同方向，左浮找左，右浮找右；元素浮动后的位置与浮动前的位置相关：浮动前在第几行浮动后就在第几行，这里的浮动前的位置是在前面的元素都浮动之后的位置；浮动是有顺序的浮动；（3）浮动贴靠和字围现象贴靠：父元素的宽度不够，浮动元素会逐级往上贴靠，都不够放的话，会一直贴到最上级的父元素；字围：浮动元素不会覆盖文字，文字会自动围绕在浮动元素的周围；（4）浮动在网页排版的应用网页的排版：垂直方向标准流，水平方向浮动流；网页的排版练习清除浮动 –浮动前 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lyNNnl60-1571899607619)(data:image/gif;base64

前端之css

阅读更多关于前端之css

前端之css 1 | 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2 | 0 CSS语 2 | 1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 |2 CSS注释 /*这是注释*/ 注释是代码之母。 3 | 0 CSS的几种引入方式 3 | 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3 | 2 内部样式嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： <head> 　　<meta charset="UTF-8"> 　　<title>Title</title> 　　 <style> 　　　　 p{ background-color: #2b99ff; } 　　 </style> </head> 3 | 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4 | 0

css之定位

阅读更多关于 css之定位

　　css定位属性允许你对元素进行定位，也就是说它允许你定义元素框对于其正常位置应该出现的位置。css有以下三种定位机制：普通流，浮动，绝对定位。下面来分别进行说明：一、普通流　　普通流又称文档流，或者是标准流。指的是文档中可显示的元素在排列时候的开始位置以及它们所占的区域。又因页面中元素的种类不同，所以会按各自的特点去显示。一般是按从上到下，从左到右的顺序输出内容。二、浮动（float）　　1、使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是相邻的浮动元素就会停止。　　2、基本语法:选择器{float:left/right/none} 　　3、特征: 　　　　　a、块元素可以在一行内显示　　　　　b、按照一个指定的方向移动，遇到父级元素的边界或者是相邻的浮动元素就停止　　　　　c、行内支持宽高　　　　　d、脱离文档流　　　　　　　　浮动后面跟的元素（这个元素没有浮动）的位置是从前面浮动元素的的位置开始的。　　　　　　　　如是认为标准流标签元素是在网页平面沿x,y轴布局，那浮动就是增加一维，在z轴上实现布局。标准流标签元素坐标为（x,y,0）浮动元素坐标可看成是（x,y,z）。当x,y相同，浮动元素会覆盖标准流元素。　　　　　　　　注：浮动不是完全脱离文档流，所以非浮动元素里的内容会留出前面浮动元素的位置（盒模型的位置）　　　　　e

CSS

阅读更多关于 CSS

CSS 引入方式行内式 <p style="color: red">这是行内样式</p> 内部样式在head标签里写选择器 <!DOCTYPE html> <html> <head> <title></title> <style> p{ color: red; } </style> </head> <body> <p>这是内部样式</p> </body> </html> 外部引入使用标签引入外部css文件 <link rel="stylesheet" href="css/head.css" /> 选择器基本选择器元素选择器 p{ color: red; } id选择器 #head{ color: red; } 类选择器 .cl{ color: red; } 组合选择器后代选择器（以空格分隔）选取某元素的后代元素 li标签中的a标签 li a{ color: red; } 子元素选择器（以大于号分隔）相比于后代选择器，子元素选择器只能选择作为某元素子元素的元素 div>p{ background-color:yellow; } 兄弟选择器（以~分隔）选取所有指定元素之后的相邻兄弟元素 div~p{ background-color:yellow; } 毗邻兄弟选择器（以加号分隔）选择紧接在另一元素后的元素，且二者有相同父元素 div+p{ background

面试题2

阅读更多关于面试题2

FE-interview 个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习，目录如下，通过文档内搜索目录可快速定位章节 $HTML， HTTP，web 综合问题常见排序算法的时间复杂度,空间复杂度前端需要注意哪些 SEO 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取重要内容不要用 js 输出：爬虫不会执行 js 获取内容少用 iframe：搜索引擎不会抓取 iframe 中的内容非装饰性图片必须加 alt 提高网站速度：网站速度是搜索引擎排序的一个重要指标 web 开发中会话跟踪的方法有哪些 cookie session url 重写隐藏 input ip 地址 <img> 的 title 和 alt 有什么区别 title 是 global

前端css

阅读更多关于前端css

目录前端css 1 css介绍 2 css语法 2.1css实例 2.2css注释 3 css的几种引入方式 3.1行内样式(内联样式表) 3.2内部样式 3.3外部样式 4 css选择器 4.1基本选择器 4.1.1元素选择器 4.1.2 ID选择器 4.1.3类选择器 4.1.4通用选择器 4.2组合选择器 4.2.1后代选择器 4.2.2儿子选择器 4.2.3 毗邻选择器 4.2.4弟弟选择器 4.3 属性选择器 4.4分组和嵌套 4.4.1分组 4.4.2嵌套 4.5伪类选择器 4.6伪元素选择器 4.7选择器的优先级 5 css属性相关 5.1宽和高 5.2字体属性文字字体字体大小字体的粗细（字重）文本颜色 5.3文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5边框 5.6border-radius 5.7display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10padding内填充 5.11 float 三种取值 5.12clear 清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）是否脱离文档流 5.15 z-index 5.16 opacity 综合前端css 1 css介绍

前端之CSS

阅读更多关于前端之CSS

1 | 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2 | 0 CSS语法 2 | 1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 | 2 CSS注释 /* 这是注释 */ 注释是代码之母。 3 | 0 CSS的几种引入方式 3 | 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 < p style ="color: red" > Hello world. </ p > 3 | 2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： < head > 　　 < meta charset ="UTF-8" > 　　 < title > Title </ title > 　　 < style > 　　　　 p { background-color : #2b99ff ; } 　　 </ style > </ head > 3 | 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 < link href =

前端之CSS基础

阅读更多关于前端之CSS基础

前端之CSS 1、 CSS CSS定义如何显示HTML元素。当浏览器读到一个样式表，他就会按照这个样式表来对文档进行格式化（渲染）。 3、CSS语法 1）CSS实例每个CSS由两部分组成：选择器和声明。声明包括属性和属性值，每个声明用分号结束。）CSS注释 /*注释*/ 3、CSS的几种引入方式 1）行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用 <p style="color:red">Hello word.</q> 2)内部样式嵌入式试讲CSS样式集中卸载网页的 <head></head> 表签对的 <style></style> 表钱对中。格式： <head>　　<meta charset="UTF-8">　　<title>Title</title>　　 <style>　　　　 p{ background-color: 2b99ff; }　　 </style></head> 3) 外部样式外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。推荐使用方法。 <link href="mystyle.css" rel="stylesheet" type="text/css/"> 4、CSS选择器 1）基本选择器元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red

前端之CSS

阅读更多关于前端之CSS

前端基础之CSS 1 | 0 css介绍 css(Cascading Stylr Sheet，层叠样式表) 定义如何显示HTML元素当浏览器督导一个样式表，他就会按照这个样式表来对文档进行格式化(渲染) 2 | 0 css语法 2 | 1 css实例每个CSS样式由组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 .2 CSS注释 /*这是注释*/ 注释是代码之母 3 CSS的几种引入方式 3.1 行内样式行内式在标注的style属性中设定CSS样式。不推荐大规模使用。 <p style="color:red"> Hello World!</p> 3.2 内部样式嵌入式是将CSS样式集中写在网页的 > 标签对的 >标签对中。如下 <head> <meta charset = "UTF-8"> <title> Title </title> <style> p{backgroud-color:red;} </style> </head> 3.3 外部样式外部样式就是将CSS写在一个但单独的文件中，然后在页面进行引入即可。推荐使用此方式 <link href="mystyle.css" rel="stylesheet" type="text/css/"/> 4 CSS选择器 4.1 基本选择器元素选择器 p{color:"red";} ID选择器

订阅绝对定位