绝对定位 | 易学教程

CSS(5)---通俗讲解盒子模型

阅读更多关于 CSS(5)---通俗讲解盒子模型

CSS(5）---盒子模型盒子模型四个关键字：内容(content) 、填充(padding) 、边框(border) 、边界(margin) ， CSS盒子模式都具备这些属性。一、概念 1、概念盒子的概念就好比你现在网上买了一个苹果手机，那么新手机肯定是放在一个盒子里给你寄来。那么这苹果手机本身就指的是内容（content） , 为了让手机安全寄到会在盒子里放点泡沫这就是填充（padding） , 那么这个盒子本身肯定是有它的宽度的这叫边框（border) , 每个盒子与每个盒子之间的距离叫边界（margin) 。如图 2、元素的宽度和高度重要当您指定一个CSS元素的宽度和高度属性时，实际只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。宽高公式总宽度 = 内容宽度 + padding宽度(左右) + border宽度(左右) + margin宽度(左右) 总高度 = 内容高度 + padding高度(上下) + border高度(上下) + margin高度(上下) 举例求下面的总宽度是多少？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>宽和高</title> <style> div { background-color:

前端进阶系列(二):css常见布局解决方案

阅读更多关于前端进阶系列(二):css常见布局解决方案

水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</div> </div> <style> .child { width: 100px; margin: 0 auto; } </style> 想必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽 table+margin <div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: table; margin: 0 auto; } </style> display:table 在表现上类似 block 元素，但是宽度为内容宽。无需设置父元素样式（支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 <table> inline-block+text-align <div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: inline-block; } .parent { text-align: center; } </style> 兼容性佳（甚至可以兼容IE6和IE7） absolute+margin-left

css-选择器&布局

阅读更多关于 css-选择器&布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box1{ width: 200px; height: 100px; position: relative; border: 1px dashed green; } /*点开头为类选择器 relative是相对定位,absolute是绝对定位，一般父类是相对，子类是绝对 z-index表示堆叠顺序*/ .box2{ width: 100px; height: 50px; position: absolute; border: 1px dashed blue; background-color: red; z-index: -1; top: 20px; left: 20px; } p{ position: fixed; top: 20px; left: 10px } .box3, .box4, .box5, .box6, .box7, .box8{ width: 100px; height: 50px; float: left; } .box3, .box6{ background-color:red; } .box4, .box7{ background-color:gold; } .box5, .box8{

css&html面试知识点

阅读更多关于 css&html面试知识点

CSS优先级算法参考： http://www.bslxx.com/a/miansh... http://www.bslxx.com/a/miansh... http://www.bslxx.com/a/miansh... http://www.bslxx.com/a/miansh... 优先级就近原则，同权重情况下样式定义最近者为准载入样式以最后载入的定位为准优先级为: !important > id > class > tag important 比内联优先级高 important声明比js的优先级要高第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。 css定义的权重 / 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值： /*权重为1*/ div{ } /*权重为10*/ .class1{ } /*权重为100*/ #id1{ } /*权重为100+1=101*/ #id1 div{ } /

CSS Position(定位)

阅读更多关于 CSS Position(定位)

position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。实例 div .static { position: static ; border: 3 px solid #73AD21 ; } 尝试一下 » fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：实例 p .pos _ fixed { position: fixed ; top: 30 px ; right: 5 px ; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 relative 定位相对定位元素的定位是相对其正常位置。实例 h2 .pos _ left { position: relative ; left: - 20

css中float和position属性

阅读更多关于 css中float和position属性

盒子的三种定位形式在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。盒子的浮动在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的指定者也想到了这样排列限制的问题，因此有给出了浮动和定位方式进行盒子的排列从而使排版的灵活性大大提高。例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动属性使盒子在浮动方式下定位。在标准流中，一个块级元素在水平方向自动伸展，在他的父元素中占满一行；而在竖直方向和其他元素依次排列，不能并排，使用浮动方式后，这种排列方式就会发生改变 CSS中有一个float属性，默认值为none,也就是标准流通常的情况，如果将float属性的值设为left或者right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。盒子的浮动主要是排版使用，我们默认DIVtable标签做出来的内容都是2D 浮动的清除 clear是清除浮动属性，它的取值有left

CSS Positioning(定位)

阅读更多关于 CSS Positioning(定位)

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。 Fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed; top:30px; right:5px; } 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 Relative 定位相对定位元素的定位是相对其正常位置。 h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。 h2.pos

css固定元素位置(fixed)

阅读更多关于 css固定元素位置(fixed)

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变，就例如经常看到的弹出广告。方法一般是使用js控制，或者使用css。这里我写的是css的控制方法。在IE7以上版本及firefox、opera、safari里，都支持css属性"position:fixed"，它的作用就是将元素相对于窗口固定位置。代码如下 #ads{ position:fixed; right:0; bottom:0; border:1px solid red; width:300px; height:250px; } 我们定义一个#ads的id样式，并给他设了高度宽度，通过position:fixed以及right、bottom将元素定位在窗口右下角。但是在IE6下，并不支持position:fixed属性，这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的作用大家都很熟悉，相对于父元素进行绝对定位，然后我们可以通过expression来改变#ads的top值。 PS expression的定义： IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas

css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

阅读更多关于 css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

效果图：不管父元素的宽高怎么变化，图片都是水平垂直居中的，并且不溢出父元素。注意：　　img中css属性：position：absolute，margin：auto不能缺少，如果只有top和bottom，则只能实现垂直居中；如果只有left和right，则只能实现水平居中；如果四个都有，能够实现水平垂直居中原理是：　　绝对定位的布局取决于三个因素：一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。　　没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。　　IE7- 的渲染方式不同，渲染规则也不一样，他不会让定位元素去自适应。（这是我之前遇到的一个面试题）来源： https://www.cnblogs.com/ympjsc/p/11802051.html

[分享] 纯CSS完美实现垂直水平居中的6种方式

阅读更多关于 [分享] 纯CSS完美实现垂直水平居中的6种方式

前言由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1、绝对定位+margin：auto <style type="text/css"> .wrp { background-color: #b9b9b9; width: 240px; height: 160px; } .box { color: white; background-color: #3e8e41; width: 200px; height: 120px; overflow: auto; } .wrp1 { position: relative; } .box1 { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> <div class="wrp wrp1"> <div class="box box1"> <h3>完全居中层1：</h3> <h3>开发工具【 WeX5 】：高性能轻架构、开源免费、跨端、可视化</h3> </div> </div> 效果：

订阅绝对定位