css属性3
css属性，只有块级标签设计宽和高才会生效:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <link rel="stylesheet" href="zz.css" type="text/css"> <style> .c1 { width: 360px; height: 200px; background-color: #75b976;} span { width: 100px; height: 120px; background-color: #20201c; font-size: 44px; font-weight: 800; font-color: yellow; color: white; color:#FFFFFF; color:rgba(255,255,255,0.5) } a{ text-decoration: none; } </style> </head> <body> <div class="c1">div</div> <div>div1</div> <span>我是span</span> <a href="https://www.baidu.com">baidu</a> <p></p> </body> </html>
选择器的优先级
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <link rel="stylesheet" href="zz.css" type="text/css"> <style> .c1 { width: 360px; height: 200px; background-color: #75b976;} span { width: 100px; height: 120px; background-color: #20201c; font-size: 44px; font-weight: 800; font-color: yellow; color: white; color:#FFFFFF; color:rgba(255,255,255,0.5) } a{ text-decoration: none; } </style> </head> <body> <div class="c1">div</div> <div>div1</div> <span>我是span</span> <a href="https://www.baidu.com">baidu</a> <p></p> </body> </html>
display:''inline-block" 既有行内标签又有块级标签的作用
display: none
边框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框</title> <style> .c1{ display:block; } .c3, .c4 {height:100px; width:100px; background-color:blue; border:1px solid green;} .c4{ background-color:red; } <!--.c3{--> <!--display:none;}--> </style> </head> <body> <span class="c1">这是一个span</span> <span>这是一个span</span> <hr> <div class="c3"></div> <div class="c4"></div> </body> </html>
盒子模型：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <!--magin:外边距 border: 边框 padding 内填充 content 内容--> <style> .c1{ width:200px; height:100px; background-color: red; margin: 10px auto } .c2{ margin-top:25px; border: solid black; background-color:blue; padding: 10px 20px 30px 40px; /*<!--padding-top:20px;--> <!--padding-buttom:25px;--> <!--padding-left:30px;--> <!--padding-right:40px;--> 还是得用这个注释，不然后面的css不能读出来*/ /*padding: 10px 20px 30px 40px;*/ } </style> <!--设置外边距的距离以最大的来看--> </head> <body> <div class="c1"></div> <div class="c2">111</div> </body> </html>
浮动
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> /*.left{ background-color: #4d4d4d; height: 600px; width: 20%; float:left; } .right{ background-color: red; height: 600px; width:80%; float:right; }*/ body{ margin:0; } .c1{ border:1px solid black; } .c2{ height: 50px; width: 50px; background-color: red; border:1px solid blue; float:left; } .c3{ height: 100px; background-color: yellow } .c4{ clear:left } </style> <!--clear 属性可以设置哪一侧没有浮动，浮动的弊端，如果有浮动，后面的元素会自动填充到原本的元素里面 解决方法，添加一个div 设置clear 也可以用伪元素标签 .c1:after{ content:""; clear:left;display:block;}--> </head> <body> <!--<div class="left"></div>--> <!--<div class="right"></div>--> <div class="c1"> <div class="c2"></div> <div class="c2"></div> <div class="c4"></div> </div> <div class="c3"></div> </body> </html>
溢出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>溢出</title> <style> .c1{ width: 50px; height: 50px; border: 1px solid black; overflow: scroll; /* 溢出visible默认值，hidden超出部分被删减 scroll内容被修建，浏览器以滚动条以便查看其余的内容 auto如果被修建，会显示滚动条 */ } .c2{ height: 128px; width: 128px; border: 3px solid green; border-radius: 50%; overflow: hidden; } .c2>img{ width: 100%; } </style> </head> <body> <div class="c1"> 富强民主 在昨天的日子里 今天我们也应当 前世不做 </div> <div class="c2"><img src="timg.jpg" alt=""></div> <!--头像--> </body> </html>
定位
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位</title> <style> body{ margin: 0; } .c{ width: 200px; height: 200px; } .c1{ background-color: red; } .c2{ background-color: green; position: relative; left: 100px; /* 相对定位 相对于祖先元素*/ } .c3{ background-color: blue; position: absolute; left: 200px; top: 0; /* 绝对定位，依次向上找到最近的父标*/ } .c4{ height: 20px; width: 20px; color: white; background-color: lawngreen; font-size: 12px; position: fixed; right: 25px; bottom: 25px; } </style> </head> <body> <div class="c c1"></div> <div class="c c2"></div> <div class="c c3"></div> <div class="cc c4"></div> </html>
