今日内容：css全部
1.样式操作
宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>设置长宽</title> 6 <style> 7 div { 8 height: 50px; 9 100px; 10 } 11 /*给行内标签设置长宽没有任何影响*/ 12 span { 13 height: 50px; 14 100px; 15 } 16 </style> 17 </head> 18 <body> 19 <div>div</div> 20 <span>span</span> 21 </body> 22 </html>
2.字体属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p { 8 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; 9 font-size: 24px;/*字体大小*/ 10 font-weight: lighter;/*更细*/ 11 font-weight: bold;/*粗体*/ 12 font-weight: bolder;/*更粗*/ 13 14 /*color: red;*/ 15 /*color: #4e4e4e;*/ 16 /*color: rgb(128,128,128);*/ 17 /*color: rgba(0,0,0,1.0); 最后一个参数只能调节颜色的透明度 不能调节文本*/ 18 } 19 </style> 20 </head> 21 <body> 22 <p>以把多个字体名称作为一个“回退”系统来保存。</p> 23 </body> 24 </html>
3.文字属性
1 文字对齐 2 3 text-align 属性规定元素中文本的水平对齐方式。 4 left:左对齐，默认值 5 right:右对齐 6 center:居中对齐 7 justify:俩端对齐 8 9 10 文字装饰 11 text-decoration 属性用来给文字添加特殊效果 12 13 none:默认，定义标准的文本 14 underline:定义文本下的一条线 15 overline:定义文本上的一条线 16 line-through:定义穿过文本下的一条线 17 inherit:继承父元素的text-decoration属性的值 18 19 <!DOCTYPE html> 20 <html lang="en"> 21 <head> 22 <meta charset="UTF-8"> 23 <title>Title</title> 24 <style> 25 p { 26 font-size: 16px;/*字体大小*/ 27 text-indent: 32px;/*首行空格，这个是空俩个字体*/ 28 /*text-align: center;*/ 29 /*text-align: left;*/ 30 /*text-align: right;*/ 31 /*text-align: justify;*/ 32 33 /*text-decoration: underline;*/ 34 /*text-decoration: overline;*/ 35 /*text-decoration: line-through;*/ 36 } 37 a { 38 text-decoration: none; 39 color: orange; 40 } 41 a:hover { 42 color: blue; 43 } 44 </style> 45 </head> 46 <body> 47 <p>属性规定元素中的文本的水平对齐方式。</p> 48 <s>属性规定元素中的文本的水平对齐方式。</s> 49 <a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a> 50 </body> 51 </html>
4.背景属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*p {*/ 8 /* color: white;*/ 9 /* background-color: black;*/ 10 /*}*/ 11 div { 12 /*background-color: orange;*/ 13 height: 500px; 14 500px; 15 background-image: url("111.png"); /*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*/ 16 /*background-repeat: no-repeat;*/ /*背景图片不平铺*/ 17 /*background-repeat: repeat-x;*/ /*背景图片只在水平方向上平铺*/ 18 /*background-repeat: repeat-y;*/ /*背景图片只在垂直方向上平铺*/ 19 /*background-position: center center;*/ /*居中* / 20 background-position: 10px 30px; /*第一个参数调节的是左右 第二个参数调节的上下*/ 21 22 /*background: orange url("代码/111.png") no-repeat center center;*/ 23 } 24 </style> 25 </head> 26 <body> 27 <!--<p>背景图片平铺排满整个网页</p>--> 28 29 <div> 30 31 </div> 32 </body> 33 </html>
5.背景图片实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 height: 400px; 9 background-color: red; 10 } 11 .c2 { 12 height: 400px; 13 background-color: green; 14 } 15 .c3 { 16 height: 500px; 17 background: url("代码/111.png"); 18 background-attachment: fixed;/*把图片固定在哪里,不会动*/ 19 } 20 .c4 { 21 height: 400px; 22 background-color: yellow; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div class="c1"></div> 29 <div class="c2"></div> 30 <div class="c3"></div> 31 <div class="c4"></div> 32 </body> 33 </html>
6.边框
1 none：无边框 2 dotted：点状虚线边框 3 dashed：矩形虚线边框 4 solid：实线边框 5 6 7 <!DOCTYPE html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>边框</title> 12 <style> 13 /*div {*/ 14 /* !*border-color: red;*!*/ 15 /* !*border-style: solid;*!*/ 16 /* !*border- 1px;*!*/ 17 /*通常用这种方法来写,有颜色,边框样式,边框宽度*/ 18 /* !*border: 3px solid black;*!*/ 19 /* !*border: solid 3px blue;*!*/ 20 /* border: dashed green 3px;*/ 21 /*}*/ 22 /*每一遍都用不同的边框样式*/ 23 p { 24 border-left: 3px solid red; 25 border-bottom: 5px dotted green; 26 border-top: 1px dashed orchid; 27 border-right: 10px solid dimgrey; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div> 34 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。 35 </div> 36 <p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p> 37 </body> 38 </html>
7.画圆
1 用这个属性能够实现圆角边框的效果 2 将border-radius设置为长或者高的一半即可得到一个圆形 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>Title</title> 9 <style> 10 div { 11 height: 400px; 12 200px; 13 background: red; 14 border: 3px solid black;/*设置圆的边框*/ 15 border-radius: 50%; /*设置圆的时候要记住,高和框必须是一致的,不然就是椭圆的*/ 16 } 17 </style> 18 </head> 19 <body> 20 <div></div> 21 </body> 22 </html>
8.盒子模型
1 可以比喻成快递盒 2 俩个快递盒之间的距离（标签与标签之间的距离）称之为 外边距（margin） 3 纸盒的厚度（边框） 称之为边框（border） 4 内部的物品到盒子的距离（内部文本与边框的距离） 称之为 内边距（padding） 5 物品本身得到大小（文本大小） 称之为内容（content） 6 7 <!DOCTYPE html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>Title</title> 12 <style> 13 body { 14 /*margin-top: 0;*/ /*上*/ 15 /*margin-right: 0;*/ /*右*/ 16 /*margin-bottom: 0;*/ /*下*/ 17 /*margin-left: 0;*/ /*左*/ 18 /*margin: 0; !*上下左右全为0*!*/ 19 /*margin: 10px 20px; !* 上下10px 左右20px*!*/ 20 /*margin: 10px 20px 30px; !* 上 左右 下*!*/ 21 /*margin: 10px 20px 30px 40px; !* 上 右 下 左 顺时针*!*/ 22 margin: 0; 23 } 24 .c1 { 25 height: 400px; 26 400px; 27 border: 3px solid black; 28 } 29 .c2 { 30 background-color: green; 31 height: 50px; 32 50px; 33 border: 3px solid red; 34 /*margin: 0 auto;*/ /*常见居中*/ 35 } 36 p { 37 border: 3px solid red; 38 /*padding-top: 20px;*/ 39 /*!*padding-left: 10px;*!*/ 40 /*padding-bottom: 30px;*/ 41 /*padding-right: 50px;*/ 42 text-align: right; /*默认基准点是往左的，可以通过align改为往右*/ 43 44 padding: 10px; /* padding 同样支持1 2 3 4个参数 效果同margin*/ 45 } 46 </style> 47 </head> 48 <body> 49 <!--<div class="c1"></div>--> 50 <!--<div class="c2"></div>--> 51 <p>我们换个p</p> 52 <!--<p>我们换个p</p>--> 53 54 <div class="c1"> 55 <div class="c2"></div> 56 </div> 57 </body> 58 </html>
九.浮动
1 浮动的元素，是脱离正常文档流的，也就意味着没有独占一行一说，也不需要再独占原来的位置，如果元素浮动起来会造成父标签塌陷，等于说他飘在空中了，父标签没有内容来撑开，所以会塌陷 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 <style> 9 body { 10 margin: 0; /*把标签与标签之间的空白去除*/ 11 } 12 #d1 { 13 border: 3px solid black; /*设置边框*/ 14 } 15 .c1 { 16 height: 100px; 17 100px; 18 background-color: red; 19 float: left; /*向左浮动*/ 20 } 21 .c2 { 22 height: 100px; 23 100px; 24 background-color: black; 25 float: left; 26 } 27 /*去除浮动的公式，那个地方需要去除浮动，就让那个标签用类继承一下就可以了*/ 28 .clearfix:after { 29 content: ''; 30 display: block; 31 clear: both; /* 左右两边都不能有浮动的元素*/ 32 } 33 </style> 34 </head> 35 <body> 36 <div id="d1" class="clearfix"> 37 <div class="c1"></div> 38 <div class="c2"></div> 39 40 </div> 41 42 </body> 43 </html>
10.利用浮动实现左右布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 .blog-left { 11 float: left; /*左浮动*/ 12 20%; 13 height: 1000px; 14 background-color: #4e4e4e; 15 } 16 .blog-right { 17 float: right; /*右浮动*/ 18 80%; 19 height: 1000px; 20 background-color: #eeeeee; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="blog-left"></div> 26 <div class="blog-right"> 27 <div>div</div> 28 <div>div</div> 29 <div>div</div> 30 <div>div</div> 31 <div>div</div> 32 </div> 33 </body> 34 </html>
11.溢出
1 overflow溢出属性 2 visible 默认值。内容不会被修剪，会呈现在元素框之外。 3 hidden 内容会被修剪，并且其余内容是不可见的。 4 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 5 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 6 inherit 规定应该从父元素继承 overflow 属性的值。 7 8 ps： 9 overflow（水平和垂直均设置） 10 overflow-x（设置水平方向） 11 overflow-y（设置垂直方向） 12 13 <!DOCTYPE html> 14 <html lang="en"> 15 <head> 16 <meta charset="UTF-8"> 17 <title>Title</title> 18 <style> 19 div { 20 height: 50px; 21 50px; 22 border: 3px solid red; 23 overflow: hidden; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p> 30 </div> 31 </body> 32 </html>
12.圆形头像实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原型头像</title> 6 <style> 7 body { 8 margin: 0; 9 background-color: darkgray; 10 } 11 div { 12 height: 120px; 13 120px; 14 border-radius: 50%; 15 border: 5px solid white; 16 overflow: hidden; 17 } 18 img { 19 /*max- 100%;*/ 20 100%; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <img src="111.png" alt=""> 27 </div> 28 </body> 29 </html>
13.定位
1 定位： 2 所有的标签默认都是静态的，无法直接调节位置，你需要先将其设置成可定位态。 3 4 1.相对定位 5 相对于标签自身原来的位置 6 2.绝对定位 7 相对于已经定位过的父标签，但只给你一个父标签的长度，让你做定位 8 3.固定定位 9 相对于浏览器的窗口，固定在摸个位置 10 position:relative 相对定位 11 position:absolute 绝对定位 12 position:fixed 固定定位 13 14 15 <!DOCTYPE html> 16 <html lang="en"> 17 <head> 18 <meta charset="UTF-8"> 19 <title>Title</title> 20 <style> 21 body { 22 margin: 0; 23 } 24 /*.c1 {*/ 25 /* height: 50px;*/ 26 /* 50px;*/ 27 /* background-color: green;*/ 28 /* !*top: 100px;*!*/ 29 /* !*left: 100px;*!*/ 30 /* !*position: static; !*默认是静态的 不能动位置*!*!*/ 31 /* !*position: relative; !*相对定位*!*!*/ 32 /* !*position: relative;*!*/ 33 /*}*/ 34 35 /*.c2 {*/ 36 /* height: 200px;*/ 37 /* 200px;*/ 38 /* background-color: red;*/ 39 /* !*top: 50px;*!*/ 40 /* !*left: 50px;*!*/ 41 /* !*position: absolute; !*绝对定位*!*!*/ 42 /*}*/ 43 .c1 { 44 border: 3px solid red; 45 height: 100px; 46 100px; 47 position: fixed;/*固定在那里*/ 48 right: 20px; 49 bottom: 50px; 50 } 51 </style> 52 </head> 53 <body> 54 <!--<div class="c1">--> 55 <!-- <div class="c2"></div>--> 56 <!--</div>--> 57 <div class="c1"> 58 回到顶部 59 </div> 60 <div style="height: 1000px;background-color: green"></div> 61 <div style="height: 1000px;background-color: black"></div> 62 <div style="height: 1000px;background-color: blue"></div> 63 64 </body> 65 </html>
14.验证是否脱离文档流
1 脱离文档流 2 1.浮动的元素都是脱离文档流的 3 2.绝对定位是脱离文档流的 4 3.固定定位也是脱离文档流的 5 6 不脱离文档流的 7 1.相对定位不脱离文档流 8 9 10 <!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <meta charset="UTF-8"> 14 <title>Title</title> 15 <style> 16 body { 17 margin: 0; 18 } 19 </style> 20 </head> 21 <body> 22 <!--<div style="background-color: red;height: 50px; 50px;position: relative;left: 50px;"></div>--> 23 <!--<div style="background-color: blue;height: 50px; 50px"></div>--> 24 25 26 <!--<div style="background-color: red;height: 50px; 50px;position: relative"></div>--> 27 <!--<div style="background-color: blue;height: 50px; 50px;position: absolute;left: 50px"></div>--> 28 <!--<div style="background-color: orchid;height: 50px; 50px"></div>--> 29 30 31 <div style="background-color: red;height: 50px; 50px;"></div> 32 <div style="background-color: blue;height: 50px; 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red"></div> 33 <div style="background-color: orchid;height: 50px; 50px"></div> 34 </body> 35 </html>
15.模态框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 .cover { 12 position: fixed; 13 top: 0; 14 left: 0; 15 right: 0; 16 bottom: 0; 17 background-color: rgba(128,128,128,0.45); 18 z-index: 999; 19 } 20 21 .modal { 22 height: 200px; 23 400px; 24 background-color: white; 25 position: fixed; 26 left: 50%; 27 top: 50%; 28 z-index: 1000; 29 margin-top: -100px; 30 margin-left: -200px; 31 } 32 33 </style> 34 </head> 35 <body> 36 <div>我是最底层的</div> 37 <div class="cover"></div> 38 <div class="modal"> 39 <p><label for="d1">username:<input type="text" id="d1"></label></p> 40 <p><label for="d2">password:<input type="text" id="d2"></label></p> 41 <input type="submit"> 42 </div> 43 </body> 44 </html>
16.透明度比较
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 background-color: rgba(128,128,128,0.9); 9 } 10 .c2 { 11 opacity: 0.5; 12 background-color: rgb(128,128,128); 13 } 14 </style> 15 </head> 16 <body> 17 <p class="c1">111</p> 18 <p class="c2">222</p> 19 </body> 20 </html>
17.去除ul标签丑陋的部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul { 8 list-style-type: none; 9 padding: 0; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li><a href="">哈哈1</a></li> 16 <li><a href="">哈哈2</a></li> 17 <li><a href="">哈哈3</a></li> 18 </ul> 19 </body> 20 </html>
18.display属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1 { 8 /*display: none; !*标签不显示 并且也不再占用位置*!*/ 9 /*visibility: hidden; !* 标签不显示 但是位置还在*!*/ 10 } 11 span { 12 display: inline-block; /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/ 13 /*height: 400px;*/ 14 /* 400px;*/ 15 background-color: red; 16 border: solid 3px black;/* black默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。*/ 17 } 18 .c1 { 19 height: 50px; 20 50px; 21 background-color: red; 22 23 display: inline;/*按行内元素显示，此时再设置元素的width、height、 24 margin-top、margin-bottom和float属性都不会有什么影响。*/ 25 } 26 .c2 { 27 height: 50px; 28 50px; 29 background-color: green; 30 display: inline; 31 } 32 </style> 33 </head> 34 <body> 35 <!--<p id="d1">123</p>--> 36 <!--<p>123</p>--> 37 <span>span1</span> 38 <span>span2</span> 39 <!--<div class="c1">div1</div>--> 40 <!--<div class="c2">div2</div>--> 41 </body> 42 </html>
补充：
1 yangyongjun 2 随笔 - 31, 文章 - 0, 评论 - 0, 引用 - 0 3 CSS样式操作、文本各种属性的设置、背景属性、边框、display属性、CSS盒子模型、浮动float、清除浮动处理、overflow溢出属性、定位、脱离文档流、z-index层叠、opacity透明度属性 4 样式操作： 5 6 块级标签才能设置长宽 7 8 行内标签设置长宽没有任何影响。 9 10 字体属性： 11 12 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 13 14 fond-family:把多个字体名称当做一个回退操作进行设置，当浏览器不支持当前字体时，就会尝试下一个， 15 16 直到有浏览器可以识别的第一个字体为止。 17 18 字体大小： 19 20 font-size:24px; 21 22 字重： 23 24 font-weight:normal(bold,lighter) 25 26 文本颜色： 27 28 颜色属性被用来设置文字的颜色。 29 30 颜色的指定方式： 31 32 十六进制：#FF0000 33 34 一个RGB值：(255,0,0,0.3) 35 36 颜色的名称：red: 37 38 文字对齐： 39 40 text-align:left; 41 42 center:居中对齐 43 44 left/right:左或右对齐 45 46 justify:l两端对齐 47 48 文字装饰： 49 50 text-decration：文字装饰 51 52 underline:下划线 53 54 overline:上划线 55 56 line-through:贯穿文本的线。 57 58 常用的用法： 59 60 去除a标签默认的下划线： 61 62 a{text-decoration:none}; 63 64 首行缩进： 65 66 如果字体大小设置为24px，此时为首行缩进两个字。 67 68 textindent:48px; 69 70 背景属性： 71 72 背景颜色： 73 74 background-color:red; 75 76 背景图片： 77 78 background-image:url("1.png"); 79 80 背景重复： 81 82 repeat(默认):背景图片平铺排满整个网页 83 repeat-x：背景图片只在水平方向上平铺 84 repeat-y：背景图片只在垂直方向上平铺 85 no-repeat：背景图片不平铺 86 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; 87 /*background-position: 200px 200px;*/ 88 89 简写： 90 91 background:#336699 url('1.png') no-repeat left top; 92 93 滚动效果案例： 94 95 图片滑动效果 96 边框：border 97 98 三要素： 99 100 border-width 101 border-style(none,dotted:虚线，solid:实线，dashed:矩形虚线边框) 102 border-color 103 常用格式： 104 105 div{ border: 2px solid red; } 106 107 border-radius 108 109 用这个属性能实现圆角边框的效果。 110 111 将border-radius设置为长或高的一半即可得到一个圆形。 112 113 display属性 114 115 用于控制HTML元素的显示效果。 116 117 display:"none"与visibility:hidden的区别： 118 119 visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 120 121 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 122 123 CSS盒子模型 124 125 margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 126 127 padding:用于控制内容与边框之间的距离； 128 129 Border(边框):围绕在内边距和内容外的边框。 130 131 Content(内容):盒子的内容，显示文本和图像。 132 133 134 135 136 137 138 139 margin 推荐使用的简写模式： 140 141 设置顺序：上右下左（顺时针方向） 142 143 .margin-test { margin: 5px 10px 15px 20px; } 144 145 padding推荐使用格式： 146 147 顺序:上右下左（顺时针方向） 148 149 .c1 { padding: 5px 10px 15px 20px; } 150 151 152 153 float:漂浮 154 155 在 CSS 中，任何元素都可以浮动。 156 157 浮动元素会生成一个块级框，而不论它本身是何种元素。 158 159 关于浮动的两个特点： 160 161 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 162 163 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 164 165 left:向左浮动 166 167 right：向右浮动 168 none:默认值，不浮动 169 170 clear:清除浮动 171 172 173 174 175 176 177 178 清除浮动（解决浮动带来的父标签塌陷问题！！） 179 180 一般有三种方式： 181 182 1、固定长度 183 184 2、伪元素清除法 185 186 3、overflow:hidden 187 188 比较常用的方式： 189 190 伪元素清除法： 191 192 .clearfix after 193 194 { 195 196 content:""; 197 198 display:bolock; 199 200 clear:both; 201 202 } 203 204 overflow溢出属性： 205 206 值 描述 207 visible 默认值。内容不会被修剪，会呈现在元素框之外。 208 hidden 内容会被修剪，并且其余内容是不可见的。 209 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 210 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 211 inherit 规定应该从父元素继承 overflow 属性的值。 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 overflow（水平和垂直均设置） 229 230 圆形头像的设置： 231 232 圆形头像实现 233 overflow-x（设置水平方向） 234 235 overflow-y（设置垂直方向） 236 237 定位： 238 239 static:静态 240 241 不能当做绝对定位的参照物，并且设置静态标签时，设置left、top等值是不起作用的。 242 243 244 245 relative:相对定位：以自己原始位置为参照 246 247 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 248 249 注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 250 251 absolute:绝对定位 252 253 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 254 255 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。 256 257 另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 258 259 绝对定位实例 260 fixed（固定） 261 262 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性（靠近用户） 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 263 264 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 265 266 fixed固定演示 267 检验各种定位是否脱离文档流： 268 269 相对定位 270 绝对定位 271 固定定位 272 结果： 273 274 脱离文档流： 275 276 绝对定位 277 278 固定定位 279 280 不脱离文档流： 281 282 相对定位 283 284 z-index： 285 286 #d1 { 287 z-index: 999; 288 } 289 设置对象的层叠顺序。 290 291 z-index 值表示谁压着谁，数值大的压盖住数值小的， 292 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index 293 z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 294 从父现象：父亲怂了，儿子再牛逼也没用 295 z-index(模态框示例) 296 opacity 297 298 用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。 299 300 标签内的文本内容也具有透明度。 301 302 rgba文本内容不透明。 303 304 与rgba(128,128,128,0.9);的透明度特点对比： 305 306 两种透明度对比 307 导航栏示例： 308 309 导航栏示例 310 311 312 案例之博客园首页的搭建： 313 314 博客园首页 315 CSS样式设计 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 好文要顶 关注我 收藏该文 356 yangyongjun 357 关注 - 3 358 粉丝 - 0 359 +加关注 360 0 0 361 « 上一篇： css的三种引入方式、各种选择器的介绍、分组与嵌套、选择器的优先级 362 posted on 2019-09-05 18:24 yangyongjun 阅读(10) 评论(0) 编辑 收藏 363 刷新评论刷新页面返回顶部 364 注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页。 365 【推荐】超50万C++/C#源码: 大型实时仿真组态图形源码 366 【活动】阿里云910会员节多款云产品满减活动火热进行中 367 【推荐】新手上天翼云，数十款云产品、新一代主机0元体验 368 【推荐】零基础轻松玩转华为云产品，获壕礼加返百元大礼 369 【推荐】华为云文字识别资源包重磅上市，1元万次限时抢购 370 相关博文： 371 · css样式操作 372 · js操作css样式 373 · 操作css样式 374 · 操作css样式 375 · JS操作CSS样式 376 377 最新 IT 新闻: 378 · 中国可再生能源投资规模全球第一 379 · 蜘蛛如何「御电而行」？ 380 · 腾讯：今年完成健康系统的全产品覆盖 游戏不接入就下架 381 · 港交所网站遭攻击：近20年来唯一一次 将继续测试 382 · 紧张！第一次尝试登陆月球南极，印度能成功吗？ 383 » 更多新闻... 384 导航 385 博客园 386 首页 387 联系 388 管理 389 < 2019年9月 > 390 日 一 二 三 四 五 六 391 1 2 3 4 5 6 7 392 8 9 10 11 12 13 14 393 15 16 17 18 19 20 21 394 22 23 24 25 26 27 28 395 29 30 1 2 3 4 5 396 6 7 8 9 10 11 12 397 公告 398 昵称： yangyongjun 399 园龄： 2个月 400 粉丝： 0 401 关注： 3 402 +加关注 403 搜索 404 405 找找看 406 407 谷歌搜索 408 常用链接 409 我的随笔 410 我的评论 411 我的参与 412 最新评论 413 我的标签 414 随笔档案 415 2019年9月(3) 416 2019年8月(13) 417 2019年7月(15) 418 阅读排行榜 419 1. 发送大文件（粘包解决的实例）、socketserver模块、udp的使用、简易版QQ的实现、异常处理机制的知识点(24) 420 2. 模块的表现形式、使用时内部发生的细节、循环导入问题、__name__的用法等(22) 421 3. 迭代器、生成器、send方法、send与return的异同点、生成器表达式、常用的内置方法(21) 422 4. 面向对象、类和对象、__dict__方法、__init__方法、对象绑定方法、类绑定方法、对象交互(20) 423 5. collection模块（具名元组、队列、有序字典、默认值字典）、time 模块、随机模块：random、os模块、sys模块、序列化模块(20) 424 Powered by: 425 博客园 426 Copyright © 2019 yangyongjun 427 Powered by .NET Core 3.0 Preview 8 on Linux