搜索到
207
篇与
的结果
-
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>
-
26、盒子的垂直布局 <!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.若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置 三种解决办法： 1.可以为父元素添加边框 2.可以为父元素加内边距 3.为父元素添加overflow：hidden； 学习完清除浮动的最终解决方案： .father::before{ content:""; display:table; clear:both; } */ div{ width: 200px; height: 200px; } /* .box1{ background-color: #c7edcc; margin-bottom: 100px; } .box2{ background-color: #fde6e0; margin-top: 200px; } */ .father::before{ content: ""; display: table; clear: both; } .father{ background-color: #c7edcc; /*overflow: hidden;*/ } .son{ width: 100px; height: 100px; background-color: #fde6e0; margin-top: 100px; } </style> </head> <body> <!-- <div class="box1"></div> <div class="box2"></div> --> <div class="father"> <div class="son"></div> </div> </html>
-
25、盒子模型的溢出 <!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> /* 一、盒子模型的溢出 父子两个盒子，子盒子的宽度或高度，大于父盒子，则子盒子多余的部分会在父盒子之外进行显示 多余的部分，称为溢出的部分 overflow属性，可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分（默认值） hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html><!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> /* 一、盒子模型的溢出 父子两个盒子，子盒子的宽度或高度，大于父盒子，则子盒子多余的部分会在父盒子之外进行显示 多余的部分，称为溢出的部分 overflow属性，可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分（默认值） hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
