绝对定位 | 易学教程

css垂直居中方案

阅读更多关于 css垂直居中方案

垂直居中的几种方法 html结构 <div class="container"> <div class="item">垂直居中</div> </div> css <style> .container { width: 500px; height: 500px; border: 1px solid #000; position: relative; } </style> 1. 使用flex布局在父容器中设置 .container{ displayy: flex; justify-content: center; align-items: center } 2. 绝对定位分为已知宽高和未知宽高两种情况已知宽高都是100px，设置自身为绝对定位（absolute），top和left为50%，margin-left、margin-top为自身的一半，也就是50px .item { width: 100px; height: 100px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } 未知宽高 /*使用traansform*/ .item { border: 1px solid red; position: absolute

【CSS属性#2】

阅读更多关于【CSS属性#2】

" 目录一、盒子模型二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1. 无定位 static 2. 相对定位 relative 3. 绝对定位 absolute 4. 固定 fixed 八、层叠顺序 z-index 九、透明度 opacit 一、盒子模型 margin ：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的 padding ：用于控制内容与边距之间的距离 Border ：边框，围绕在内边距和内容外的边框 Content ：盒子的内容，显示文本和图像 ![在这里插入图片描述](/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png) 二、外边距 margin 属性描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距简写： ![在这里插入图片描述](/media/ai/2019-03/a92c753d-e79f-44ff-b074-f21181e9f02f.png) 常见居中： ![在这里插入图片描述](/media/ai/2019-03

css 中非常规操作的技巧收集

阅读更多关于 css 中非常规操作的技巧收集

Float 浮动于此相关会形成BFC的情况浮动元素，float 除 none以外的值绝对定位元素，position为absolute/fixed。 display为以下其中之一的值inline-blocks，table，table-cell，table-caption。 overflow除了visible以外的值（hidden，auto，scroll）。 fieldset元素 display: flow-root; 在浮动元素父级display属性设置为 flow-root。还是会受到定位属性的影响。 // 清理浮动 .parent { overflow: scroll; // hidden; clear: both; } // 浮动兼容性处理 .wrapper{ display: flow-root; } @supports not (display:flow-root) { .wrapper::after { content: ''; display: table; clear:both; } } display不常用属性 - flow-root It always establishes a new block formatting context for its contents. 官方解释display设置为这个属性会得到一个BFC空间

web前端入门到实战：CSS页面底部固定的6种方法

阅读更多关于 web前端入门到实战：CSS页面底部固定的6种方法

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位 html <div class="dui-container"> <header>Header</header> <main>Content</main> <footer>Footer</footer> </div> CSS web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频） .dui-container{ position: relative; min-height: 100%; } main { padding-bottom: 100px; } header, footer{ line-height: 100px; height: 100px; } footer{ width: 100%; position: absolute; bottom: 0 } 方法二：在主体content上的下边距增加一个负值等于底部高度 html <header>Header</header> <main>Content</main> <footer>Footer</footer> CSS

html css 笔记

阅读更多关于 html css 笔记

html概述和基本结构相关概述 web 万维网 web前端的构成：结构(html实现),样式(css),行为(js) html 超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 html基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html> html标题标签通过h1 h2 h3 h3 h4 h5 h6 ,标签可以在网页上定义6种级别的标题,h1定义最大的标题，h6定义最小的标题。 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> p标签标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。 <!DOCTYPE html> <html lang="en"> <head> <meta

前端基础——定位

阅读更多关于前端基础——定位

1.绝对定位如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。也可以理解成定位的元素现在相对于 <body> 元素。 2.z-index z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。较高的值将高于较低的值，这取决于您使用的值。使用2和3将产生与300和40000相同的效果。 3. 固定定位还有一种类型的定位覆盖——fixed。这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着您可以创建固定的有用的UI项目，如持久导航菜单。参考资料： MDN 定位来源： https://www.cnblogs.com/songsongblue/p/11368010

CSS相关（1）

阅读更多关于 CSS相关（1）

CSS: 字体：网页默认字体16px; 网站通用字体大小14px 最小是12px，最大无限大单位换算：1em=16px 选择器：标签选择器：选择页面中所有指定标签，权重为1 通配符选择器：选择所有标签,权重为0，类名选择器：标签可以有多个类名，可以重复类名，权重为10 id选择器：唯一性，一个网页只能出现一次，权重为100 并集选择器：连接符是逗号。后代选择器：连接符是空格。多用于嵌套关系的标签直接后代选择器：只能选择子集元素，用>符号分隔文本颜色：color:rgb(255,0,0); color:red; color:#f00; color:rgba(255,0,0,0.5)，a是透明度：a的取值范围是0-1 行高： line-height:当行高和高保持一致的时候，单行文本会上下居中 text-align:left,center,right//左右居中 text-indent:文本缩进，单位em 伪类：例：.box ：hover{} 文本修饰：通常用在a标签上， !important:权重无限大，不要多用背景：背景定位： background：url(pa.png) no-repeat 0px 0px;(背景定位的缩写) background-attach:fixed;//背景附着，不让背景图跟着文档流滑动盒子：（重点）

【CSS属性#2】 -- 2019-08-17 05:21:34

阅读更多关于【CSS属性#2】 -- 2019-08-17 05:21:34

原文: http://blog.gqylpy.com/gqy/256 " 目录一、盒子模型二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1. 无定位 static 2. 相对定位 relative 3. 绝对定位 absolute 4. 固定 fixed 八、层叠顺序 z-index 九、透明度 opacit 一、盒子模型 margin ：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的 padding ：用于控制内容与边距之间的距离 Border ：边框，围绕在内边距和内容外的边框 Content ：盒子的内容，显示文本和图像 ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png) 二、外边距 margin 属性描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距简写： ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03

【CSS属性#2】 -- 2019-08-17 05:14:22

阅读更多关于【CSS属性#2】 -- 2019-08-17 05:14:22

前端-css入门

阅读更多关于前端-css入门

CSS cascading（层叠） style（样式） sheet（表） css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式  <div style="width:100px;height:100px;"></div>  <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head>  <link rel="stylesheet" href="css文件路径" > css选择器　　基本选择器元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选择器后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟弟弟选择器 div~a 找到所有兄弟属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p

订阅绝对定位