绝对定位 | 易学教程

CSS 外边距(margin)重叠及防止方法

阅读更多关于 CSS 外边距(margin)重叠及防止方法

边距重叠解决方案(BFC) 首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文” 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。 4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。 5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。 6、设置了display:inline-block的元素

css进阶

阅读更多关于 css进阶

本文转载自https://blog.csdn.net/xiaogeldx/article/details/85169861 练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> #div1{ width: 350px; height: 450px; border: 1px solid red; margin: into; background: dimgray; } input{ width: 330px; height: 30px; border-radius: 10px; margin-left: 10px; margin-top: 15px; } .a{ width: 195px; height:30px; } .b{ width: 120px; height: 30px; } </style> </head> <body> <div id="div1"> <span style="margin-left: 5px;border-bottom: 5px solid red">请注册</span><a href="#" style="float: right">立即登陆></a> <input type="text" placeholder=

HTML-CSS写抽屉网的置顶区域

阅读更多关于 HTML-CSS写抽屉网的置顶区域

1.在pycharm的已有工程中新建一个html文件。 2.在<body></body>标签内部写入要内容： <div class = 'head-box' > <div class = "content-box" > <a href = "#" class = "logo" ></a> <div class = "action-menu" > <a href = "#" class = "tb active" > 全部 </a> <a href = "#" class = "tb" > 42区 </a> <a href = "#" class = "tb" > 段子 </a> <a href = "#" class = "tb" > ͼƬ </a> <a href = "#" class = "tb" > 挨踢1024 </a> <a href = "#" class = "tb" > 你问我答 </a> </div> <div class = "key-search" > <form action = "" method = "post" > <input type = "text" class = "search-text" > <a href = "#" class = "i" ><span class = "ico" ></span></a> </form> </div>

关于css3的50道常见面试题

阅读更多关于关于css3的50道常见面试题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

3 CSS 定位&浮动

阅读更多关于 3 CSS 定位&浮动

CSS Position（定位）： static定位：静态定位的元素不会受到top,bottom,left,right影响 Fixed定位: 元素的位置相对于浏览器窗口固定即便串口滚动元素也不滚动注： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持 Fixed定位使元素的位置与文档流无关，因此不占据空间 Fixed定位的元素和其他元素重叠。 p.pos_fixed { position:fixed; top:30px; right:5px; } Relative定位：相对定位元素的定位是相对其正常位置，常被用于绝对定位元素的容器块 Absolute定位：绝对定位的元素相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<.html> 注： absolutely定位使元素的位置与文档流无关，因此不占空间 absolutely定位的元素和其他元素重叠 span {display:block;} 来源：博客园作者：原象fxy 链接：https://www.cnblogs.com/ltfxy/p/11484050.html

(前端)html与css css 22、定位

阅读更多关于 (前端)html与css css 22、定位

定位 css布局：盒模型、浮动、定位、这些都是最重要的布局属性。辅助功能属性：a、文本、背景等等，为了让页面更加美观。定位：相对定位、绝对定位、固定定位。概念：元素位置相对于某一参考物进行的位置的偏移。脱标：浮动、绝对定位、固定定位。 1、相对定位相对定位：元素相对于自身进行的位置偏移。 position：定位属性。属性值：relative，相对的。偏移的数据量：方向属性控制，top、right、bottom、left。代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px;

CSS布局(四) 左右布局

阅读更多关于 CSS布局(四) 左右布局

本文是根据网上资料总结出来的文章左边固定，右边自适应的两栏布局。基本样式 <div class="wrapper" id="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br> 基本的样式是，两个div相距20px, 左侧div宽 120px </div> </div> .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; } .left { width: 120px; border: 5px solid #ddd; } .right { margin-left: 20px; border: 5px solid #ddd; } 通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border的宽度。 .wrapper-inline-block { box-sizing:

CSS基础布局

阅读更多关于 CSS基础布局

目录 css基础布局 1、布局相关的标签 2、盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系盒子模型相关CSS属性 3、浮动 3-1 什么是浮动 3-2 设置浮动 3-3 清除浮动 3-4 浮动实验 3-5 浮动相关CSS属性总结 3-6 浮动布局小案例 4、定位 4-1 相对定位 4-2 绝对定位 4-3 固定定位 4-4 空间位置 4-5 定位相关CSS属性总结 css基础布局 1、布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素，没有任何意义 <header></header> HTML5新增定义 section 或 page 的页眉 <footer></footer> HTML5新增定义 section 或 page 的页脚 <main></main> HTML5新增标签规定文档的主要内容。 <main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别 <nav></nav> HTML5新增表示链接导航部分如果文档中有“前后”按钮，则应该把它放到元素中 <section></section> HTML5新增定义文档中的节

CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

阅读更多关于 CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

1. body的height不可少，如body{height:100%}，否则子元素会不认，如果子元素的高直接以百分比写的话，会不显示。因为识别不出来。宽度则不会，因为浏览器的宽度是固定的，高度会滚，不固定。 2. border-sizing其实是将默认的content-sizing转为了老ie的盒子模型如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在一行上 3. display:flex 弹性布局类似于word中的按内容分布表格的意思。按内容来自动分配。为什么在body中定位会失效？ jusitify-content:Center 控制水平居中没有问题但align-items:center 控制垂直居中就失效了因为body没有控制大小和绝对定位！ body { height : 100 % ; width : 100 % ; display : flex ; justify-content : center ; position : absolute ; align-items : center ; } 这里position 必须和height,width一起配合来用，哪个缺少，相应位置上的定位就达不到了。如果是一个普通的div呢？ div { width : 300 px ; height : 230 px ;

使用绝对定位模拟固定定位

阅读更多关于使用绝对定位模拟固定定位

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; } #test{ position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: pink; } </style> </head> <body> <div id="test"> </div> <div style="height: 1000px;"> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> </div> </body> </html> 来源： https://www.cnblogs.com/hack-ing/p/11751530.html

订阅绝对定位