绝对定位 | 易学教程

CSS垂直水平居中

阅读更多关于 CSS垂直水平居中

本文转载于: 猿2048 网站 CSS垂直水平居中通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。 text-align：center + line-height 如下图，div2中用text-align+line-height实现单行文本水平垂直居中。也可以将div2设置为inline-block实现div垂直水平居中。 text-align：center + vertical-align：middle 如果想让div2在div1中居中，那么需要将父元素设置text-align：center，因为居中效果只对文本内容和行内元素有效，那我们将子元素div2设置为 i nline-block元素，还要将父元素设置为设置为table-cell元素，vertical-align：middle， margin：0 auto+vertical-align：middle margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中，所以将子元素设置为margin：0 auto；再还要将父元素设置为设置为table-cell元素，vertical-align：middle即可绝对定位实现垂直水平居中绝对定位元素垂直水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时

CSS-居中方法汇总

阅读更多关于 CSS-居中方法汇总

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来。水平居中 1.1内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。 .center-text { text-align: center; } 1.2块级元素水平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。 .center-block { margin: 0 auto; } 1.3多块级元素水平居中 1.3.1 利用inline-block 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。 .container { text-align: center; } .inline-block { display: inline-block; } 1.3.2 利用display: flex 利用弹性布局(flex)，实现水平居中

CSS的常用属性（三）

阅读更多关于 CSS的常用属性（三）

本文转载于: 猿2048 网站 CSS的常用属性（三）静态定位 position: static (默认) 标准流绝对定位 position: absolute 特点：元素使用绝对定位之后，不占据原来的位置（脱标）元素使用绝对定位，位置是从浏览器出发嵌套的盒子，父盒子没有使用定位，子盒子使用绝对定位，子盒子位置是从浏览器出发嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素出发行内元素使用绝对定位，转化成行内块元素注意：使用绝对定位的元素可以覆盖到其他元素上面，使用z-index属性来控制堆放次序相对定位 position: relative 特点：使用相对定位，位置从自身出发还占据原来的位置行内元素使用相对定位，不能转成行内块元素补充：常用的定位方式为子绝父相（子元素绝对定位，父元素相对定位）固定定位 position: fixed 特点：位置从浏览器出发固定定位之后，不占据原来的位置（脱标）元素使用固定定位，会转化成行内块元素隐藏元素 overflow: hidden 溢出隐藏 visibility: hidden 隐藏元素(隐藏之后还占据原来位置) display: none 隐藏元素(隐藏之后不占据原来的位置) 补充：内容移除： text-indent: -5000em 或者将元素高度设置为0，使用内边距将盒子撑开

css_居中方式

阅读更多关于 css_居中方式

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面详细介绍这几种情况。一、水平居中 1、行内元素居中顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。 .div1{ text-align:center; } <div class="div1">Hello world</div> 2、块状元素居中（1）、定宽块状元素居中满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。 .div1{　　　　 width:200px;　　　　 border:1px solid red; margin:0 auto; } <div class="div1">Hello world</div> （2）、不定宽块状元素居中在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的

关于CSS的外边距合并问题

阅读更多关于关于CSS的外边距合并问题

本文转载于: 猿2048 网站关于CSS的外边距合并问题　　首先，需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。　　而在普通文档流中，这又分两种情况，分别是父子元素之间和相邻元素之间。　　　　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0 ; padding: 0 ; } #box{ /* border:2px solid red; */ width: 400px; height: 400px; } #img{ width: 40% ; display: block; margin - bottom: 100px; } #img2{ width: 40% ; display: block; margin - top: 50px; } </style> </head> <body> <div id="box"> <img src="1.jpg" id="img"> <img src="1.jpg" id="img2"> </div> </body> </html> 先把代码贴上，引用一张领袖的图片

关于css的总结

阅读更多关于关于css的总结

本文转载于: 猿2048 网站关于css的总结　　写在前面 ,学好css,需要长期的推敲和积累 ,细节是不断完善的,逐渐形成自己的风格让自己的css更加接近优雅. 　　下面来总结一些我觉得比较好的css代码风格 : 　　1. 一般网页中的背景用背景时设置为行内样式 style="background-image: url(img/01.jpg)"; 　　　　这样做有一点好处:图片一般为资源尽量写在html中便于后期维护结构清晰　　　　这样做还有一点要注意:这里应该使用 "background-image" 而不要偷懒写"background",因为行内样式的权重比较高(1000),避免在外联css中设置其他背景属性设置不上; 　　2.左边固定右边自适应　　在布局的时候，比如一些列表页，常常左边是一个固定大小的图，右边剩余部分展示标题，　　方法有两种　　　　1.100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加上100%宽会超出屏幕宽度），代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

CSS学习目录

前面的话　　CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。　　CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从 CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白。　　小火柴将CSS的知识体系进行了梳理和归纳，总结成以下目录基础基础语法　　引入CSS 　　选择器　　选择器新用法　　层叠　　单位　　样式关键字　　 calc() 　　默认可继承样式　　 CSS Why 　　变量Variable 　　属性速查表兼容　　 CSS Hack 　　 CSS兼容性详解　　 haslayout 伪类伪元素　　伪元素　　计数器　　伪类规范　　 CSS reset 　　 CSS命名实践　　 CSS规范　　命名规范　　 CSS编码技巧　

CSS布局：元素水平垂直居中

阅读更多关于 CSS布局：元素水平垂直居中

CSS布局：元素水平垂直居中本文将依次介绍在不同条件下实现水平垂直居中的多种方法水平垂直居中是在写网页时经常会用到的需求，在上两篇博客中，分别介绍了水平居中和垂直居中的方法。本文的水平垂直居中就是将之前的水平居中和垂直居中用到的方法综合起来。用到的原理都是一样的。相信掌握水平居中和垂直居中的方法后，就能自己总结如何实现水平垂直居中 Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。一、使用text-algin和line-height 1.原理使用text-algin属性的center值，实现水平居中。使用line-height属性，使其的值等于父元素的高度，实现垂直居中两者综合实现水平垂直居中 2.适用场景（1）通常用于可以设置行高的元素上 3.实现步骤（1）在父元素上设置文本水平居中 text-algin:center; （2）在子元素上设置行高等于父元素高度 line-height:100px; 4.完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .box {

【CSS属性#2】

阅读更多关于【CSS属性#2】

原文: http://blog.gqylpy.com/gqy/256 目录一、盒子模型二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1. 无定位 static 2. 相对定位 relative 3. 绝对定位 absolute 4. 固定 fixed 八、层叠顺序 z-index 九、透明度 opacit 一、盒子模型 margin ：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的 padding ：用于控制内容与边距之间的距离 Border ：边框，围绕在内边距和内容外的边框 Content ：盒子的内容，显示文本和图像 ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png) 二、外边距 margin 属性描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距简写： ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03

css实现水平垂直居中

阅读更多关于 css实现水平垂直居中

第一种：利用css3的transform和绝对定位 <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> /*消除行内元素的默认边距*/ *{ margin: 0; padding: 0; box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ } body{ background-color: #999; } main{ background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);/*以左上角为圆点向上和左偏移自身宽高50%的距离*/ -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } </style> <body> <main>水平垂直居中</main> </body> </html> 效果如图所示，并且不管如何改变页面的宽高，元素始终水平垂直居中。第二种：利用css3的transform和相对定位使用这种方法必须设置html,body的高度 <!DOCTYPE html

订阅绝对定位