绝对定位 | 易学教程

CSS知识总结

阅读更多关于 CSS知识总结

这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: center;align-items: center; 使用 CSS3 transform 父盒子设置: display:relative Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%; 使用 display:table-cell 方法父盒子设置: display:table-cell; text-align:center;vertical-align:middle ; Div 设置: display:inline-block;vertical-align:middle ; 2.position 几个属性的作用 position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。 static:默认位置。在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position

前端基础-css(3)

阅读更多关于前端基础-css(3)

一、文本属性和字体属性（常用） 1、文本属性　　- /*对齐方式*/ 　　　　text-align:left|right|center|justify（两端对齐，只适用于英文）; 　　- /*文本颜色*/ 　　　　color:色值; 　　- /*首行缩进，建议单位用em*/ 　　　　text-indent:2em; 　　- /*文本修饰*/ 　　　　text-decoration:none|underline|overline|line-through|inherit; 　　- /*行高*/ 　　　　line-height:高度值; 2、字体属性　　- /*字体大小（最小12px）*/ 　　　　font-size:数值|inherit；　　- /*字体粗细*/ 　　　　font-weight:normal|bold|border|lighter|100~900|inherit; （100~300没区别）　　- /*字体系列*/ 　　　　font-family: "Microsoft Yahei", "微软雅黑", "Arial"；行高的使用　　(1) 针对单行文本垂直居中　　　　公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。　　(2) 针对多行文本垂直居中　　　　　　行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。　　　

CSS核心内容整理

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

本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页面布局布局可以说是我认为CSS中最重要的东西,CSS本身是个奇怪的东西一直以来有点游离于Coder和非Coder之间的感觉.本身没有严谨的逻辑,而且有很多奇怪的"习惯",这些在布局中都有所体现. 1. 基本布局概念在布局上高度的用处在于细节和内容,整体是由宽度决定的. 首先从多栏布局开始划分,基本上有3种实现方案:固定宽度、流动、弹性. 固定宽度: 固定宽度的含义我就不解释了,我记得我几年前上大学的时候就有很流行的960Grid布局框架,通常固定布局的大小事900到1100,常用的是960因为基本上所有显示器都满足,同时960可以被16,12,10,8,6,5,4整除,易于分栏. 流动布局: 大小会随用户调整浏览器窗口大小而变化.当页面宽度变化的时候,文本和元素间的位置都可能变化.强调一下,有些童鞋以为流动布局就是响应式设计,这是不一样的.通过CSS媒体查询,适应各种宽度的可变固定布局才叫响应式设计,这和流动布局是不一样的. 弹性布局: 估计见过的人不多,效果比较类似于浏览器的放大和缩放功能,比如当浏览器窗口变宽了,那么里面的所有元素都按照一定比例大小变化.这个由于过于复杂,所以实际应用的例子不多. 2. 宽高是完全不一样的

从头开始 — CSS — 垂直居中

阅读更多关于从头开始 — CSS — 垂直居中

事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。本篇文章将介绍比较流行的几种方法。行内块 <body> <div id="ghost"></div> <span> hello </span> </body> #ghost { display: inline-block; height: 20em; vertical-align: middle; } 本质上是利用了内联元素的 vertical-align 属性，通过将此属性置为middle，同一行内的内联元素都将以设置这一属性的内联元素的基线对齐。基于inline-block特有的属性：拥有内联元素的特性同时可以定义宽高，我们可以设置一个ghost行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。当然我们也可以将其它元素置为行内块，再设置宽度并添加text-align使其水平居中。总结一下，此方法太过hack。绝对定位子元素固定宽高 <div id="main"> <div id="child"> hello </div> </div> #main { background-color: green; height: 20em; width: 20em; position: relative; } #child { position:

关于CSS居中问题的一些总结

阅读更多关于关于CSS居中问题的一些总结

前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现第一常用 text-align:center 先将子元素将块级元素改为行内元素，即 display:inline-block 父级元素设置 text-align:center 兼容性： IE6 , IE7 第二使用 table+margin 将子元素设置成块级表格显示类似（<table>）,在设置子框居中以达到水平居中兼容性：不支持 IE6、IE7 <div class="fa"> 父 <div class="ch">子</div> </div> display: table; margin: 0 auto; 第三使用 absolute+transform 将子元素设置为绝对定位，移动子框，使子元素左侧距离相对左侧边框的距离为相对子框宽度的一半，再通过向左移动子框一半宽度以达到水平居中。兼容性：css3属性兼容存在一定问题，高版本需要添加前缀 position: relative; /*父*/ position: absolute; /*子*/ left: 50%; transform:translateX(-50%); 第四使用 flex+margin 通过父级元素flex布局将子框转换为 flex item 再设置子元素水平居中兼容性：不支持 IE6、IE7、IE8

前端基础-css(2)

阅读更多关于前端基础-css(2)

一、标准文档流　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画　　标准文档流下有一些现象，比如空白折叠现象、高矮不齐底边对齐现象等　　标准文档流等级森严，标签分为两种等级：　　　　- 行内元素　　　　- 块级元素。 1、块级元素和行内元素的区别　　行内元素：　　　　a、与其他行内元素并排；　　　　b、不能设置宽、高，默认的宽度，就是文字的宽度；　　块级元素：　　　　a、独占一行，不能与其他任何元素并列；　　　　b、能接受宽、高。如果不设置宽度，那么宽度将默认变为父级的100%； 2、块级元素和行内元素的分类　　在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。　　a、从HTML的角度来讲，标签分为：　　　　文本级标签：p、span、a、b、i、u、em；　　　　容器级标签：div、h系列、li、dt、dd；　　 PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h系列和ul，p里面也不能放p。　　b、现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素；　　　　块级元素

css 包含块

阅读更多关于 css 包含块

指出错误观念许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。下面我们看看盒模型：当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：内容区内边距区边框区外边距区什么是包含块？包含块有分为根元素包含块和其他元素的包含块。根元素包含块根元素html的包含块是一个矩形,叫做初始化包含块(initial containing block)。可以看到html外面还有空间，这个包含html的块就被称为初始包含块(initial containing block)，它是作为元素绝对定位和固定定位的参照物。对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。其他元素的包含块大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样，下面就来学习如何确定这些元素的包含块。如何确定元素的包含块？确定包含块的过程完全依赖于这个包含块的

CSS居中完全指南——构建CSS居中决策树

阅读更多关于 CSS居中完全指南——构建CSS居中决策树

CSS居中完全指南——构建CSS居中决策树本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考 Centering in CSS: A Complete Guide 和【基础】这15种CSS居中的方式，你都用过哪几种本文的引用归原作者所有. 代码在线演示工具 JSbin使用指南 1.Horizontally 水平居中 1.1 inline 或 inline-* 元素水平居中给需要居中的元素一个 block 父元素,需要居中子元素为文本或者 inline , inline-block , inline-table , inline-flex 核心代码 .center-children { text-align: center; } JSbin演示地址效果: 1.2 block 元素水平居中父元素为 block ,子元素也为 bolck ,且子元素设置了宽度 (没宽度子元素就继承父元素宽度,居中没有意义). 无论正在居中块级元素的宽度或父级的宽度如何，都会起作用。方法:子元素 margin: 0 auto; 左右外边距设置为自动填充核心代码 .center-me { margin: 0 auto; } 效果: block 元素水平居中JSbin演示地址 1.3多个 block 元素水平居中 1.3.1 多个

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:

订阅绝对定位