搜索到
146
篇与
的结果
-
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>
-
28、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> /* CSS盒子三种基本定位机制： 普通流 normal flow、 浮动 float、 定位 position 一、文档流（标准流、普通流 normal flow）：HTML文档中一切皆为盒子，而盒子在HTML文档中默认的显示标准，称为文档流 二、元素在文档流中的显示模式： 1.块元素 1.常见的块元素 div h1~h6 p ul li 等 2.特点： -独占一行 -宽度和高度等都可以设置 -默认宽度是父级元素宽度的100% -块元素是容器，里面可以放块元素、行内元素、行内块元素 3.注意： -文字类的块元素不能自由嵌套（尽量不要放块元素） 2.行内元素 1.常见的行内元素 span a strong em ins del等 2.特点： -和相邻的行内元素（行内块元素）在一行显示 -宽度和高度设置无效 -默认宽度是其内容的宽度 -行内元素可以设置border、padding、margin，但是垂直方向不会影响页面的布局 -行内元素水平外边距不会发生重叠 -行内元素只能容纳文本或其他行内元素 3.注意： 1.a 链接中不能放链接 2 特殊情况下，a链接可以放块元素，但最好将a转换为块元素 3.行内块元素 在行内元素中有几个标签：img input td 他们同时拥有块元素和行内元素的特点 因此我们称为 行内块元素 1.特点： 1.和相邻的块元素（行内快元素）在一行显示 2.默认宽度是其内容的宽度 3.宽度和高度都可以设置 */ span{ background-color: #c7edcc; /*width: 200px; height: 200px； 设置无效*/ border: 10px solid red; padding: 10px; margin: 100px; } .box1{ width: 200px; height: 200px; background-color: #fed6e0; } </style> </head> <body> <H1>我是标题</H1> <div>我是div</div> <p>我是段落 <div></div> </p> <span>我是span</span> <span>我是span</span> <span>我是span</span> <div class="box1"></div> </body> </html>
-
27、轮廓阴影圆角 <!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> /* 一、轮廓 outline 设置元素的轮廓 使用方式与border一样、不同在于不影响盒子大小 设置轮廓为元素起到一个突出强调的作用 二、阴影 box-shadow 设置元素的阴影 第一个值：设置阴影水平距离 第二个值：设置阴影垂直距离 第三个值：设置阴影模糊半径 第四个值：设置阴影尺寸 第五个值：设置阴影的颜色 第六个值：设置内部还是外部阴影， outset 默认值为外部阴影 inset 设置为内部阴影 三、圆角 border-radius设置元素的圆角的 可以设置四个角的圆角 border-top-left-radius border-top-right-radius border-button-right-radius border-button-left-radius border-radius 可以直接设置四个角 border-radius：50px 100px 150px 200px；左上 右上 右下 左下（顺时针） border-radius：50px 100px 150px；左上 右上 左下 右下 */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; margin:100px auto; /*设置轮廓*/ outline: 10px solid red; /*设置阴影 box-shadow: 30px 30px 50px 5px rgba(0,0,0,.3); */ /*设置圆角 border-radius：50px 100px 150px 200px； border-radius：50px 100px 150px； */ position: relative; top: 0; left: 0; transition: 0.3s linear all; } .box1:hover{ box-shadow: 0px 0px 20px black; top: -1px; left: 0; } /* .box2{ width: 300px; height: 200px; background-color: #fed6e0; } */ </style> </head> <body> <div class="box1"></div> <!--<div class="box2"></div>--> </body> </html>
