position

1.0 定位 在页面中，布局不会首先考虑到定位，而是处理一些难度较大的盒子布局 正常情况下，能使用标准流就不会使用浮动，能使用浮动就不会使用定位 能使用宽高就不用内边距，能使用内边距，就不会用外边距 1.1 静态定位 静态定位一般使用在js特效的时候，会在某个状态下取消定位 使用了静态定位，遍偏移的值会失效，盒子等价于标准流 div { position: static; } 1.2 相对定位 相对定位根据自身的位置去移动，保留自身的位置，不影响其他元素的位置 一般使用在，子元素用了绝对定位，父元素就会加上相对定位 div { position: relative; top: 10px; left: 20px; } 1.3 绝对定位 如果包裹的外层元素没有定位 根据文档的位置去移动，不保留自身的位置（脱标），不影响其他元素的位置 如果包裹的外层元素含有相对定位或者绝对定位 根据含有定位的那个父元素去移动，不保留自身的位置（脱标），不影响其他元素的位置 div { position: absolute; top: 10px; left: 20px; } 1.4 固定定位 固定定位根据浏览器的窗口去移动，不保留自身的位置，不影响其他元素的位置 一般使用在，固定的导航，固定的广告，固定的返回顶部信息，和底部的一些广告 div { position: fixed; top: 10px;

对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。 2017年11月28日更新 对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态 借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。 当<label>元素与单选按钮关联之后，也可以起到触发开关的作用 。 思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式； 2. 然后把真正的单选按钮隐藏起来； 3. 最后把生成内容美化一下。 解决方法： 1. 一段简单的结构代码： <div class="female"> <input type="radio" id="female" name="sex" /> <label for="female">女</label> </div> <div class="male"> <input type="radio" id="male" name="sex" /> <label for="male">男<

首先，我们先确定HTML结构 <div className="wrapper"> <div class="tech-slideshow"> <div class="mover-1"> <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" /> <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" /> </div> <div class="mover-2"> <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" /> <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" /> </div> </div> </div> 然后，我们还需要确定CSS .tech-slideshow { height: 2rem; max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0);

http://blog.csdn.net/Samanthaqu/archive/2007/12/04/1915667.aspx 大鸟 14:18:00 样式表 .fixColleft { z-index:120; left: expression(this.offsetParent.scrollLeft); position: relative } .fixedHeader { overflow: auto;} .fixColleft { } 后台代码： 绑定gridview this.GridView1.Columns[0].HeaderStyle.CssClass = "fixColleft"; this.GridView1.Columns[1].HeaderStyle.CssClass = "fixColleft"; this.GridView1.Columns[0].ItemStyle.CssClass = "fixColleft"; this.GridView1.Columns[1].ItemStyle.CssClass = "fixColleft"; this.GridView1.DataBind(); 大鸟 14:21:46 在页面样式加入: <style type="text/css"> .Freezing { position:relative ; table

http://blog.csdn.net/Samanthaqu/archive/2007/12/04/1915667.aspx 大鸟 14:18:00 样式表 .fixColleft { z-index:120; left: expression(this.offsetParent.scrollLeft); position: relative } .fixedHeader { overflow: auto;} .fixColleft { } 后台代码： 绑定gridview this.GridView1.Columns[0].HeaderStyle.CssClass = "fixColleft"; this.GridView1.Columns[1].HeaderStyle.CssClass = "fixColleft"; this.GridView1.Columns[0].ItemStyle.CssClass = "fixColleft"; this.GridView1.Columns[1].ItemStyle.CssClass = "fixColleft"; this.GridView1.DataBind(); 大鸟 14:21:46 在页面样式加入: <style type="text/css"> .Freezing { position:relative ; table

***以下均是自己边看视频边记录下来的笔记，均是自己认为的主要的或需要注意的内容。*** css3_day04 1.过渡的天坑3 2.不知高宽的元素如何水平垂直居中 3.属性值取百分比 3.1.设置了position属性的元素： 3.1.1.当直接父元素没有设置position，最近的非直接父元素是初始包含块的话 3.2.translate 3.3.background-position 4.过渡的实例：按钮高亮 5.基点变换的实例：时钟 6.position这个属性比较重要，一般放在样式最上面 7. 3D变形 7.1.前端三维的坐标系 7.2. 3D旋转 7.2.1. 景深(perspective) 7.2.1.1. 作为属性的用法（大部分情况都用这种） 7.2.1.2. 作为transform属性值的一个函数的用法 7.2.2. 3D旋转rotate3d(参数1，参数2，参数3，参数4） 7.2.3. 结合7.2.1.1和7.2.2的实例 7.2.4. 3D平移（translateZ） 7.2.5. 3D缩放（scaleZ(number)） 7.2.5. 灭点（景深的原理） 7.2.6. 景深基点 7.2.7. transform-style 7.2.8. 景深叠加 7.2.9. 3d旋转实例：立方体 7.2.10. backface-visibility 7.2.11.

我有一个具有以下结构的网站： <div id="header"></div> <div id="main"> <div id="navigation"></div> <div id="content"></div> </div> <div id="footer"></div> 导航位于左侧，内容div位于右侧。 内容div的信息通过PHP引入，因此每次都不同。 我如何垂直缩放导航，使其高度与内容div的高度相同，无论加载哪个页面？ #1楼 注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 有关现代方法，请参阅： https ： //stackoverflow.com/a/23300532/1155721 我建议你看一下 使用跨浏览器CSS和无黑客的Equal Height Columns 。 基本上，使用CSS以浏览器兼容的方式执行此操作并非易事（但对于表格而言是微不足道的），因此请找到适合您的预打包解决方案。 此外，答案取决于您是想要100％高度还是相同高度。 通常它的高度相等。 如果它是100％高度，答案会略有不同。 #2楼 [在另一个答案中提到Dmity的Less代码]我猜这是某种“伪代码”？ 从我的理解尝试使用应该做的技巧的人造柱技术。 http://www.alistapart.com/articles/fauxcolumns/ 希望这可以帮助 ：） #3楼

静态定位：使元素定位于常规流中 position: static; 1、忽略top,bottom,left,right,z-index。 2、两个相邻元素如果设置了外边距，最终外边距 = 两者外边距最大的。 3、具有 固定的width和height值的元素，如果左右外边距设置成auto，左右外边距会自动扩大占满剩余宽度。造成的效果就是水平居中。 相对定位：使元素成为 containing-block（可定位的祖先元素） position: relative; 1、可以使用top,bottom,left,right,z-index 进行相对定位。 2、相对定位的元素不会离开常规流。 3、任何元素都可以设置relative，它的绝对定位的后代 都可以相对于它 进行绝对定位 4、可以使浮动元素发生偏移，并控制它们的堆叠顺序。 绝对定位：使元素脱离常规流 position: absolute; 1、脱离常规流 2、设置尺寸要注意，百分比比的是最近定位的祖先元素 3、top,bottom,left,right 设置为0，它将对齐到最近定位祖先元素的各边。 4、top,bottom,left,right 设置为auto，它将会打回原形 5、如果没有 最近定位祖先元素，就会 把body当 最近定位祖先元素 6、z-index可以控制堆叠顺序（最高999999） 固定定位： position:

position ：static 静态定位/常规定位/自然定位 作用： 使元素定位于常规流/自然流中 特点： 忽视top、bottom、left、right、z-index，是这些关键字作用失效 如果两个元素都设置了外边距，最终的外边距取决于外边距大的 在具有固定width和height值时的元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余宽度，实现这个块水平居中的效果 案例1（解释第一个特点）： 在这个案例中，有三个盒子，先是按照自然流顺序。 <body> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> </body> 并且给每个盒子加了一个box类。又加了一个相对定位，top为10px。 *{ margin: 0; padding: 0; } .box{ height: 200px; width: 200px; border: 2px solid; text-align: center; line-height: 200px; position: relative; top: 10px; } 效果： 这里先不说加完position：relation；top：10px；是什么意思，其效果就是让每个盒子都下移10px； 然后给第二个盒子加这样一些属性：