绝对定位 | 易学教程

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统一设置(简写模式

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

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

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

CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容

阅读更多关于 CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容

CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧，供大家参考。　　CSS兼容常用技巧　　请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，一定要加DOCTYPE声明。　　 1.div的垂直居中问题　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行　　 2. margin加倍的问题　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 　　例如：　　<#div id=”imfloat”> 　　相应的css为　　#imfloat{ 　　float:left; 　　margin:5px; 　　display:inline;} 　　3.浮动ie产生的双倍距离　　#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 　　这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始

CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容

阅读更多关于 CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容

CSS核心内容整理

阅读更多关于 CSS核心内容整理

一. HTML标记与文档结构文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等. 下面这是一个最小的完整HTML模板,一个基本页面必然包含这些标签. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>An HTML Template</title> </head> <body>  </body> </html> 搜索引擎会给title标签中的文字内容赋予很高的权重,这些文字也会作为网页标题出现在搜索结果列表中.不要让"欢迎访问"之类的废话占据你的title标签.使用简洁明确的文字以及读者在搜索你的网页内容时会使用的关键词. 所谓“文档流”的效果,也就是 HTML 元素会按照它们各自在标记中出现的先后顺序,依次从页面上方“流向”下方. 几乎所有 HTML 元素的 display 属性值要么为 block,要么为 inline。最明显的一个例外是 table 元素,它有自己特殊的 display 属性值. 块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列,每个元素分别占一行。而行内元素

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

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

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

css中margin：auto什么意思？margin：auto属性的用法详解

阅读更多关于 css中margin：auto什么意思？margin：auto属性的用法详解

我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以让元素水平居中的原因，要回答这个问题，我们首先需要看一下margin：auto的工作原理。auto如果它适用于垂直居中，那么又是一种什么情况，下面我们来看具体内容。首先auto是做什么的？定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。 “自动”占用可用空间这是我们利用auto最常见的用法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。 1 2 3 < div id = "outer" > < div id = "inner" ></ div > </ div > 1 2 3 4 5 6 7 8 9 10 11 12 13 #inner { margin : auto ; width : 250px ; height : 125px ; background-image : linear-gradient( 45 deg, #84ECEF 10% , #F8F62F 60% , #FDC018 ); } #outer { height : 500px ; width : 500px ; background : #1F1D20 ;

[CSS]CSS Position 详解

阅读更多关于 [CSS]CSS Position 详解

一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。二. position: static static：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。三. position: fixed fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。四. position: relative reletive：元素相对其自己正常位置定位，元素在正常的文档流中。没有设置left和top时的正常位置。设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。五. position: absolute absolute：元素绝对定位，相对于static定位以外的第一个父元素

day41 css

阅读更多关于 day41 css

day41 css 内容回顾 1.定位: 相对定位: 参考点: 相对于自己原来的位置特点: 标准文档流下的相对定位, 如果一个标准文档流的盒子,仅仅设置了相对定位, 与普通的盒子一样设置相对定位之后, 如果调整位置, 会留一个坑在那里作用: 1.做子绝父相的参考 2.微调元素 3.提升层级(不建议) 绝对定位参考点: 父子盒子嵌套, 如果父盒子设置了相对定位, (绝对定位, 固定定位:这两没有实战意义), 那么子盒子都是以父盒子的左上角为参考点单个盒子设置绝对定位, 如果以top描述,以页面的左上角为参考点如果以bottom描述, 以浏览器的左下角为参考点特征: 非标准文档流下的绝对定位脱标提升层级, css建议用这个浮动和定位一起使用时: 浮动通常用做大模块实现并排定位小模块调整位置使用子绝父相文本水平垂直居中: text-align: center; line-height = height; 标准文档流盒子居中: margin: 0 auto; 浮动的盒子居中: 把浮动的盒子外面搞个隐藏的父盒子, 并设置属性 overflow: hidden; margin: 0 auto; 今日内容一.如何让一个绝对定位的盒子居中 left:50%; margin-left: -(负)宽度的一半; <!doctype html> <html lang="en">

订阅绝对定位