他们现在启动了"腾讯课堂101计划"，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。...它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。 ?...另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。 ?...这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 ?...div { position: fixed; top: 0; } 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。...另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。...这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。...div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...Vant：有赞前端团队开发的轻量级移动端 Vue 组件库，让你快速使用已经封装好的各种页面组件。
文件/目录的权限和归属 访问权限 读取:允许查看文件内容、显示目录列表 写入：允许修改文件内容，允许在目录中新建、移动、删除文件或子目录 可执行：允许运行程序、切换目录 归属（所有权） 属主：拥有改文件或目录的用户账号...属组：拥有该文件或目录的组账号，组中用户 查看文件/目录的权限和归属 文件类型 | 文件所有者 | 文件所属组 | 其他用户| shell chmod 修改文件或目录的权限...SGID的目录下新建文件或子目录时，新建的文件或子目录自动继承父目录的属组，普通用户执行时，是以管理员的身份去执行的 表现在前六位 粘滞位权限(Sticky) 主要用途; 表现在后三位 为公共目录（例如...，权限为777的）设置,权限字符为“r" 用户不能删除该目录中其他用户的文件 应用示例:/tmp....，在目录中创建的文件或目录会继承属组 chmod u+s file 4 chmod g+s 2 使用数字设置set位权限的时候，只能加，不能减 粘滞位权限：设置在公共目录上(777)，设置以后
绝对定位的特点：（务必记住） 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置 不保留原来的位置，完全是脱标的。...因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。 定位口诀 —— 子绝父相 刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？...；单独使用的 不随滚动条滚动。...新浪案例分析 顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动； 左右两侧的广告图片固定在浏览器可视窗口的左右两侧，不会随窗口一起滚动； 注意：底部的内容图片初始显示在顶部图片的下方，如何解决？...不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，
6.2、什么是浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。他有三个作用： 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。 6.4、浮动小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。...7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。...；单独使用的 不随滚动条滚动。...不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，
, 一般都要设置一个 最大宽度 和 最小宽度 ; 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ; 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该...59 像素 向上移动 279 像素 */ background: url(.....高度 = 内容高度 + 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为 26 像素 ,...-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 --> div class="search-index"> 内容 --> div class="search">输入搜索信息div> <!
父盒子需要加定位限制子盒子在父盒子内显示. 父盒子布局时,需要占有原来的位置,否则下面的盒子会升上来,被压在下面.因此父级只能是相对定位....跟父元素没有任何关系 不随滚动条滚动 固定定位不再占有原先的位置 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位. 固定定位小技巧:固定在版心右侧位置....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度). 浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题....浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生的初衷就是做出文字围绕的效果.但是绝对定位(固定定位)会压住下面标准流所有的内容....tb-promo img { width: 520px; height: 280px; } /* 并集选择器可以将公共部分写在一起
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置） 就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。...class="father"> div class="son1">son1div> div class="son2">son2div> div...绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。 # 父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。...自恋型） 绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置（拼爹型） 固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置（认死理型）
class="floats">div> div class="normals">div> 所有在同一父类的浮动元素都在一排显示且对上对齐，并且紧贴在一起...（若当前页面不能完全显示，则另起一行） 浮动元素具有行内块元素的特性（有宽高，同一行，当不具备宽高时长度与内容一致） 浮动常用方法 浮动元素经常与标准流父级搭配使用： 我们先采用标准流父级控制纵向框架...，对前面标准流盒子不做影响，但后面的标准流盒子会压住浮动盒子，所以只对后面标准流盒子做影响） 浮动清除 首先我们介绍一下为什么要清除浮动： 因为内容不同可能导致父类盒子高度不确定，只能由子盒子来撑开父亲...和父元素没有任何关系 不随滚动条滚动 固定定位不占有原有位置 fixed小技巧： 我们希望使fix内容紧贴版心右侧固定不变 那么我们就可以使fix的位置left在浏览器宽的的一半，然后设置margin-left...class="nav">导航栏div> div class="box">div> 子绝父相 子绝父相： 父级为了限制子级，必须采用相对定位 自己为了放置于任意位置且不干扰其他盒子
b,strong{ /*去掉加粗*/ font-weight: normal; } /*清除浮动影响 和清除margintop塌陷 合在一起的写法...value="2">上海 广州 一点体会: 提交表单时,只会识别到标签以内的内容...; right: 20px; bottom:20px 说明: 位置会固定住,不随滚动条滚动 脱离文档流 4.层级关系: z-index属性相当于Photoshop中的图层属性...父元素必须清除浮动,才能被子元素撑开 相邻浮动的块元素可以并在一行,超出父级元素会自动换行 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动的元素会占据浮动元素的位置...color:red;width:100px;">div> 2.嵌入式(练习模式) div{ color:red; width:100px;
> 如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置； > 觉得定位不占用原来标准流的位置，即脱标- **子绝父相**：>子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置...，而绝对定位不保留位置；- 固定定位fixed> 以浏览器的可视窗口为准移动元素> 与父元素没有任何关系> 不随着滚动条的滚动而滚动> 不占用标准流的位置，是一种特殊的绝对定位- 粘性定位 sticky...50% > margin-left和margin-top设置自身元素宽度的一半- 定位的特殊特性> 行内元素添加定位，可以直接设置宽度和高度> 块内元素添加定位，默认的是内容的高度和宽度> 脱标的盒子不会触发外边距塌陷问题...- 浮动和定位的区别： > 浮动会压住后面的盒子，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)> 绝对定位会压住标准流的盒子内容；网页布局总结：网页布局是通过标准流...，浮动，定位一起完成的；标准流可以让盒子上下或左右排列浮动可以让多个块级元素一行显示或左右对齐盒子定位有层级概念，可以让多个盒子前后叠压显示；部分开发规范CSS属性书写顺序布局定位：display 等自身属性
代码详情: html部分: div id="d1">列表1 div id="d11">列表1-1div>div> div id="d2">列表2div> div id="d3...,如果父级元素没有定位以body进行偏移,偏移后不占用文档流,偏移后,下面的元素进行部位上去 父级元素没有定位的absolute定位情况: ?...代码详情 html代码: div id="d1">列表1 div id="d11">列表1-1div>div> div id="d2">列表2div> div id="d3"...父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白 ? iii. ...父级元素定位(绝对定位absolute)的子元素relative定位情况:父元素原文档流空白,子元素保留原来文档流空白 ? 4.fixed固定:相当于浏览器窗口固定(不随导航条位置改变) ?
background-image:url(图像地址) background-repeat:repet-x水平方向上铺,repet-y垂直方向上铺，no-repeat不重复 background-attachment: fixed(不随滚动条滚动...，如果元素没有已定位的父元素那么它的位置相对于 static(默认的静态定位)，即没有定位，遵循正常的文档流对象，静态定位的元素不受top、left、right、bottom影响。...即使窗口是滚动的它也不会移动。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...class="tooltip">鼠标移动到这 提示文本 div> 图片廓 <head
relative; left: 50px; top: 50px; } 1-3 Position-absolute(绝对定位) 写为absolute后，改图片将会脱离信息流，其它照片依次向上移动...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并 关键词 ： 最近 和 非static定位 和 祖先元素 步骤 首先获取第一张照片元素 发现是absolute布局 找寻父节点...div class=”img-box”> 未配置position ,所以默认为position=static; 不符合非static 继续寻找div>的父节点 ，， 到...已经没有父节点，所以按照位置为标准进行偏移 1-4 Position-fixed(固定位置) 作用：使一个标题·固定，不随页面的滑动移动 h1 { position...background-clip: ; border-box padding-box content-box text /*background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
我们将block2放置在标签内，那么它就是block2框的上一级 区域二相对移动的位置 div id="block2">区域二div> 然后在...区别就在于绝对定位下的页面对象的框，会随着滚动条和页面一起移动，而固定定位下的页面对象的框则不会随之滚动。同样，固定定位也可以使用 top、right、bottom 和 left 属性来控制位移。...这样，有时候它们难免会叠加在一起，这种情况可以使用 Z轴属性，即层的叠加特性来改变它们的顺序。...div id="d2">div> //定义中间的层 div id="d3">div> //定义最上面的层 浏览器最终显示的是d1层的内容 浮动层...，将页面位置固定不动（不随滚动条和页面一起移动） positon: fixed; 浮动层：可以将所定义的页面内容放置在页面的左边或者右边 float: left; float: right; E N
并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上 margin\border\padding的数值）。...，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。...而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。 这是一种很特别并且也是非常实用的应用方式。...介绍完理论，将通过实例来介绍定位的各知识点，虽然实 例不美，但每一则实例都是精心挑选的，如果要完整掌握DIV+CSS定位方法，请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。...相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
/div> div> 复制代码 定位口诀 —-子绝父相 *** 重点 <!...-- 定位口诀 ----子绝父相 --> div class="nav"> //父元素 div class="box">div> //子元素 div> div class...="footer">div> 复制代码 固定定位 固定定位 1、完全脱标 — 完全不占位 2、只认浏览器的可视窗口,就是人看见的浏览器的地方 3、不随着滚动条滚动 <...; 白色 cursor: pointer; 小手 cursor: move; 移动 cursor: text; 文本 复制代码 <!...background-color: #ccc; /* 鼠标样式cursor cursor:default; 白色 cursor: pointer; 小手 cursor: move; 移动
--内容文本Harry Potter--> Harry Potter J K....选取当前节点的父节点。 @ 选取属性。 # 选择body ....aside/@* 5.xpath运算符 参考文档：https://www.w3school.com.cn/xpath/xpath_operators.asp 6.xpath函数 count(/html//div...)，计算节点数量 name(/html//div[1])，节点名称 //选择不包含class属性的节点 var result = node.SelectNodes("....快照不随文档突变而改变，因此与迭代器不同，快照不会变得无效，但是它可能不对应于当前文档，例如节点可能已被移动，它可能包含不再存在的节点，或新节点可能已添加。
文章目录 相对定位 position: relative; 特性 用途 绝对定位 position: absolute; 绝对定位参考点 单独盒子绝对定位参考点： 父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点...父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。父绝子绝，因为绝对定位脱离标准流，影响页面的布局。父相子绝是常用的布局方案。....wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; /*大小行高一起写...> div> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 --> div class="search-index"> 内容 --> div class="search">输入搜索信息div> 我 的 div> div class="banner"> div>...59 像素 向上移动 279 像素 */ background: url(..
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
