绝对定位

CSS圆角——透明圆角化背景图片 序言：第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。 在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！ 还是先看看最终的效果图，让大家有一个大概的印象。 图一 像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。 当然对于一些比较有经验的人员来说，可以采用九宫格布局（可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。

概述 基本概念 层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰 层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式 样式表：各种样式的集合，如字体，颜色，背景，定位等样式 语法 样式表有一个一个样式构成，一个样式包括选择器和声明块 选择器{ 样式名：样式值； 样式名：样式值； 样式名：样式值； } 选择器 　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素 声明块 　　紧跟在选择器后面，用一对 { } 括起来 　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开 　　样式名和样式值用冒号 ： 连接 　　实际上就是一组一组的名值对结构 注释 　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中 　　在 style 标签（style标签是head的子标签） 中只能存放css代码 内联元素、块元素使用原则 一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素 引入方式 内联样式表 将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可 内联样式只对当前元素的内容起作用 内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。 首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。 参考代码如下： <style> #container{ width:400px; height:200px; position: relative; border:1px solid #ccc; margin:300px auto; overflow: hidden; background:seagreen; } .wave{ background:#fff; border-radius:32%; width:500px; height:500px; position:absolute; left:50%; bottom:68px; animation: go 8s infinite linear; } @keyframes go { 0% { transform: translate(-50%, 0) rotateZ(0deg); } 50% { transform: translate(-50%, -2%) rotateZ

CSS中定位元素使用position （分别由两个元素 其一规定元素定位类型 其二规定元素定位位置） 对于其一：分为 static 静态定位、relative相对定位、absolute绝对定位、fixed固定定位 队医其二：属性分别为top、bottom、left、right 一、静态定位static： 元素默认为静态定位，静态定位的唯一作用就是取消定位。 二、相对定位relative： 1.占位置，不会脱离标准流。继续占据原有的位置，元素移动后覆盖其他元素上面 2.位置移动的基准点为自己左上角为基准点 三、绝对定位absolut: 1.绝对定位脱离标准流，不占位置，后面的位置会移动到上面来 2.基准点：若父元素（祖先）没有使用定位（绝对定位、相对定位、固定定位）则以浏览器屏幕左上角为基准点 　　　　 若父元素（祖先）有使用定位，则以父元素的左上角为基准点 通常 说的 子绝父相 的意思是：父元素通常使用相对定位，子元素使用绝对定位。主要原因是父元素通常是盒子，需要占位置，所以使用相对定位，使元素不脱离标准流，后面的元素不会 顶上来，而子元素使用绝对定位，是为了使它可以随意移动位置，且不占位置。 来源： https://www.cnblogs.com/zjfman/p/11454405.html

方法1:左边设置绝对定位，右边设置左外边距，大小和左边的宽度相等 //CSS部分： .contain{ position :relative; height: 300px; } .left{ position: absolute; left: 0; top: 0; width: 200px; height: 300px; background: red; } .right{ /*使用左外边距*/ margin-left: 200px; height: 300px; background: blue; } //html部分： <div class="contain"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div> 方法2：左边设置左浮动，右边隐藏溢出的内容 .contain{ position :relative; height: 300px; } .left{ float: left; width: 300px; height: 300px; background:red; } .right{ overflow: hidden; background: blue; height: 300px; } <div class="contain"> <div class="left">左边定宽</div

1.为什么要学习定位 1.为了解决页面中特殊的页面效果 2.为了元素能够在页面中灵活的进行移动 2.定位的属性 主要包括两部分： 定位模式：static relative absolute fixed 偏移量: top right bottom left 3.静态定位 .box { position: static; } 特点： 1.所有的标签都有静态定位，相当于没有定位 2.静态定位的元素，占据标准流的位置 3.不能使用边偏移改变元素当前的位置 4.也就是说原来怎么样还是怎么样，设置的position跟没写一样。 4.相对定位 .box { position: relative; left: 50px; top: 60px; } 1.相对定位的元素，需要设置属性position:realative;再设置一个边偏移 left /top 2.相对定位的元素不脱离标准流的位置，仍然占据原来的位置 不脱标 3.可以通过偏移量来进行位置的移动 4.是根据自身原来的位置进行的移动 5.相对定位，单纯的自身移动位置，用的并不多。 一般用于限定绝对定位元素的范围。 5.绝对定位 absolute .box { position: absolute; top:100px; left: 100px; } 1.绝对定位的元素，需要设置属性position:absolute

近期会更新一系列博客，对基础知识再度做个巩固和梳理。 一、 position定位 （一）： position的属性 　　 1.absolute：生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位； 　　 2.relative：生成相对定位的元素，相对于其所在普通的文档流位置进行定位； 　　 3.static:默认值，没有定位，元素出现在正常的文档流中; 　　 4.fixed:老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动； 　　 5.sticky:(CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。 （二）：关于 position使用一般会引发的问题 　　 1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位，该元素立马inline-block化，默认宽度就会自适应元素内部宽度，会导致页面的宽高塌陷。 　　 2.由于absolute绝对定位的灵活性，对于普通的页面布局，有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦 （三）： position代码示例 　　 1.relative相对定位。 　　

Html CSS学习（五）position定位 position用来对元素进行定位，其值有以下几种： static：无特殊定位，对象遵循正常文档流，top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixe：对象脱离正常文档流，使用top，right，botton，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。 一、static定位 页面代码如下： <div class="father"> <div class="children"> 子容器1 </div> <div class="children"> 子容器2 </div> </div> CSS代码如下： <style> .father{ width: 200px; height: 300px; border: 1px solid red; } .children{ margin: 10px; width: 150px; height: 100px; border: 1px solid blue; } </style> 页面效果如下：

本文转载于: 猿2048 网站 CSS中水平居中的方法 居中是我们在css中经常遇到的问题，一般有水平居中、垂直居中、垂直水平居中这3种情况，那么今天首先就来对学习到的水平居中的方法做个总结笔记。 css水平居中 text-align:center 它的效果为： 将父元素设置了text-align：center之后，子元素中的文本会表现为水平居中； 为了看得更清楚，我们举一个例子，如图，我们将div2放入div1中，现在，如果我们想让文字在div2中水平居中，那么将它的父元素div2或者（div1）设置为text-align:center即可。因为子元素会继承text-align这个属性。 那么接下来，如果我们想让div2也相对于div1水平居中，应该怎么办呢？既然居中效果只对文本内容和行内元素有效，那我们将div2设置为display：inline-block；我们再来看看效果： 我们看到div2与里面的文字都水平居中了，但是我们发现这一段文字水平居中之后很难看，我们只想让div2水平居中，这也就是这种方法的不足之处，子元素的text-align继承了父元素的center，文字也居中显示，所以我们需要在子元素中设置text-align：left； 这样就变正常啦~ 2. margin：0 auto； margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中

本文转载于: 猿2048 网站 CSS中垂直居中的方法 昨天总结了css中水平居中的方法，今天来总结一下css中实现垂直居中的方法。 line-height line-height用于实现单行文本的垂直居中，如下图中，我们要求单行文本垂直居中，只需要将div2设置行高line-height和height的值相同即可，也可以不用设置高度，因为单行文本的行高会撑开高度，其实二者就是一样的值。 但是这种方法有个不足之处，那就是如果文字内容的长度大于块的宽度时，就有一部分内容脱离了块，因为就不再是单行文本了，所以此方法只适用于单行文本。 还有一个方法就是，如果不设置元素height的情况下，那么本身就是元素包裹着内容，这时候只要将padding-top与padding-bottom设置为相同的值，同样是垂直居中的效果，而且这种方法对多行文本等都通用。 vertical-align：middle ​通过设置vertical-align：middle也可以实现垂直居中，但它有以下几种情况： 如下图，div2中同时又inline和inline-block元素，我们没有给div2设置高度时，它的高度由图片的高度撑开，而且图片和文本显示在一行，但我们发现图片下方有空隙，这是因为inline-block自带vertical-align属性，而且是默认值baseline。现在我们把vertical