绝对定位：相对于最近的以定位（绝对|固定|相对）的父级元素进行定位，父亲元素都没有定位则相对与document文档定位。...如果决定定位给盒子指定了定位，但是没有给与偏移距离，则盒子以标准流来显示排序，和上个盒子的底边对齐但是不占位置。 （定位适用于消息提示） 布局中的子绝父相的道理。...子盒子绝对定位可以放在父盒子的任意位置不会占用位置。...而父元素在进行布局时，需要占用位置，因此父亲只能是相对定位（相对定位不会脱标，绝对定位会脱标） z-index可以改变定位元素的堆叠顺序，可以取正，负，0.数字越大定位元素在堆叠元素中越居上。...使用注意事项：只能与使用定位的元素配合使用，z-index的值是纯数字没有单位。
标准流 定位和参数 使用 position 实现网页布局 层级关系 一、HTML 中的布局方式 标准流 （默认布局） 浮动 定位 1.1 HTML 中的两大元素 常见块级元素 常见内联元素 div a...两大元素布局演示 块级元素（使用 div） 内联元素的使用 （span） 以上的布局就是我最常见的标准流布局 二、定位布局 2.1 postition 属性 2.1.1 position 属性意义...以游览器四个边角为基准 2.4 fixed 使用 fixed 固定定位的元素不会受其它元素的约束，它也是以游览器的四个边角为基准，但是当页面发生滚动的时候，使用 fixed 定位的元素，会依然在页面中的位置固定不动...，类比 一些广告 这里就不单独演示 固定定位的布局了 接下来看一下 固定定位 和 绝对定位的区别 test 作为子元素，依旧会固定在距离顶部和左边 50px 的位置 2.5 inherit 子元素会继承父元素的定位属性...，父元素的变化，子元素也会相对变化 三、z-index 有了 z-index 我们可以手动指定 层级的优先级 可以设置元素的叠加顺序，但依赖定位属性 z-index大的元素会覆盖z-index小的元素
浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。...父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。...3、 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？ 三种定位方式： relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。...使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。 absolute 绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。...使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏。 4、z-index 有什么作用? 如何使用? 因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。
p=2 默认未设置定位 父元素 宽度最大填充父元素，高度正好容纳子元素。...如果子元素左浮动，则宽度仍在容纳子元素的基础上最大填充父元素，高度正好容纳子元素 如果子元素右浮动，则宽度正好容纳子元素，高度正好容纳子元素 这是因为子元素默认就是独占一行，向左对齐的。...可以通过对父元素overflow:hidden，来实现自身的最大填充 Div块状与浮动 div块状属性是有独占一行的特性，默认是纵向排列，一旦设置float：left，则会以行来横向浮动排列。...隐藏元素 display:none;隐藏元素，不保留物理空间 visibility:hidden;隐藏元素，保留物理空间 定位 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位...覆盖层级 z-index:可以手动调节覆盖的参数，z-index越高越能覆盖其他元素 盒子模型 盒模型主要定义4个区域：内容(content),内边距(padding)，边框(border),外边距(margin
小结： 父元素有定位（相对、绝对、固定），子元素边偏移 从定位父元素 左上角开始 5.2.4 示例 3：祖父和父元素都有定位 示例：祖父和父元素都有定位 小结： 祖父和父都存在定位（相对...祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始 4 、 为了布局方便，更多采取： 子绝父相 6. ...叠放次序：用于给定位元素设置展示效果的优先级。 注意： 1 、 优先级越高，定位元素就越不容易被其他定位元素覆盖 2 、默认的叠放次序为 auto 。...可以理解为 0 格式: z-index : 整数值 ; 准备代码： 示例代码及效果： 小结： 1 、 通过为定位元素设置 z-index ，可以调整定位元素优先级 2...、 仅定位元素才可以设置 z-index ，标准流和浮动设置无效 8.2 定位子元素-水平垂直居中 8.2.1 引言&概念 有时我们存在需要让子元素在父元素中 水平居中的需求，若使用标准流或浮动
如果父元素设置了relative/fix/absolute，那父元素就是绝对定位元素的定位点，如果父元素没有设置relative/fix/absolute，就继续往上找，直到body和html为止。...如果都找不到就是以html根节点为定位点。 所以使用absolute绝对定位的时候，最好在父元素上设置相对定位relative。 ? 设置绝对定位之后，块级元素宽度会收缩，宽度由内容决定。...2、遇到的坑： （1）、父元素z-index值更高，无论其子元素的z-index值大小，都可以覆盖z-index值比父元素小的元素。 （2）、如果z-index的值为auto，不会构成叠层上下文。...如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同级的div1/div2相互叠层。demo ?...（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。
BFC原理（块级格式化上下文） 含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...绝对定位(子绝父相) 这里是父容器 这里是子容器 .father {...px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...：flex；justify-content: center；align-items: center 子元素用绝对定位，上下左右为0，margin：auto，父：relative， 17.如何实现小于
- 浮动和定位。...使用::after 在所有浮动元素之后添加一个空的元素 content: “”;，并设置 clear: both; 和 display: block; 常规做法是添加一个名为 clearfix 类，使得需要让父容器仍然容纳浮动元素时...: 溢出隐藏: 如父容器设置了 height 属性，而子元素超出父容器高度，使用 overflow: hidden 可以隐藏溢出部分 清除浮动: 使用 overflow: hidden 使得父容器仍然包含浮动子元素...(坍塌只针对于父容器的第一个子元素) 定位 虽然之后我们会谈论 Flexbox 和 Grid，但我们仍需要讨论下 position 属性。他是古老布局的基础。...如果绝对定位(position 属性的值为 absolute)的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
c) absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的。...绝对定位一般和相对定位配合使用，父元素设置相对定位，但不设置偏移量（默认为0），子元素设置绝对定位，这样就可以把子元素的偏移控制在父元素之内。...div{ z-index:999; } /*Z-Index 只在设置了 position 属性（非 static）的元素上生效；父元素的 Z-Index 比子元素先生效；*/ 通常情况下，元素的z-index...在定位流中，如果你想调整它们的覆盖关系，你可以设置它们的z-index属性，并且谁的值越大，显示优先级越高。...需要注意的是，如果定位元素的父元素也设置了z-index属性，那么子元素的z-index属性将失效，并且最终是根据父元素的z-index属性来判断覆盖关系。
，但是会影响页面响应速度，不建议使用 样式的两个特性 层叠性：多个选择器设置的样式可以叠加在同一标签上 当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则 继承性：子标签继承父标签的某些样式...hidden|auto : 清除浮动，父盒子自适应子盒子的高 scroll : 清除浮动，左侧和下方加滚动条 定位 将盒子定在页面的某一个位置（漂浮) 定位由两部分组成： 定位模式：相对定位、绝对定位...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置 如果父元素没有定位，则找父级的父级，..…. 。...如果都没有则会以浏览器为准定位 { position:absolute; } 子绝父相 ==子绝父相（口诀)∶子元素使用绝对定位，父元素使用相对定位== 父元素使用相对定位不脱标，更加方便页面布局...子元素使用绝对定位退表，可以在父元素中随意定位。
为100%（以父包含块宽度为准自适应）。...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。...3.当元素设置为绝对定位后，元素也会 多出两类属性：偏移量属性 和 Z-index属性，与相对定位不同的是： 该元素已经脱离了标准文档流（不占位） 建立的定位基准不是该元素的原来位置，而是分两种情况...使用绝对定位ablolute实现横向两列布局 — 常用于一列固定宽度，另一列宽度自适应的情况 主要应用技能： relative—父元素相对定位 absolute—自适应宽度的元素绝对定位 注意：固定宽度列的高度...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）
内容和表现分离 网页结构表现统一，可以实现复用 样式十分丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录！...-- 行内样式：在标签元素内，编写一个style属性，编写样式 优先级 行内>内部>外部 （错误！） 就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？...绝对定位 仍然基于xx定位 position: absolution 没有父级元素定位的前提下，相对浏览器定位 父级元素存在定位，会相对于父级元素进行偏移 在父级元素范围内移动（好像可以出去？）...绝对的，不保留原来位置。 固定定位 position: fixed; 固定定位是固定在某个地方，浏览器向下移动页面也不动； 绝对定位是会动的。...z-index （好像）定位，浮起来，才有层级的关系 0~n级图层，覆盖的问题 z-index: 10; 不透明度 opacity: 0.5; filter: opacity(0.5
父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。 父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。...子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。 这句话的意思是 子级是绝对定位的话， 父级要用相对定位。...就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。...可以得出如下结论： 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。...在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。 定位口诀 —— 子绝父相 刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？...子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！ 疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？...父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。...结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。...案例小结： 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位； 与浮动的对比： 绝对定位：脱标，利用边偏移指定准确位置； 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。
使用- 静态定位static> 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移- 相对定位relative>元素在移动时会以自己原来的位置移动； 原来在标准流中的位置还保留,后面的盒子以标准流对待它...； > 觉得定位不占用原来标准流的位置，即脱标- **子绝父相**：>子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；- 固定定位fixed> 以浏览器的可视窗口为准移动元素...> 与父元素没有任何关系> 不随着滚动条的滚动而滚动> 不占用标准流的位置，是一种特殊的绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位的混合> 已可视窗口为参考点> 占有标准流位置...auto,属性为数字，可以有负值，但没有单位>当都没有z-index属性，按照属性叠放,后来居上- 绝对定位盒子居中： > left和top 设置 父元素宽度50% > margin-left和margin-top...html结构导航栏的实际开发中，不会直接使用连接a,而是使用li包含链接的做法> 直接使用a,搜索引擎会辨别为关键字堆砌，有降权的风险
绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中...margin: 0 auto; （2）绝对定位和margin-left: margin-left: (父width - 子width）/2, 前提是父元素position: relative 对于宽度未知的块级元素...（4）flex布局使用justify-content:center 垂直居中 利用 line-height 实现居中，这种方法适合纯文字类 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过...margin实现自适应居中 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位，子级设置绝对定位，并且通过位移 transform
即在嵌套结构中，不管父元素样式的权重多大，被子元素继 承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。...由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他 子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后，元素会具有行内块元素的特性。...父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。 父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。...子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。 这句话的意思是 子级是绝对定位的话， 父级要用相对定位。...就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。
元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 父级没有定位 父级有定位 子绝父相 定位的扩展 绝对定位的盒子水平/垂直居中 固定定位...绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。 # 父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。...# 父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 # 子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀。...子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。 换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。...因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。 <!
1.2.5 绝对定位一般是配合相对定位使用 1.2.6 提升层级，假设都是定位元素，则后面的元素覆盖前面的元素（后面的层级高） 1.3 ... 父级包不住relative的子级 解决办法：针对IE6、7给父级加上relative 1.10 IE6下绝对定位元素的父级宽度是奇数，...则该子元素right和bottom有1px偏差 解决办法：避免父级宽度出现奇数 1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失... 父级包不住relative的子级 解决办法：针对IE6、7给父级加上relative 1.10 IE6下绝对定位元素的父级宽度是奇数，...则该子元素right和bottom有1px偏差 解决办法：避免父级宽度出现奇数 1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失
向子组件传递数据 *props 的大小写,父组件中的template中属性使用kebab-case,在子组件的props接收时使用camelCase.vue会自动转换....(不在template中使用camelCase的原因是因为html对大小写不敏感) *props 只能实现父到子的单向下行绑定,防止从子组件意外改变父级组件的状态 *不应该在一个子组件内部改变 props...通过事件向父级组件发送消息 *和prop 不同，事件名不存在任何自动化的大小写转换,官方推荐始终使用 kebab-case 的事件名....vuex 官方: 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。...时,请求数据放在data中, 两者可以一起使用 6.是否使用vuex 官方文档: 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
