绝对定位

浮动Float 1、子级浮动，父级塌陷 eg：li浮动，在ul边框下显示，且ul height为0 2、包裹性 若浮动元素没有设置宽度，会折叠到最小宽度 3、元素浮动后，横向的margin会叠加 4、浮动元素影响其他元素位置布局等 5、overflow：hidden，隐藏超出部分。在子级浮动时，可以找回父级的高度。 定位 1、position的默认值是static 2、相对定位：relative 相对自己本来的位置进行移动，原来位置是保留的。 3、绝对定位：absolute 以最近一个非静态的父级元素作为0.0点计算移动位置，会脱离文档流。 4、固定定位：fixed 会脱离常规文档流元素 5、float与absolute、fixed不能同时应用与同一个 6、z-index与relative一起使用，可以使被覆盖的图片显示出来。 来源： http://www.cnblogs.com/f44shijing/p/7670977.html

CSS系列：CSS中盒子的浮动与定位 1. 盒子的浮动 　　在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。 　　CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。 float: left; 　　可以使用clear来清除浮动： clear: left | right | both; 2. 盒子的定位 　　在CSS中有一个position属性，用来进行定位操作。position属性可以设置为4个属性值之一： 　　◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局； 　　◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 　　◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 　　◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时

http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html 任务四：定位和居中问题 HTML 和 CSS 高级指南之二－－定位详解 原文链接 包含浮动 当元素浮动时，一个元素的位置依赖于放置在他周边的其他元素。 浮动问题：一个父元素包含了多个浮动的子元素。 浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为"0"，以及忽略其它的属性。 嵌套的元素不会正确的排列，也会有错误的样式出现。 clear:both 在容器结束标签前添加一个空标签，在空标签上直接设置样式 clear:both 缺点：不太适合语义化，容易造成页面上空标签迅速堆积，页面中没有上下文内容。 overflow 技巧 在具有浮动元素的父容器中设置 overflow 的属性值为 auto 注意： IE6 里父元素需设置 width 和 height IE 会添加滚动条 > 最好直接使用 =overflow:hidden; 优点：父容器就会有一个高度存在 缺点： 子元素会被限制在父元素内 不同的浏览器对 overflow 属性解析不一样 clearfix 技巧 clearfix 技巧是基于父元素上使用 :before 和 :after 两个伪类。 :before

css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现； 2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)； 3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent； 4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。 5. border-width 的值就是底边长和高。 看几个例子： 例1： 图形： 该图形中，只有上方位有边，这个边就是三角形的底边了，底边长为 3.6em(左右相加)，高为 2em。右、下、左没有边。于是 border-top

1、shape-outside的神奇 div{ width:300px; height:300px; shape-outside: circle(); float: left; } 不要以为是方的实际占位内容是个圆圈。 2、display:flow-root;消除浮动影响 <div class="box"> <div class="image"></div> <div class="text"></div> </div> <style> .box{ display:flow-root; } .image{ float:left; } .text{ display:flow-root; } </style> 内容部分也可以设置display:flow-root;看一下效果 3、flex布局下的margin:auto神奇用法 <div class="box"> <div class="text"></div> <div class="text"></div> <div class="text"></div> <div class="text"></div> </div> <style> .box{ display:flex; } .text{ margin:auto; width:20px; height:20px; } </style> 每个模块会自动均分 4

布局，定位 1标准流 1.1HTML标签分类： 块级标签 （独占一行，可以设置宽高） 行级标签（不独占一行，不能设置宽高） 1.2按照标准流进行排列，块级标签从上到下，行级标签从左到右。 display： inline（行级） block（块级） inline-block（行内块级，能够设置宽高） none（隐藏，不占空间） 2举例： 2.1针对行级标签,可以通过display改变成块级显示： Span 设置display为block或inline-block 2.2 针对块级标签，可以修改成行级显示 3 浮动流 float 设置float属性能让标签向左或向右进行浮动，脱离标准流，则标准流中的标签会相应顶上去。 不分块级还是行级 都可以设置宽高。 clear： left right both 能让标签在浮动的过程中不紧贴其他标签。只能影响自己，不影响其他标签。 自己测试span行级标签。 4 定位流 position 4.1 相对定位 relative，结合top right bottom left四个属性确定位置 不会脱离标准流，相对于在标准流的位置进行偏移，所以下面的标签不会顶上来。 4.2 绝对定位 absolute 会脱离标准流，下面标签会顶上来 如果父标签没有定位流（相对，绝对，固定），则绝对定位相对于body标签。 如果父标签有定位流，则绝对定位相对于父标签（就近原则

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

1. 子元素为行内元素时，父元素使用 text-align: center; 实现子元素的水平居中； 2. 子元素为块级元素时， 　　 2.1. 将子元素设置 margin-left:auto; margin-right:auto; 实现居中； 　　 2.2. 将子元素设置 display: inline-block，然后使用text-align:center实现居中； 　　 2.3. 根据父元素采用绝对定位，右移父元素宽度的一半，再左移自身宽度的一半； 3. 父元素使用flex布局， 　　 3.1. 子元素无论是行内还是块级，采用 align-self: center; 实现水平居中； 　　 3.2. 子元素无论是行内还是块级，采用 margin: 0 auto; 实现水平居中； 实例代码如下： <style> * { 　　margin: 0; } 　　.outer-box1{ 　　　　width: 200px; 　　　　height: 200px; 　　　　border: 5px solid black; 　　　　/* 对父元素设置此样式，则其内的行内元素实现居中 */ 　　　　text-align: center; 　　　　position: relative; 　　} 　　.box1{ 　　　　width: 50px; 　　　　height: 50px; 　　　

转载自： https://www.cnblogs.com/Renyi-Fan/p/9206860.html 深入理解CSS溢出overflow 目录 一、总结 一句话总结：overflow用于对溢出内容的处理。 1、overflow有哪5个常用参数，分别是什么意思？ 二、深入理解CSS溢出overflow 前面的话 定义 属性 失效 应用 回到顶部 > 一、总结（点击显示或隐藏总结内容） 一句话总结：overflow用于对溢出内容的处理。 1、overflow有哪5个常用参数，分别是什么意思？ visible | hidden | scroll | auto | inherit visible 元素的内容在元素框之外也可见 auto 如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容 scroll 元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容 hidden 元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见 回到顶部 二、深入理解CSS溢出overflow 回到顶部 前面的话 　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 　　值: visible | hidden | scroll | auto | inherit 　　初始值: visible 　

目录 基本概念 流 块级元素和内联元素 width: auto 和 height: auto 外在盒子和内在盒子 css权重和超越`!important` 盒模型（盒尺寸） 内联盒模型 替换元素 盒模型四大金刚 content padding margin border 好基友`line-height`和`vertical-align` 字母 x 的角色 line-height vertical-align 流的破坏 `float`属性的特性 `clear`的作用和不足 BFC：块级格式化上下文 绝对定位`position: absolute` 层叠规则 层叠上下文 CSS3新增层叠上下文 弹性布局 网格布局 文本控制 `::first-letter` 应用实例 `text-transform` 应用 `word-spacing` 空格间隙 `white-space ` 空白处理 `text-align: justify`（本文重点例子!） 元素的显示与隐藏 元素隐藏方法总结： `display: none`与`visibility: hidden`的区别 基本概念 这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 流 “流”又叫文档流，是css的一种基本定位和布局机制 。流是html的一种抽象概念