搜索到
47
篇与
的结果
-
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>
-
30、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>CSS基本定位机制-浮动</title> <style> /* 一、浮动：使元素浮起来，脱离文档流，从而使盒子能够灵活的移动。 二、 浮动的属性： float 属性设置元素的浮动 可选值： none 元素不浮动，默认在文档流中排列（默认值） left 元素向左移动 right 元素向右移动 三、特点： 1.浮动元素会脱离文档流 1.脱离文档流的控制，从而使盒子更灵活的移动 2.浮动元素不会保留原来的位置 2.浮动元素将具有行内块元素的特点 1.无论是块元素还是行内元素，都可以设置浮动，浮动后将具有行内块元素的特点 2.块元素设置浮动后，大小根据内容决定 3.行内元素设置浮动，不需要通过display 转换为块，就可以设置宽度和高度 3.浮动的盒子会一行显示并且在顶部对齐 1.多个盒子设置浮动，他们会一行显示并且顶部对齐 2.浮动元素互相贴靠在一起，没有缝隙，如果父元素宽度不能容纳这些盒子， 多出的盒子会另起一行对齐显示 四、浮动的应用: 1.浮动元素目的就是为了让盒子横向｛水平｝排列，完成水平方向的布局 2.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围 五、浮动的注意： 1.浮动元素无法超越文档流的块元素 2.浮动元素只会影响后面文档流中的盒子，不会影响前面文档流中的盒子 */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; } .box2{ background-color: #fed6e0; float: left; } .box3{ background-color: #dce2f1; float: left; } span{ background-color: yellowgreen; width: 100px; height: 100px; float: left; } </style> </head> <body> <div class="box1"></div> <div class="box2">我是div</div> <div class="box3"></div> <span>我是span1</span> <span>我是span2</span> <span>我是span3</span> <span>我是span4</span> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ut nulla repellat perferendis aperiam, possimus molestiae nam quia, laboriosam, quasi reprehenderit. Vitae nesciunt eius quis consequuntur ratione, recusandae quo delectus!Lorem</p> </body> </html>
