搜索到
207
篇与
的结果
-
35、CSS基本定位机制-粘性定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粘性定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二、粘性定位(兼容性不好，IE不支持) 1.可以理解为相对定位和固定定位的结合 2.粘性定位不会脱离文档流 3.粘性定位参照浏览器可视窗口进行定位 4.粘性定位可以在元素到达某个位置时将其固定 */ body{ height: 3000px; } .box1{ width: 1000px; height: 80px; background-color: #c7edcc; margin: 100px auto 0px; /*开启粘性定位*/ position: sticky; /*移动元素位置*/ top:10px; } </style> </head> <body> <div class="box1"></div> </body> </html> -
34、固定定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二。固定定位 1.会脱离文档流 2.固定定位会改变元素的显示模式，具有行内块元素的特点 3.固定定位参照浏览器的可视窗口进行定位的 4.元素会固定在浏览器可视窗口的某个位置 */ body{ height: 2000px; } div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*开启固定定位*/ position: fixed; /*移动元素位置*/ right: 10px; bottom: 10px; } .box2{ background-color: #fde6e0; } .father{ width: 300px; height: 300px; background-color: #dce2f1; margin-top: 100px; margin-left: 100px; position: relative; } </style> </head> <body> <div class="father"> <div class="box1">我是渣渣辉，是兄弟就来</div> </div> <div class="box2"></div> </body> </html>
-
33、CSS基本定位机制-绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二、绝对定位 1.绝对定位会脱离文档流 2.绝对定位会改变元素的显示模式，具有行内块元素的特点 3.绝对定位参照开启了定位的祖先元素进行定位的 4.如果没有祖先元素或者祖先元素没有开启定位，则以浏览器为参照进行定位 如果有开启了定位的祖先元素，则参照最近一级的祖先元素进行定位 */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*开启绝对定位*/ position: absolute; /*移动元素的位置*/ left: 100px; top: 100px; } .box2{ background-color: #fed6e0; } .father{ width: 300px; height: 300px; background-color: indianred; margin-top: 100px; margin-left: 200px; /*开启定位*/ position: relative; } .bbdbb{ width: 500px; height: 500px; background-color: #dce2f1; /*开启定位*/ position: relative; } </style> </head> <body> <div class="bbdbb"> <div class="father"> <div class="box1">我是div</div> </div> </div> <div class="box2"></div> </body> </html>
-
32、CSS基本定位机制-相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二、相对定位 1.相对于元素原来的位置进行定位 2.相对定位元素会提升一个层级 3。相对定位元素不会脱离文档流 4.相对定位元素不会改变元素的显示模式（块还是块，行内还是行内） 5。元素移动后原来的位置依然占用 */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*开启元素的定位*/ position: relative; /*移动元素的位置*/ left: 300px; top: 300px; } .box2{ background-color: #fed6e0; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
-
31、高度塌陷的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高度塌陷的问题</title> <style> /* 一、高度塌陷问题:在文档流中，父元素的高度默认是被子元素撑开的。子元素多高父元素就多高。 但当子元素摄制浮动后，我们发现父元素在页面中的位置没变，但是父元素的高度却塌陷了（没有被子元素撑开） 父元素在文档流中一旦发生高度塌陷的问题，将影响整个页面的问题 因此，高度塌陷问题我们必须解决！ 二、高度塌陷问题的解决方法： 1.可以根据子元素的高度设置父元素的高度，使页面看起来不塌陷 但是，我们有时无法确定父元素的具体高度。因此，不建议这种方式 例如：评论展示、新闻阅读等 2.BFC（Block Formatting Context）块级格式化上下文 在W3C标准中，页面元素都有一个影响的属性，简称BFC 开启BFC后，元素具有以下特点： 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素覆盖 开启BFC的元素可以包含浮动元素 如何开启BFC： 1.设置元素浮动 2。设置元素绝对定位 3。设置元素为inline-block 上述三种方式能解决高度塌陷问题，但是宽度会丢失，因此不推荐使用 4.设置元素的overflow：hidden 3.clear 属性清除浮动，用于清除浮动对元素造成的影响 可选值： none 不清除浮动（默认值） left 清除左侧浮动 right 清除右侧浮动 both 清除两侧浮动 思路: 1.为需要解决高度塌陷问题的父元素再创建一个子元素， 因为仅解决高度塌陷问题，因此使用伪元素创建更恰当 2.该子元素需要清除第一个元素浮动带来的影响 .father::after{ content: ""; clear: both; display: block; } */ .father{ /*height: 200px;*/ border: 10px solid red; /*float: left;*/ /*display: inline-block;*/ /*overflow: hidden;*/ } .son{ width: 200px; height: 200px; background-color: #c7edcc; float: left; /*float: left;*/ } /*演示clear清除浮动 .ourter1{ width: 200px; height: 200px; background-color: #fed6e0; float: left; } .ourter2{ width: 300px; height: 300px; background-color: #dce2f1; float: right; } /*p{ clear: both; }*/ /* .ourter3{ width: 100px; height: 100px; background-color: yellowgreen; clear: left; }*/ /*伪元素创建的元素为行内元素，因此需要将行内元素转换为块元素*/ /*该通用代码既可以解决高度塌陷问题，又可以解决垂直外边距合并*/ .clearfix::after,.clearfix::before{ content: ""; clear: both; display: table; } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> <!--<hr> <div class="ourter1"></div> <div class="ourter2"></div> <div class="ourter3"></div> --> <!--<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.</p>--> </body> </html>
