③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 如何将一个元素设置为块状元素？ ...如何将一个元素设置为块状元素？ ...如何将一个元素设置为内联块状元素？ ...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置， 或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...并且拖动滚动条时位置固定不变。
在以上的示例中，main-box 用作对主要 div 进行设置，设置其高宽以及其内容水平对齐方式，在此设置水平对齐为居中；随后样式 base-point 用于设置其 main-box 包裹的 div...300px 0： 效果如下： 此时我们还可以使用 百分比定义基点位置： 此时我们可以给予该元素距离定点一定距离，设置基点为中心（其实基点直接说中心点可能较为容易理解）：...二、rotate3d rotate3d：rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。...div 为其他类型元素，在此设置为 display: inline-block;，由于在创建 3d 盒子 时，需要对其内部进行脱离文档流，需要设置其 postion 为 relative，为其具有 3d...这是用于包裹 3d 盒子，在此我们制作3d 盒子是通过对 div 进行翻转，我们需要在这个 div 下创建 6 个 div 表示其 6 个对应的面，并且这 6 个面必须有一定的大小，在此创建一个样式为其设置宽高
默认情况下flex项目按照main轴排列，通过设置，可以让项目按照cross轴排列，示例代码如下所示： 1 div class="container"> 2 div class="box">...200px; 5 /* flex项目按水平排列 */ 6 justify-content:center; 7 } justify-content:flex-start;flex项目在主轴开始位置展示...justify-content:flex-end;flex项目在主轴结束位置展示 justify-content:flex-center;flex项目在主轴居中展示 此前我们将一个元素居中显示，通常将设置元素设置为固定宽度...，然后为其设置属性margin：0 auto;对于宽度不固定的元素，我们只能使用一些奇淫技巧让其居中。...} 8 .box{ 9 border:1px solid #f00; 10 height:50px; 11 } align-items:flex-start;flex项目在交叉轴开始位置展示
关于CSS中position定位： 开始学习的时候简单粗暴的总结了 absolute; 绝对定位（相对于浏览器边界），拉动滚动条，位置随之改变。...fixed 固定位置：相对于浏览器窗口，拉动滚动条，位置不变。 relative 相对定位，相对于该元素本该出现的位置：在原本应该出现的位置偏移。...需注意的是，只要加了position，该元素就和其他元素不在同一层了，原本被挤下去下面的元素就会浮上来。...fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。...简单来说，如果div中没有设置定位，他里面再套一个div设置绝对定位，里面的div不会出现在外面div里面。如果两个div都设置absolute，里面的div就是相对外div来进行定位的。
#2 开始 #2.1 position: static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。...#2.2 position: relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。...绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。 生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。...打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。...在所有情况下（即便被定位元素为 table时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。
inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。 （2）positon 确定元素的位置： static：默认属性值。...float 所带来的影响 1、对自身的影响： 形成“块”（BFC） 位置尽量靠上 位置尽量靠左/右 下面这两个并列的div1和div2，设置为浮动之后的效果：（都是尽量靠左显示的） ?...2、对兄弟元素的影响： 不影响其他块级元素的位置 影响其他块级元素的内部文本 3、对父级元素的影响： 从父级的布局中“消失” 造成父级元素的高度塌陷：父级元素撑开 div1 之后（父级元素里没有其他元素的情况下...），如果设置 div1 为 float 之后，，会让父级元素的高度变为0。...为了去掉这个间隙，可以有几种解决办法： 办法1：设置父元素container的字体大小为0，即font-size: 0，然后设置子元素 div1、div2的字体font-size: 12px。
flex下两列布局左边固定右边宽高自适应 div> div> div class="color">div> 千万小心像对...: fixed; right: 0; top: 0; } 大概就是：什么也不干的情况下只展示box的内容（也就是和不加这些花里胡哨的div一样的效果），它是用background覆盖后面的class为...，第三个元素则写了展示时的“默认大小”：如你所看，box承载的是页面，所以它是100vw，而class为“z_two_page”的元素这里设置了12rem ，你完全可以将这个值换掉！...那如何将“哈哈哈”展示在视野中？—— js控制“代表页面的元素”整体移动即可。...但是本文上面css代码中加了 pointer-events 属性：元素是否穿透；设置为none时就可以不用在意对应元素是否存在了（从事件上看此时有和没有一样了），也就不用控制display什么的，大大增强性能了有木有
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。...fixed固定定位 fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。...从上面的结果来看，固定定位是完全不管父级元素是否设置了定位属性的，直接就与body进行定位偏移。 这种定位方式最适合用于放广告了。...例如当在做一个弹框的时候，需要弹框不被其他任何元素覆盖，那么则可以设置弹框的元素的层级为最高即可。 下面写个示例来理解一下： ?...当然，如果设置弹框不知道其他元素的层级到底多少，则可以设置999之类的最大数值即可，那样就不用被其他元素覆盖了。 定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。
1.2、嵌入式css样式 直接在html标签中写 1 2 3 ...css样式写在此处 4 元素有：、 总结：每一种类型的元素都可以通过代码来设置成其他类型元素，比如你可以使用display:block将元素设置成块级元素，使用display:inline...实际上，块状元素都会以行的形式占据位置。第二，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。...5.2、浮动模型（Float） 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如div、p、table、img等元素都可以被定义为浮动。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
相对定位可以理解为在 HTML 中，元素会依照原有的顺序进行显示，通过相对距离（例如左右距离多少）的方式使这些元素进行位置的显示。...而定位就是指对某个元素显示于在文档流（页面）中的某个位置，又或使某个元素脱离文档流进行显示，而在此所属的脱离则是表示某元素不存在于文档流中，具体是如何咱们接下来详细说明。...：使用 relative 后，即时发生了偏移覆盖掉了（以上示例情况）其他元素，其本身所占的位置依旧占据，例如如下示例： 固定于窗口的定位 在定位为 fixed 时，该div 将会悬浮于整个文档流内容之上，例如在浏览一些网页时，某些可视区域（例如导航、搜索、广告等）将会一直固定于页面之上，示例如下： div ，其效果如下： 使用了 fixed 定位后，其元素将会固定于页面之上，而且不管你是否设置 fixed 在何位置，其效果都是一致的，例如： 在效果演示中还可以看到，
如何让一个元素从一个固定的位置通过拖拽，停留在另外一个位置？...在 HTML5 中，给标签新增了一个 draggable 属性，设置为 true 后，即可实现元素的拖拽效果。...CodePen Demo -- HTML draggable Demo 实现元素从位置A到位置B的移动 OK，接下来的难点就在于，如何将元素从位置A移动到位置B。...**设置短一点，譬如都设置为 2s 的话 transition: 2s 2s，效果如下： 这样，你应该能大致理解发生了什么了。...我们需要通过事件的冒泡，当开始拖拽 .g-box 元素本身的时候，才让我们的触发器显现，并且设置一个极为短暂的停留时间，这样让鼠标放下的一瞬间，触发元素的复位。 什么意思呢？
：relative;} 它是相对于自己原本的位置进行移动 它在移动之后，在标准流中仍旧占有原本的位置（即移动之后，原本位置仍旧保留，其他标准流无法占用该位置） 它在移动之后，在其他位置时，属于覆盖在其他盒子之上... fix固定定位 固定定位是元素固定于浏览器可视区的位置，主要应用于：在浏览器页面滚动时元素位置不发生改变 语法： 选择器{position：fix；} 以浏览器的可视窗口为参照点移动元素...和父元素没有任何关系 不随滚动条滚动 固定定位不占有原有位置 fixed小技巧： 我们希望使fix内容紧贴版心右侧固定不变 那么我们就可以使fix的位置left在浏览器宽的的一半，然后设置margin-left...语法： 选择器{position：sticky；} 以浏览器的可视窗口为参照点移动元素（固定定位特点） 粘性定位占有原先的位置（相对定位特点） 需要有top，left，right，bottom中其中一个控制滞停位置才可以生效...>div> 定位特殊特性 下面我们给出一些定位特殊特性： 行内元素用绝对或固定定位时： 可以直接设置高宽 块级元素用绝对或固定定位时： 若不设置高宽，元素大小默认等于内容大小
.avatar { top: 3px; //从上到下偏移3px left: 7px; //从左到右偏移7px position: relative; } 相对定位是没有脱离普通文档流的，对于页面其他元素...三、z-index z-index详细介绍 1、z-index 定义： 属性设置元素的堆叠顺序，该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。...如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同级的div1/div2相互叠层。demo ?...（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。...四、固定定位 position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。 比如说浏览器右边 回到顶部的按钮就是采用的固定定位。
2、html元素：div>元素内容div>（开始与结束标签加上内容）。 3、一般的html标签都有开始和结束标签，但是有些是空标签，即没有结束标签和元素内容。...默认情况下绝对定位是相对于body这个元素进行定位的，但是如果离他最近的一个祖先元素有设置position为absolute或者relative。那么他就相对于这个祖先元素进行定位。...即设置了TRBL后，他原来的位置就分别在他现在这个位置的TRBL多少值。譬如left：100px; 那么他原来的位置就在他现在的位置左边100px处。当然还有其他说法，童鞋们自己领悟。...20、浮动：浮动是脱离文档流的，所以他不会占有原来的地方，默认的z-index值大于 其他未设置浮动的元素，所以有时候会遮挡住其他元素，float：left默认情况下会向网页左上角靠拢，只要前面没有元素挡住他...大家可以把他想象成空气，而其他未设置为浮动的元素则想象成方块石头，石头挡得住空气，而空气挡不住石头。童鞋们自己试试，从而领悟出其他元素与浮动元素在网页中的关系。
可以使用类选择器列表方法为一个元素同时设置多个样式 子选择器(>) 用于选择指定标签元素下的第一代子元素。...每个块级元素都从新的一行开始，并且其后的元素也另起一行。 2. 元素的高度、宽度、行高以及顶和底边距离都可设置。 3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度。...设置display:block就是将元素显示为块级元素 内联元素 display:inline将元素设置为内联元素 特点： 1. 和其他元素都在一行上 2. ...在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布。 总结：html默认使用flow，流动，所有的内容都是应用在此之上。...由于视图本身是固定的，它不会随浏览器窗口的滚动条而变化，因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。
为了方便浏览器自动计算某些样式，需全局设置box-sizing:border-box，编码前请引入笔者整理的reset.css。 主体布局 「主体布局」指在大部分情况下通用且具备统一特征的占位布局。...通过绝对定位的方式将三部分固定在特定位置，使其互不影响。...在此直接上一个目前最简单最高效的居中方式。display:flex与margin:auto的强行组合，同学们自行体会。...这样组合让特殊位置的节点直接减少属性覆盖的问题，不仅易读还能装逼。...在此笔者借这次机会将:nth-child()所有用法总结下，n/x/y代表正整数，最小值为1。
---- 取色方式 网页里的颜色，可以在chrome的调试模式下获取 其他颜色可以使用QQ的截图软件： 直接按c键，可以复制rgb颜色值 按住shift再按c键，可以复制16进制颜色值 ---- 4.文本...relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。...偏移值不会影响任何其他元素的位置。 div> A Andrew W.K....---- align-items CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。...，即固定在在浏览器上，即使窗口是滚动的它也不会移动 Fixed定位使元素的位置与文档流无关，因此不占据空间 如图，给绿色的div添加固定定位后，不会随着屏幕的滚动而发生变化，绿色的div固定在了图中的位置...设置完定位以后，元素会随着设置的值发生变化，但是最初所占的位置还在，不会被下面元素顶上去 语法： 选择器：{ position：relative; } 如果只对相对定位设置定位值，那么参照的原点是元素本身的左上角为原点...如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传...是绿色div的父元素，给绿色div加一个absolute属性，如果绿色div的父元素没有添加任何定位，那么移动绿色div的坐标原点将从浏览器的左上角开始，如果绿div的父元素有任意定位，那么以该定位的父元素的左上角原点为标准
：relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流...-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定...语法 属性：position 取值：absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定 5、固定定位 fixed 将元素固定在页面的某个位置处...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素的高度 优势：极其简单 弊端：必须要知道父元素高度是多少...方案4 为父元素设置overflow属性 取值：hidden 或 auto 优势：简单，代码量少 弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏 方案5 父元素设置display:table
云服务器
ICP备案
实时音视频
对象存储
云直播
