绝对定位 | 易学教程

CSS布局：元素垂直居中

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

CSS布局之元素垂直居中本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。一、使用line-height 1.原理有行高的元素，内容会默认显示在行高的垂直中心处，通过设置行高等于父元素的高度，可以达到内容在父元素中垂直居中的效果 2.实现步骤（1）父元素有一个确定的高度（2）在父元素或在子元素中设置line-height等于父元素的高度 3.适用场景（1）具有行高属性的单行元素 Tip：若元素有多行，line-height用同样的原理也可实现，不过需要根据行数计算且容易出错（若父元素宽度变化影响行数，那么就要重新计算布局），这里不推荐使用line-height设置多行居中。 4.完整代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单行元素垂直居中</title> <style> #box { height: 120px; line-height: 120px; /*设置成和父元素同高，对子元素父元素设置都有效*/ border: 2px solid

CSS布局之元素水平居中

阅读更多关于 CSS布局之元素水平居中

CSS布局之元素水平居中本文将依次介绍在不同条件下实现水平居中多种方法一、使用 text-align: center ；适用于块级元素内部的行内元素水平居中（也适用于图片的水平居中）此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 <style> .box{ width: 300px; height: 100px; text-align: center;/*设置子元素内的行内元素水平居中*/ border: 1px solid #222222; } </style> <body> <div class="box"> <p>这是需要水平居中的文字</p> </div> </body> 此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 <style> .box{ /*父元素的盒子*/ text-align:center; } .child { /*子元素的盒子*/ display: inline-block;/*将块级元素转为行内元素实现居中。但不建议，因为转换了元素类型，可能会破坏布局*/ } </style> <body> <div class="box"> <div class="child">这是需要居中的内容<

css之定位

阅读更多关于 css之定位

定位是css当中一种操作html元素布局的方案属性position static：默认值，无特殊定位，对象遵循HTML原则； absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；　　　　　如果不存在这样的父对象，则依据网页进行定位，而其层叠通过z-index属性定义； relative：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义； fixed：类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流； inherit：规定元素的定位方式继承父元素的position的属性值； sticky：粘性定位，该定位基于用户滚动的位置；　　　它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置；定位元素的层级关系z-index auto：默认值。遵循结构，后写的定位元素层的顺序靠上； number：无单位的整数值。可为负数，数值越大，层的顺序越靠上； Tip：此属性仅仅作用于 position 属性值 relative 或 absolute,fixed

css布局之居中

阅读更多关于 css布局之居中

CSS布局之居中本文主要是介绍水平居中，垂直居中，还有水平垂直居中的方法水平居中 1. 行内元素水平居中使用text-align:center;就可以实现行内元素的水平居中，但是记得要在父元素中设置，会对子元素生效。此方法对， inline、inline-block、inline-table、inline-flex 都有效。 .box{ text-align:center; } 此外，如果块级元素包着一个块级元素，那么我们可以设置外部盒子text-align:center;给内部盒子设置display:inline-block;这样也可以使得内部元素居中。但要注意的是，内部盒子已经设置了display:inline-block，就不可以再设置其他的display，所以最好不要使用这种方法。 <div class="parent"> <div class="child"> </div> </div> <style> .parent{ text-align:center; } .child{ display:inline-block } </style> 2. 块级元素水平居中使用margin居中 margin：0 auto;但是使用这种方法，要记得给元素设置宽度，否则不会生效使用absolute+transform absolute 定位，左 50%，然后使用

有关css的兼容问题

阅读更多关于有关css的兼容问题

兼容性 1 页面在不同浏览器中可能显示不同在IE6下子级的宽度会撑开父级设置好的宽度温馨提示：和模型的计算一定要精确，IE浏览器可能显示不同兼容性 2 在IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的快元素添加浮动才可以兼容性 3 在IE6,7下，元素要通过浮动{float：left；}排在同一排，就需要解决：给这个元素都加浮动兼容性 4 注意标签的嵌套规则兼容性 5 在IE6 下，元素的高度如果小于19px的时候，就会当成19px来处理解决方法：overflow：hidden；兼容性 6 在IE6 下不支持1px的dotted边框样式解决：切背景平铺兼容性 7 在IE下大部分兼容性都是因为 haslayout 属性的触发问题，尽量触发 haslayaout 属性可以减少很多IE下兼容性问题在IE下父级有边框的时候，子元素的margin会失效解决：触发父级 haslayout 属性兼容性 8 在IE6下双边距bug 在ie6 块元素，有浮动，有横向 margin的值的时候，横向的margin的值会夸大两倍解决：转换为内敛 display：inline； margin-left 一行中左侧的第一个元素有双边距 margin-right 以行中右侧的第一个兼容性 9 在IE 6 7 下 li 本身没有浮动

CSS中的BFC详解

阅读更多关于 CSS中的BFC详解

一常见定位方案普通流默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。浮动先按普通流位置出现，然后根据浮动方向偏移。绝对定位元素具体位置由绝对定位坐标组成。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、绝对定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex； 4、overflow 除了 visible 以外的值（hidden，auto，scroll）；　　5、body 根元素三、BFC的特性 1.内部的Box会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由margin决定 3.bfc的区域不会与float的元素区域重叠。 4.计算bfc的高度时，浮动元素也参与计算 5.bfc就是页面上的一个独立容器

CSS中margin属性详解

阅读更多关于 CSS中margin属性详解

CSS中margin属性详解 margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位，可以是像素、英寸、毫米或 em。相关属性 margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。属性描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。使用语法 1.使用单独属性设置四边的距离 #d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */ margin-top: 20px; /*上边距为20px*/ margin-right: 30px; /*右边距为30px*/ margin-bottom: 40px; /*下边距40px*/ margin-left: 50px; /*左边距为50px*/ } 效果: ! 2.直接使用margin属性设置所有外边距: #d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */ margin: 20px 30px 40px 50px; /*和上图所示效果完全一样

CSS动画效果

阅读更多关于 CSS动画效果

文章摘自： https://www.cnblogs.com/penghuwan/p/11391215.html#_label1 目录前言一.浮光掠影二.发光球体三.圆环进度条四.三角形五.有色到透明的渐变六.模糊效果和毛玻璃效果七.斜角标签技术总结正文回到顶部前言在本文中我讲述了7种CSS的动效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。回到顶部一.浮光掠影首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。实现思路画一个竖直的长方形的白色div，设置opcity将其变为半透明借助transform:skewX将长方形变成等高的平行四边形白条div绝对定位，外层div相对定位，一开始left属性默认是0 在:hover伪元素中修改left值，例如left=600px（超出图片长度），通过transition指定left和时间，形成过渡图示 HTML <div class="flash"> <div class="flash-bar"></div> <img src="{图片地址}" /> </div> CSS .flash { position: relative; width: 500px;

CSS动效集锦，视觉魔法的碰撞与融合（一）

阅读更多关于 CSS动效集锦，视觉魔法的碰撞与融合（一）

前言在本文中我讲述了7种CSS的动效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。一.浮光掠影首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。实现思路画一个竖直的长方形的白色div，设置opcity将其变为半透明借助transform:skewX将长方形变成等高的平行四边形白条div绝对定位，外层div相对定位，一开始left属性默认是0 在:hover伪元素中修改left值，例如left=600px（超出图片长度），通过transition指定left和时间，形成过渡图示 HTML <div class="flash"> <div class="flash-bar"></div> <img src="{图片地址}" /> </div> CSS .flash { position: relative; width: 500px; } .flash img { width: 100%; } .flash-bar { position: absolute; left:-100px; width: 20px; height: 100%; background: #fff; opacity: 0.5; transform:

CSS学习笔记整理

阅读更多关于 CSS学习笔记整理

div+css布局：div是用于存放内容（文字，图片，元素）的容器 css是用于指定放在div中的内容的位置和外观。使html文件内容减少，html变得简单；内容和样式分离 css可以统一网站风格 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> DOCTYPE：文档类型，用于指定DTD（说明当前这个html文件的版本） < 元素名 background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.5;">属性名：属性值；"/> <style type="text/css"> 这里是内容 </style> 字体：font-size字体大小；font-weight字体粗细；font-style字体风格倾斜；color字体颜色 text-decoration:underline;none; 滤镜技术filter： <style type="text/css"> img{ filter：gray； } </style> 鼠标悬停变回原来颜色 <style type="text

订阅绝对定位