CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...：z-index 只有定位有这属性，绝对定位、固定定位、相对定位 默认值：auto，数字越大，层级越高 可以设置正值或负值，没单位 ---- 过渡: transition 让元素样式慢慢变化，常配合hover...语言扩大 /// inset 内部阴影 ---- 隐藏元素（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示
通过对视觉感知的格式塔原则的了解，例如，邻近性和相似性原则，负空间也可以是一个有效的、优雅的视觉分隔，同时，也让界面设计更加有条不紊。 ?...阴影和体积 阴影和体积，通常是作为展示视觉高度的元素，但也可以作为一种非常有效的分隔符。它们的结合使用，有助于营造页面深度和内容分层，达到自然而和谐的视觉效果。另一方面，它看起来也没有线条那么明显。...餐厅App的菜单屏幕将图像作为视觉分隔元素。 功能类型 视觉分隔器的功能类型取决于其工作的层次结构级别。 实线分隔线 实线分隔线是用于分隔各部分并跨越整个屏幕的分隔线。 ?...电影App在结帐页面上使用实线分隔符。 嵌入式分隔线 嵌入式分隔符用于将与相关内容的项目分开，锚定与应用程序栏标题对齐的元素，或调整到页面上特定类型的文本内容。...例如，收据上的价格之间的分隔线。 ? 出售草药的电子商务网站的产品页面带有中间分隔符，可以清晰地将结账区与产品描述分隔开来。
Position：absolute绝对定位，是相对于谁的定位？ CSS position属性用于指定一个元素在文档中的定位方式。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 2. CSS中，box-sizing属性值有什么用？ 用来控制元素的盒子模型的解析模式，默认为content-box。...和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。...三栏布局中间自适应呢？ 双栏布局 双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在。...absolute absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的
属性选择器 /*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。...选择器的优先级 我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？ ...：方便下面要学的绝对定位元素找到参照物。...可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
拿下举例，我们可以把每个红框都比作一个盒子，他们可以是任意的 HTML 元素。 盒子模型 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...可以看到，这是一个二行二列的表格，我们设置了他的边框是 1px 的红色实线。没有发现这样的表格很丑吗? 因为他的边框让人感到杂乱无章 ，因为每个td都有 4 个边。...那我们可不可以让它相邻的两条边共用同一条边呢 ? 当然可以，让它合并就好。 border-collapse： 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。...解决方案： 尽量只给一个盒子添加 margin 值 2.嵌套块元素垂直外边距的塌陷 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。...还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。 清除内外边距 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。
C.学习点 *结合各种设计趋势，优化报错页面设计 就最近几年的UI/UX 设计潮流而言，色彩对比，渐变，形状以及阴影层级之类设计元素的混用，总是能帮助设计师碰撞出让人眼前一亮的优秀作品。...比如，该报错页面，就结合了珠宝网站的特色，将404报错网站作为另一个展示各类珠宝的平台，让用户即使遇到报错的情况，亦能继续他们的预览，减少网页跳出率。...14.jpg 14.Shremal 404 Page A.设计师: Shremal Patel B.亮点: 通过恰当联想，利用页面讲述一个有趣的故事 设计师使用各种形状，颜色，阴影以及文字，集中讲述着一个故事...究竟怎样才能快速有效地“留住”这些稍纵即逝的页面设计灵感呢？不用担心。...16.png *利用“我的组件库”批量导入图片 当你希望批量导入图片美化报错页面时，也可打开”我的组件库” 功能区，批量导入和添加需要的图片资料。
应用场景： 微调 让后代元素可以使用绝对定位 通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...absolute 绝对定位 参考的对象是父类或祖先元素中有使用了position的最近一个元素。...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。
H5基本框架组成 h5的整个框架也和人是有点相同的，他们也有头，身体与脚。 其中头部呢，包含了定义h5页面、定义当前页面编码、网站标题等元素 绝对定位 position: absolute; 绝对定位 就是先移动到 提供 的位置来 定义自己的位置 的 位置定义是基于绝对定位 的，当我上面代码中给他 设置right（右） 与 bottom（下） 的时候，他就 和绝对定位一样 会先跑道右下角，然后数值为 0 ，也就是右边和下面 不需要增加外边距...，我设置页面高度为5000px，当我拖动页面 固定定位他是不会动的 堆叠顺序（z-index） 定位布局如果出现 重叠 情况就用 z-index 来 调整 布局 盒子默认定位顺序是后面的代码压住前面的代码...，所以使用 display:inline-block 转换为行内块元素，这样就能给出高宽了 阴影 box-shadow：对象和图片阴影 text-shadow：文字阴影 我是文字
一、准备工作 首先创建一个相对定位应用： 接着创建一个页面： 随后我们切换一下屏幕，更改为 PC 端 web，因为手机移动端一般是没有鼠标悬浮事件的： 为了使按钮显示方便观察，我们设置水平和垂直对其为居中...创建一个行，设置宽高分别为 150、50： 我们将该容器作为按钮，那么再设置对应的背景色： 设置完毕后我们需要给予这个按钮一个点击后类似于按钮点击的效果，我们给该按钮设置一个点击事件，点击后那么该按钮会出现一个阴影...1.2 文本添加 一般来说咱们需要在这个按钮内添加对应的文本，是否直接添加就可以了呢？...此时更改行1名称为按钮： 那么若我们需要动效动效，我们需要增加一个绝对定位容器： 添加绝对定位容器后，会使整个页面错乱，并且文本也不好进行定位，此时若需要制作一个动效按钮，我们需要将这个这个绝对定位容器的高度置零...，并且将对应的文本也放入其中，否则绝对定位容器的内容将会影响外部其他元素的定位： 接着，由于整个绝对定位容器的宽度是父容器一样，也是 150，那么按钮水平居中只需要先设置对应的 x 轴中心点位置为
然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。...而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中...（3）绝对定位+transform，translateX可以移动本身元素的50%。
: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式 （口内一个田） justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式... 我是粘性定位!...的属性中，absolute生成绝对定位的元素，是相对于 static 定位以外的第一个父元素进行定位；relative则是生成相对定位的元素，相对于其正常位置进行定位。...，是一个绝对的单位。...可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
为什么要用定位？ 那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟！ 如图， 小黄色块可以再图片上移动： 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。...（相对定位不脱标） 如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。...首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。...他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！...右下角可以拖拽： 右下角不可以拖拽： vertical-align 垂直对齐 以前我们讲过让带有宽度的块级元素居中对齐
继承：是指只定义一次就能将同一样式赋予多个元素的能力。 特殊性：是指让最后一个规则比第一条规则有更高的优先权。应用中，应该避免特殊化！ 分层 z-index属性能够有效地控制绝对定位元素的层叠顺序。...由于绝对定位元素不属于页面的常规文档流，所以默认的控制层叠方法已经不能满足需要。...注释： 绝对定位的本质：一个绝对定位元素会参照它的定位容器元素来定位，如果没有定位容器元素，则会以html根元素为参照。但是如果祖先元素设置了相对定位，绝对定位的子孙元素就会定位在祖先元素内。...若是没有了z-index，绝对定位元素将自下而上层叠，因而在html中先出现的元素会被堆叠于底部，而后出现的元素会被堆叠于上部。 z-index的合法值是从0开始的任意整数。...变宽布局：让内容区域不受限制地（在任何分辨率的屏幕下）填满整个浏览器的显示区域；但是，流式布局在处理比例时存在更大的问题，在宽度发生变化时这种方法甚至变得不可靠！
写页面的速度慢的连我自己都无法想象，一个移动端的页面，我居然调试了一天。按照以前这个复杂的页面我只需要2小时。 可怜弱小又无助。 所以记录一下技能点，以备不时之需。也许下一次写网页又是半年后了呢。...但是这样元素之间的间距就很难控制，一个不小心最后一个元素就会掉到第二行。这个时候我们要用新技术flex来布局，flex的弹性功能我很看好。那么这个布局的好处是什么呢？...然后固定的元素定位absolute定位到这个预留的位置，好了完成了。那如果是flex？一个flex-shrink:1|flex:0 1 auto;即可解决所有问题。...他的原理，简单的说就是在html上设置字体，然后整个页面的字体基准就是来自于html的字体大小，也就是说所有的参照物都是一个，这样方便计算。...:100%}，但是这样会影响其他元素，也许这个页面我只是需要这一个元素100%呢？
缺点是如果样式内容太多，就会让一个简单的标签变得非常的臃肿，不利于代码的维护(一个页面中充斥了大量的HTML代码和CSS代码，混合在一起不方便操作)！... /* 通常情况下，如果元素要使用绝对定位方式[position:absolute]，请切记一定要将它的父元素设置为相对定位方式...如果不给父元素设置定位，子元素的绝对定位就会相对于浏览器进行定位，就会造成网页中的元素的位置错乱。...如果父元素使用的是默认定位：postion:static;，此时子元素的绝对定位是相对于浏览器窗口的定位位置。...如果父元素指定了定位方式为相对定位或者绝对定位 postion:relative | absolute; 此时子元素就会相对于父元素进行定位
一般给body指定整个页面文字的大小。...浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 「2....绝对定位(absolute)」 绝对定位是元素以带有定位的父级元素来移动位置 完全脱表–完全不占位置； 父元素没有定位，则以浏览器为准定位(Document文档)。...、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。...---- CSS高级技巧 元素的显示与隐藏 **目的:**让一个元素在页面中消失或者显示出来 **场景:**类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者购买的呢？...儿子接着说：“以后全靠你让我拼爹了！” [注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。...首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。...但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？ 请看如下图： 所以，我们可以得出如下结论： 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。...他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！
7、position的值relative和absolute定位原点是？ absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。...fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。...一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。...绝对定位中，元素会整体脱离普通流BFC正是属于普通流，因此对兄弟元素也不会造成什么影响。...fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，原来的网页还好好的在那，fixed的内容也没有变过位置，所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的
WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。...值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 2.固定定位 脱离标准流，把元素固定到指定的页面位置，不论浏览器上下怎么翻动...脱离标准流:脱标 什么时候会脱标：浮动会脱标；固定会脱标；绝对会脱标； 语法： 选择器：{ position：absolute; } 1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”...2.如果没有已经定位的祖先元素（如果父级无其他定位），那么会以浏览器窗口为基准进行定位。 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。...然后给outBox设置一个定位，然后再看变化 子绝父相 :子元素是绝对定位，父元素是相对定位； 6.粘性定位 相对定位和固定定位的混合体。
为防止弹性图片随视口拉大超出其原始尺寸，需要为其设置阈值，使用max-width，此条也适用于整个页面，防止其无限制扩张。 ... 用来包裹独立的内容片段 元素用来表示与页面主内容松散相关的内容，经常可用做侧边栏，另外，引文、广告以及导航元素也可以使用它 :如果页面中有一组使用...preserve-3d 添加翻转效果: transform:rotateY(180deg); 翻转后隐藏背面的内容: backface-visibility:hidden; 注意使用绝对定位来造成覆盖...表单中的子区域都使用带有legend标签的fieldset来包裹。 每一个输入元素都有一个label元素与之对应，且一并包含在div中。 ...可以通过给form标签设置该属性来禁用整个表单的自动完成功能。 list属性及其对应的datalist元素可以让用户在输入框中开始输入时，显示一组备选项。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
