绝对定位使用hidden可防止脱标

2024-11-05

定位方式及CSS高级技巧

定位 background-position 背景位置浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分. 1.边偏移边偏移属性描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 left 左侧偏移量,定义元素相对于其父元素左边线的距离 right 右侧偏移量,定义元素相对于其父元素右

CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动

一.css文档流布局概念 1.1,什么是标准文档流 1.2,标准文档流下有哪些微观现象二.CSS---position属性 2.1,position:relative 2.2,position:fixed 2.3,position:absolute 2.3.1,父默认(static)子绝 2.3.2,父相(relative)子绝 2.3.3,父固(fixed)子绝 2.3.4,父绝(absolute)子绝 2.4,z-index特性三.CSS之float属性 3.1,浮动的特性 3.2,浮动

李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作用: >解决文字图片环绕问题 >制作网页导航栏 >网页布局清除浮动: 清除浮动的影响定位的分类: 1.2定位静态定位(static) 绝对定位(absolute)看脸型 >绝对定位绝对脱标 >行内元素转化为行内块元素 >如果父盒子没有设置定位,以浏览器左上角为基准设

CSS.05 -- 规避脱标定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

规避脱标定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 Margin-right:auto: 定位的盒子剧中先左右走父元素盒子的一半50%,在向左走盒子的一半(margin-left:负值) 步骤: 设置父盒子为相对定位 / 设置盒子left 值为父盒子宽度一半 / 设置子盒子左边距为自己宽度一半 CSS标签包含规范规范: 行内元素尽量包

CSS 规避脱标之两种用法

大家好,我是小强老师,今天讲解一小点知识哈对比了才知道什么好看不出,很漂亮吧! 有木有倾国倾城的美色. 呵呵,好多东西也是这样的,好的东西只有对比了才觉得好. 我们知道我们网页布局有三模式. 普通流 normal flow (标准流.常规流) 浮动(float) 和定位 (position) 标准流标准流实际上就是一个网页内标签元素正常排列的顺序的意思:比如块级元素会独占一行,行内元素会按顺序依次前后排列:按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布

H5 59-浮动元素的脱标

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>59-浮动元素的脱标</title> <style> .box1{ float: left; width: 100px; height: 100px; background-color: red; } .box2{ width: 150px; h

CSS——规避脱标流和vertical-align

规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box1 { width: 500px; height: 200px; background-c

HTML连载45-浮动元素脱标、排序规则、贴靠现象

一.浮动元素脱标 1.什么是浮动元素脱标脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响如果前面一个元素浮动了,而后面的一个元素没有浮动,那么这个时候前面的一个元素就会盖住后面的一个元素.前后如果反了没事举例: <style> .box1{ float:left; width:50px; height: 50px; background-color: red; } .box2{ /*float:left;*/ widt

前端之CSS——属性和定位

一.字体属性 1.font-size(字体大小) p { font-size: 14px; } font-size 属性可设置字体的尺寸. px:像素,稳定和精确 %:把 font-size 设置为基于父元素的一个百分比值,布局时用到. em:移动端字体样式大小,相对于其父元素来设置字体大小 rem:可以换算为各种移动端,相对于根元素来设置字体大小 2.font-weight(字体粗细) font-weight字重,可用来调整字体粗细. /*font-weight: normal;*/ /*fo

css查缺补漏2

15.布局流程一.确定页面的版心; 二.确定页面中的行模块,以及每个页面中的列模块三.制作HTML结构例:.top+.banner+(.main>.left+.right)+.footer 高度剩余法:高度直接设置成-想用的margin的值,就能省略margin 16.消除浮动 <div class="fat"> <div class="big"></div> <div class="son"

CSS定位中“父相子绝”

一.定位的介绍定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2.1.相对定位特性:不脱标.形影分离.老家留坑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l

000 (H5*) 知识点总结

https://note.youdao.com/ynoteshare1/index.html?id=ff02e616917fba868f39241c8383d7c7&type=note 目录 1:闭包 2:游览器渲染原理 3:原型链 4:this 5:数据类型 6:继承 7:数组方法 8:call.apply.bind 9:promise 异步 10:深浅拷贝 11:函数节流 12:事件代理13:let const var 14:ES6新特性 15:CSS布局 16:rem.px.em单位

CSS（2）之重新认识 CSS3 新特性

CSS3选择器(全) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素伪类选择器 :link :visited :hover :active :focus 结构伪类选择器 :first-child{} :last-child{} :nth-child(n){} 属性选择器 E[attr] 属性名,不确定具体属性值 E[attr=”value”] 指定属性名,并指定其对应属性值 E[attr ~=”value”] 指定属性名,找到的是具有此属

005：CSS三大重点之三：定位

目录 1:定位模式和边偏移 2:定位模式静态定位相对定位:移动位置:脱标.占位置绝对定位:脱标.占有位置. 拼爹型子绝父相固定定位:脱标.占有位置. 3:定位模式转换 3:z-index 前言理论一:元素的定位属性 1:元素的定位属性主要包括定位模式和边偏移两部分. 1.1: 边偏移 | 边偏移属性 | 描述 | | ------ | ----------------------- | | top | 顶端偏移量,定义元素相对于其父

CSS -- 盒子模型 margin 的特点

margin在使用过程中具有如下的两个特点: 1.垂直外边距塌陷 --给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置解决方式: 给父元素设置边框给父元素设置overflow:hidden; 让子元素脱标(浮动| 定位) 2. 垂直外边距合并 --如果给元素设置上下margin,那么最后的margin值会以最大值为准解释: 如果有上下两个盒子,给上面盒子设置margin-bottom:100px;给下面的盒子设置margin-top:50px;那么两个盒

day42-43 绝对定位相对定位

一.超链接导航栏案例 html结构 <div class="nav"> <ul> <li> <a href="">路飞学城</a> </li> <li> <a href="">老男孩</a> </li> <li> <a href="">网站导航</a> </li>

CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动.浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象. 1.1.2 大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了.所有浮动的标签不会去区分行内标签和块

Day042---浮动背景图设置相对定位绝对定位

1.练习浮动 2.文本属性和字体属性文本对齐 text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐只适应于英文 text-indent 首行缩进建议单位使用em text-decoration: underline 下划线 text-decoration:none; 无线文本垂直居中单行文本行高== 盒子的高度多行文本 padding-top = (height-行数* 行高)/2,并且减掉盒子的高度 3.backgr

前端CSS - 相对定位,绝对定位,固定定位

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离相对定位不脱标,真实位置是在老家,只不过影子出去

WEB学习 -相对定位、绝对定位、固定定位、z-index

相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用途相对定位有坑,所以一般不用于做“压盖”效果.页面中,效果极小.就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说) .相对定位的定位值可以用left.right来描述盒子右.左的移动: 可以用top.bottom来描述盒子的下.上的移动. 绝对定位 . 绝对定位

004：CSS三大重点之二：浮动（拖标、不占位置、转行内块）

目录 1:拖标.不占位.转行内块 2:首先浮动的盒子需要和标准流的父级搭配使用,其次特别的注意浮动可以使元素显示模式体现为行内块特性. 3:清除浮动前言 CSS的定位机制有3种:普通流(标准流).浮动和定位. 理论特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次特别的注意浮动可以使元素显示模式体现为行内块特性. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占

绝对定位使用hidden可防止脱标

热门专题