web前端学习（三）css学习笔记部分（3）-- css常用操作
5. CSS常用操作
5.1 对齐
使用margin属性进行水平对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:300px; height:100px; margin:0px auto; background-color: deeppink; } </style> </head> <body bgcolor="#8fbc8f"> <div> </div> </body> </html>
使用position属性进行左右对齐
使用float属性进行左右对齐
5.2 分类
5.2.1尺寸操作
| 属性 | 设置元素高度 |
| height | 设置元素高度 |
| line-height | 设置行高（字的大小不变，行高过小字会重叠） |
| max-height | 设置元素最大高度 |
| max-width | 设置元素最大宽度（一行字最长不能超过这个数值，如果最后一个单词写不完就会被放到第二行） |
| min-width | 设置元素最小宽度 |
| min-height | 设置元素最小高度 |
| width | 设置元素宽度（内容元素会自动换行） |
5.2.2 分类操作：
| 属性 | 描述 |
| clear | 设置一个元素的侧面是否允许其他的浮动元素 |
| cursor | 规定当指向某元素之上时显示的指针类型 |
| display |
设置是否及如何显示元素 display:inline;(在一行里面显示) |
| float | 定义元素在哪个方向浮动 |
| position | 把元素放置到一个静态的、相对的、绝对的，固定的位置 |
| visibility |
设置元素是否可见或不可见 visibility:hidden;（设置元素不可见） |
5.3 导航栏
5.3.1垂直导航栏
关键在于将li设置为水平块级元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style> ul{ list-style-type: none; margin:0px; padding:0px; } a{ display:block; } a:link,a:visited{ text-decoration: none; /*display:block;*//*在这里写这一句也可以，在上面写也可以，不过个人感觉最好还是在上面写*/ /*将链接标签元素展示为块级元素，此类元素前后会带有换行符，自占一行*/ /*<a>是内联元素 必须设置成块级元素block 才能有width和height 不过你可以又定义display:block再定义成display:inline*/ background-color: burlywood; color:aliceblue; width:80px; text-align: center; } a:hover,a:active{ background-color: crimson; } </style> </head> <body> <div> <ul> <li><a href="#">列表1</a></li> <li><a href="#">列表2</a></li> <li><a href="#">列表3</a></li> <li><a href="#">列表4</a></li> </ul> </div> </body> </html>
5.3.2水平导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style> ul{ list-style-type: none; margin:0px; padding:0px; } a{ /*display:inline;*/ } a:link,a:visited{ text-decoration: none; /*display:block;*//*在这里写这一句也可以，在上面写也可以，不过个人感觉最好还是在上面写*/ /*将链接标签元素展示为块级元素，此类元素前后会带有换行符，自占一行*/ /*<a>是内联元素 必须设置成块级元素block 才能有width和height 不过你可以又定义display:block再定义成display:inline*/ background-color: burlywood; color:aliceblue; width:50px; height:50px; padding: 10px 10px; margin:10px; /*内联元素的margin不能修改他的上下margin元素的大小，只能修改左右margin， 而padding的上下左右都可以*/ /*通过设置内联元素的padding可以设置内联元素的大小*/ text-align: center; } a:hover,a:active{ background-color: crimson; } li{ display:inline; /*内联元素是不能设置宽高的，只能通过修改padding （padding属于border内部的所以颜色可以跟着改变）和margin来改变 内联元素的视觉大小，*/ /*padding:10px 10px 10px;这一句无效*/ } </style> </head> <body> <div> <ul> <li><a href="#">列表1</a></li> <li><a href="#">列表222222</a></li> <li><a href="#">列表3</a></li> <li><a href="#">列表4</a></li> </ul> </div> </body> </html>
关于替换元素的相关知识
先提供一个转载链接，关于替换元素和非替换元素知识的
https://segmentfault.com/q/1010000000694623
第二个转载链接同样是关于替换元素和非替换元素的
https://www.cnblogs.com/mmlvj/p/4580502.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替换元素</title> <style> #divwai{ height:20px; background-color: aliceblue; } #divnei{ height:30px; background-color: deeppink; } #tuwai{ /*height:30px;*/ } #tu{ height:40px; /*实践证明，在父元素行高大小已经固定的情况下， 子元素比父元素大的情况并不会撑开父元素。*/ /*padding:30px auto;*/ /*图片标签属性padding不能设置为auto*/ padding: 30px 30px; /*图片标签可以设置padding属性，padding元素占据的大小*/ /*可以在父元素中占据大小*/ margin:30px auto; /*图片标签可以设置margin属性，margin元素占据的大小*/ /*可以在父元素中占据大小*/ } </style> </head> <body> <div id="divwai"> <div id="divnei"> </div> </div> <div id="tuwai"> <img src="bg.jpg" alt="图" id="tu"> </div> <div style="padding:50px;" style="color: rgb(0, 0, 255);">></div> <div><span style="padding:30px;" style="color: rgb(0, 0, 255);">> 我是行内元素span </span> </div> <!--span元素的padding居然不会撑开自己让自己的边界与其他元素隔开。。。 在与其他元素隔开的时候还是只算原来的字占的大小--> </body> </html>
5.3.3导航栏效果
如上面代码。
5.4 图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>imagetest</title> <style> body{ margin:10px auto; width:70%; height:auto; background-color: burlywood; } .image{ border:0px solid darkgray; /*此处的边界容易造成布局上的问题， 如果仍要坚持使用的话最好是将这个img包含在一个比他还要大的div中*/ width:25%; height:auto; float:left; /*display:inline;*/ test-align:center; margin:5px 0px; } img{ width:200px; height:200px; margin:5px; opacity: 0.5; /*opacity用来调整透盒子明度*/ } .text{ font-size:12px; margin-bottom:5px; } .container{ width:100%; /*height:auto;*/ /*width:auto;*/ /*margin:auto auto;*/ } </style> <!--在设计图片每行多少个的时候，需要学习其他音乐网站的写法， 这里有很多种处理方式，像每行规定好多少个，每一个放在一个div中 具体样式在div中进行处理，间隔用div内部的div的margin进行处理 这是一种处理方式，另外一种就是提前规划好每个图片div的大小，调整其大小 --> </head> <body> <div class="container"> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div class="image"> <a href="#" target="_self"> <img src="bg.jpg" alt="风景"/> </a> </div> <div style="clear:both"> <!--通过添加这一个clear:both;--> <!--这个属性设置可以让父元素里面有float元素把父元素撑起来--> </div> </div> </body> </html>
