CSS魔法（二）
# 文档类型<!DOCTYPE>
<!DOCTYPE html>
# 字符集
<meta charset="UTF-8" />
# 换行标签
<br />
# div span标签
后代选择器 子代选择器 >
交集选择器
div.one{
}
并集选择器
行内元素和块级元素的区别
块级元素：独占一行 能设置大小
行内元素：不能设置大小 display：inline-block可将行内元素转为块级元素
行高 line-height 文字居中
<style> div { height: 50px; width: 200px; background-color: pink; line-height: 50px; } </style> <div>我是行高</div>
权重
权重值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #ya { /*权重 0,1,0,0*/ color: blue; } .yase { /* 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0*/ color: green; } div { /* 权重 0, 0, 0, 1*/ /* 权重 0, 0, 0, 1*/ color: red; } div { /* 权重 0, 0, 0, 1*/ /* 权重 0, 0, 0, 1*/ color: hotpink!important; } * { 0 0 0 0 } /** 0000 div 0001 .one 0010 #two 0100 行内 1000 important ∞*/ </style> </head> <body> <div class="yase" id="ya" style="color: orange">亚瑟</div> </body> </html>
权重相同 则就近原则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { 0001 color: red; } div { 000 color: green; }*/ div p {/* 0001 + 0001 = 0002*/ color: green; } p { /*0001*/ color: red; } .feng { /* 0010*/ color: blue; } /*1. 权重相同 则就近原则*/ /*2. 权重会叠加0001 + 0001 = 0002*/ </style> </head> <body> <div> <p class="feng"> 凤姐 </p> </div> </body> </html>
透明
div { width: 200px; height: 200px; /*background-color: #000;*/ color: #fff; background: rgba(0, 0, 0, .3); /* red green blue alpha 0~1 */ }
表格细线边框
<style> table { width: 500px; height: 300px; border: 1px solid red; } td { border: 1px solid red; text-align: center; } table, td { border-collapse: collapse; /*合并相邻边框*/ } </style>
a链接
a:link {color: #FF0000} /* 未访问时的状态 */ a:visited {color: #00FF00} /* 已访问过的状态 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */ a:active {color: #0000FF} /* 鼠标按下去时的状态 */
内边距问题
padding:0px,5px,10px,15px;就是上为0，右为5，下为10，左为15，
padding的顺序是顺时针方向的
padding会撑开 带有widht 和height盒子，要记得减去padding值
<style> div { width: 160px; height: 160px; border: 1px solid red; padding-left: 20px; /*非常严重的问题， padding 会撑开 带有 widht 和height盒子*/ /* 1. 我们要求这个 div 就是标准的 200 * 200 2. 但是我们给了padding就撑开盒子了 240 3. 问我们怎样能保证盒子 不超过 200 * 200 */ } </style>
外边距
控制盒子与盒子之间的间距
盒子居中三种方式
/* margin: 0 auto; 通俗写法 0 auto 上下是 0 左右是auto 自动 水平居中对齐 */ /* margin-left: auto; margin-right: auto; 自动充满*/ /* margin: auto; 上下左右都是auto*/
外边距塌陷
外边距合并 尽量避免
圆角边框（border-radius: 150px）
<style> div { width: 312px; height: 312px; /*background-color: pink;*/ margin: 100px auto; /*border-radius: 50%; 让一个正方形 变成圆圈*/ border: 1px solid red; border-radius: 150px 0; } </style>
圆角练习
<style> body { background-color: #ccc; } .radius a { width: 172px; height: 172px; background-color: #fff; display: inline-block; margin: 30px; border-radius: 50%; text-align: center; line-height: 172px; color: red; text-decoration: none; font-weight: 700; } .radius a:hover { background-color: red; color: #fff; } </style>
<div class="radius">
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
</div>
效果
盒子阴影
<style> div { width: 200px; height: 200px; /*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/ /*transition: all 1s;*/ } div:hover { /*鼠标经过div时候的样子。。。*/ box-shadow: 0 15px 30px rgba(0,0,0,0.1); } </style>
浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .one { width: 300px; height: 200px; background-color: red; float: left; } .two { width: 320px; height: 200px; float: left; background-color: greenyellow; } .three { width: 320px; height: 200px; float: left; background-color: blue; } .four { width: 320px; height: 200px; float: right; background-color: cyan; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </body> </html>
