css基础示例代码
选择器
引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*写我们的css代码*/ /*选择器 标签选择器 共性*/ span{ color: yellow; } </style> <!-- <style type="text/css"> @import url('./index.css'); </style> --> <!-- 链接式 --> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 1.行内样式 2.内接样式 3.外接样式 3.1链接式 3.2导入式 --> <div> <p style="color: green">我是一个段落</p> </div> <div> <div> <span>我是另一个段落</span> <span>我是另一个段落</span> <span>我是另一个段落</span> <a href="#">路飞</a> </div> </div> </body> </html>
选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的选择器</title> <style type="text/css"> body{ color:gray; font-size: 12px; } /*标签选择器*/ /*p{ color: red; font-size: 20px; } span{ color: yellow; }*/ #box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; } .title{ color: yellowgreen; font-size: 12px; } .alex{ color: red; } .active{ color: yellow; } </style> </head> <body> <!-- css的选择器：1.基本选择器 2.高级选择器 1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等 不管标签藏的多深，都能选中 选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ 2.id选择器 # 选中id 同一个页面中id不能重复。 任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA 3.类选择器 1.所谓类 就是class . class与id非常相似 任何的标签都可以加类 但是类是可以重复 归类 2.同一个标签中可以携带多个类 用空格隔开 类的使用 能够决定前端工程师的css水平到底有多牛逼？ 一定要有”公共类“的概念 总结： 1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式 2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用 玩好了类 就等于玩好了css中的1/2 到底使用id还是用class？ 答案：尽可能的用class。除非一些特殊情况可以用id 原因：id一般是用在js的。也就是说 js是通过id来获取到标签 --> <div> <p>我是一个段落</p> <ul> <li> <p>1</p> <span> 哈哈哈 </span> </li> </ul> <p>路飞</p> </div> <div> <div> <div> <div> <div> <p>我是另一个段落</p> </div> </div> </div> </div> </div> <div id="box"> <span id="s1">123</span> <span id="s2">234</span> </div> <div class="box2"> <h3 id="h" class="title xiaoma egon alex">我是一个三级标题</h3> <h3>我是一个三级标题</h3> <h3 class="title">我是一个三级标题</h3> <h3>我是一个三级标题</h3> <h3>我是一个三级标题</h3> </div> </body> </html>
合理使用class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小练习</title> <style type="text/css"> .lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; } /* .lv{ color: green; font-size: 40px; } .lv2{ color: green; font-size: 14px; text-decoration: underline; } .lv3{ font-size: 40px; text-decoration: underline; }*/ </style> </head> <body> <!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div> </body> </html>
高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级选择器</title> <style type="text/css"> /*后代选择器 在css中使用非常频繁*/ /*div p{ color: red; } div div p{ color: yellow; } .container div p{ color: green; }*/ /*子代选择器*/ .container>p{ color: yellowgreen; } /*交集选择器*/ h3{ width:300px; color: red; } .active{ font-size: 30px; } h3.active{ background-color: yellow; } /*并集选择器 （组合） 设置多个标签中的统一样式*/ a,h4{ color: #666; font-size: 20px; text-decoration: none; } /* * 通配符选择器 */ /* 性能有点差*/ html,body,div,p,span,a{ color: red; } </style> </head> <body> <div class="container"> <p>我是另一个段落</p> <div> <p>我是个段落</p> <a href="#">luffy</a> </div> <p>我是另外一个段落2</p> <ul> <li class="item"> <h3 class="active">我是一个H3</h3> <h4>我是一个h4标题</h4> </li> <li> <h4>我是一个h4标题</h4> <a href="#">BAT</a> </li> </ul> </div> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> label[for]{ color: red; font-size: 20px; } label[for='pwd']{ color: yellow; } /*以...开头*/ label[for^='vip']{ font-size: 30px; } /*以...结尾*/ label[for$='p2']{ font-size: 20px; } label[for*='ser']{ color: green; } input[type='text']{ background-color: purple; } </style> </head> <body> <!-- 属性选择器 通常在 表单控件中 使用比较频繁--> <div class="box"> <form action=""> <label for="user">用户名：</label> <input type="text" name="" id="user"> <label for="pwd">密码：</label> <label for="vip1">vip1</label> <label for="vip2">vip2</label> <label for="user2">用户名2：</label> <label for="user3">用户名3：</label> </form> </div> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*'爱恨原则' love hate*/ /*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标点住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; } /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色 隔行换色*/ div ul li:nth-child(5n+1){ font-size: 50px; color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">张三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王八</a> </li> <li class="item4"> 4 <a href="#">赵六</a> </li> <li class="item4"> 5 <a href="#">赵六</a> </li> <li class="item4"> 6 <a href="#">赵六</a> </li> <li class="item4"> 7 <a href="#">赵六</a> </li> <li class="item4"> 8 <a href="#">赵六</a> </li> <li class="item4"> 9 <a href="#">赵六</a> </li> <li class="item4"> 10 <a href="#">赵六</a> </li> </ul> </div> </body> </html>
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; } </style> </head> <body> <p> 我是一个段落 </p> </body> </html>
css继承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> .father{ font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承 有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素 像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承 --> <div class="father" id="egon"> <div class="child"> <p>alex</p> </div> </div> <p>小马哥</p> </body> </html>
层叠权重
层叠性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性</title> <style type="text/css"> /*1 0 0*/ #box{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; } </style> </head> <body> <!-- 层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了 权重： 谁的权重大，浏览器就会显示谁的属性 谁的权重大？ 非常简单 数数 id的数量 class的数量 标签的数量 --> <p id="box" class="container"> 猜猜我是什么颜色 </p> </body> </html>
权重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*2 0 1*/ #box1 #box2 p{ color: yellow; } /*1 1 1*/ #box2 .wrap3 p{ color: red; } /*1 0 3*/ div div #box3 p{ color: purple; } /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3 p{ color: blue; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
层叠性权重相同处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*1 1 1 */ /*#box2 .wrap3 p{ color: yellow; }*/ /*1 1 1*/ /*#box1 .wrap2 p{ color: red; }*/ /* 0*/ /*继承来的*/ #box1 #box2 .wrap3{ color: red; } .wrap1 #box2 .wrap3{ color: green; } /*选中来的*/ /*1 1 1*/ /*#box2 .wrap3 p{ color: green; }*/ </style> </head> <body> <!-- 当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上 继承来的属性 权重为0 总结： 1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上 2.如果没有被选中标签元素，权重为0。 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性 --> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
权重深入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow ; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style> </head> <body> <!-- ！important:设置权重为无限大 !important 不影响继承来的权重，只影响选中的元素 --> <div> <p class="spe1 spe2">我是什么颜色</p> <p class="spe2 spe1">我是什么颜色</p> </div> <div class="list"> <ul> <li> 我是一个li标签 </li> </ul> </div> </body> </html>
盒模型
盒模型的认知
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; padding: 20px; border: 5px solid red; } </style> </head> <body> <!-- 盒模型： 在网页中 基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型 重要的属性： width,height,padding,border, margin width: 指的是内容的宽度，而不是整个盒子真实的宽度 height: 指的是内容的高度，而不是整个盒子真实的高度 做一个宽度402*402的盒子，你应该如何设计？ --> <div> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
盒模型的计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> /*div{ width: 400px; height: 400px; border: 1px solid red; }*/ div{ width: 50px; height: 50px; border: 1px solid red; padding: 175px; } /*div{ width: 0; height: 0; border: 1px solid red; padding: 200px; }*/ </style> </head> <body> <!-- 如果想保证盒子的真实宽度，加width应该减padding 减width 应该加padding --> <div> 内容 </div> </body> </html>
认识padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*padding: 30px;*/ background-color: red; /*border: 5px solid yellow;*/ /*小属性设置*/ /*padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;*/ /*综合属性设置，用空格隔开*/ /*上 右 下 左*/ /*padding: 20px 30px 40px 50px ;*/ /*上 左右 下*/ /*padding: 20px 30px 40px;*/ /* 上下 左右*/ /*padding: 20px 30px;*/ /*上下左右*/ padding: 20px; } </style> </head> <body> <!-- padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样 也就是说background-color这个属性将填充所有的border以内的区域 就是边框到内容之间的距离 padding有四个方向。所以说我们能分别描述4个方向的padding 方法有两种：1.写小属性 2.写综合属性 用空格隔开 --> <div class="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
一些标签默认有padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <!-- 比如说通常我们做站的时候，要清除默认的padding，margin * 效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表） body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } --> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
认识border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style type="text/css"> .box{ width: 200px; height: 200px; /*border: 5px solid red;*/ /*按照3要素*/ /*border-width: 5px; border-style: solid; border-color: red;*/ /*border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */ /* 按照方向分*/ /*border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;*/ /*border: none;*/ /*设置border没有样式*/ /*border-left: none;*/ /*border-top: 0;*/ border-left: 10px solid red; } </style> </head> <body> <!-- border: 边框的意思 边框有三个要素： 粗细 线性 颜色 如果颜色不写，默认是黑色的 如果 粗细不写 不显示。 只写线性样式，默认的有上下左右 3px的宽度 solid 默认的黑色 --> <div class="box"></div> </body> </html>
使用border制作小三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*小三角 箭头指向下方*/ div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div></div> </body> </html>
初始margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 300px; height: 300px; border: 1px solid red; background-color: green; /*margin: 20px;*/ margin-top: 30px; margin-left: 50px; margin-bottom: 100px; } p{ border: 1px solid green; } </style> </head> <body> <!-- margin: 外边距 指的是距离 --> <div></div> <p>我是一个p标签</p> </body> </html>
初始标准文档流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ font-size: 50px; } </style> </head> <body> <!-- 什么是标准文档流 宏观的将，我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ，像 “织毛衣” 而设计软件 ，想往哪里画东西 就去哪里画 标准文档流下 有哪些微观现象？ 1.空白折叠现象 2.高矮不齐，底边对齐 3.自动换行，一行写不满，换行写 --> <div> 文字文字文字文字<span>姚明</span>文字文字文字文字文字文字 <img src="./images/企业1.png" alt=""> <img src="./images/企业2.png" alt=""> <img src="./images/企业2.png" alt=""> <img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""> </div> </body> </html>
块级元素和行内元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /*将块元素转化成行内元素*/ display: inline-block; width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; width: 200px; height: 40px; font-size: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; height: 40px; /*将行内元素转化成块级元素*/ display: block; /*隐藏当前的标签 不占位置*/ /*display: none;*/ /*隐藏当前的标签，占位置*/ visibility: hidden; } img{ width: 300px; height: 300px; /*隐藏当前的标签*/ /*display: none;*/ } </style> </head> <body> <div class="box1">内容</div> <div class="box1">内容</div> <div class="box2">内容</div> <span>alex</span> <span>alex</span> <!-- form表单中 input textarea select --> <img src="./images/企业1.png" alt=""> <img src="./images/企业2.png" alt=""> </body> </html>
浮动与清除浮动
浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } </style> </head> <body> <!-- 浮动是css里面布局最多的一个属性 效果： 两个元素并排了，并且两个元素都能够设置宽度和高度 浮动想学好：一定要知道它的四个特性： 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 --> <div class="box1"></div> <div class="box2"></div> </body> </html>
浮动的元素脱标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <!-- 脱标： 脱离了标准文档流 小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。 浮动元素 “飘起来了” --> <div class="box1">小红</div> <div class="box2">小黄</div> <!-- span标签不需要转成块级元素，也能够设置宽高。 所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高 --> <span>span标签</span> <span>span标签</span> </body> </html>
浮动元素互相贴靠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; float: left; } .box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <!-- <span>文字</span> <span>文字</span> --> <!-- 如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。 如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠 --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>
浮动元素字围效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; } </style> </head> <body> <!-- 所谓字围效果： 当div浮动，p不浮动 div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果 关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则 永远不是一个盒子单独浮动，要浮动就要一起浮动。 --> <div> <img src="./images/企业1.png" alt=""> </div> <p> 123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </body> </html>
浮动元素紧凑效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ float: left; background-color: red; } </style> </head> <body> <!-- 收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像） 到目前为止，我们知道浮动的四个特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 如果想制作整个网页，就是通过浮动来实现并排 --> <div> alex </div> </body> </html>
为什么要清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮动 父盒子一般不设置高度*/ /*出现这种问题，我们要清除浮动带来影响*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; float: left; height: 100px; background-color: blue; } .father2{ width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body> </html>
清除浮动1：给父盒子设置高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; /*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，要求父盒子高度变大，而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/ /*固定导航栏*/ /*height: 40px;*/ } ul{ list-style: none; height: 40px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
清除浮动2：clear-both
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } </style> </head> <body> <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响--> <!-- 内墙法 --> <!-- 无缘无故加了div元素 结构冗余 --> </ul> <div class="clear"></div> </div> <div class="box"> </div> </body> </html>
清除浮动3：伪元素清除法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素清除法（常用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } /*伪元素选择器*/ .clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; height: 0; visibility: hidden; /* 新浪首页清除浮动伪元素方法 content: "."; display: block; height: 0; clear: both; visibility: hidden */ } </style> </head> <body> <div class="clearfix"> <ul> <li>Python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
清除浮动3：overflow-hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素清除法（常用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .box{ width: 400px; overflow: hidden; } .box ul li { float: left; width: 100px; height: 40px; background-color: red; } .box2{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box"> <ul> <li>Python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box2"> </div> </body> </html>
overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*overflow: auto;*/ } div{ width: 300px; height: 300px; border: 1px solid red; overflow: hidden; } </style> </head> <body> <div> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
margin塌陷问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid gray; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } span{ background-color: red; } span.a{ margin-right: 20px; } span.b{ margin-left: 20px; } </style> </head> <body> <div class="father"> <!-- 当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷 浮动的盒子垂直方向 不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> <span class="a">内容</span> <span class="b">内容</span> </body> </html>
margin-0auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0px auto; /*margin-left: auto; margin-right: auto;*/ text-align: center; float: left; } </style> </head> <body> <!-- 1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; --> <div> 文字 </div> </body> </html>
善于使用父padding而不是margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px; margin-top: 30px;*/ } </style> </head> <body> <!-- 因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行 所以父亲就掉下来 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
文本与background
文本属性和字体属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 100px; /*background-color: red;*/ border: 1px solid red; /*设置字体大小 px：像素 rem em %*/ font-size: 20px; font-weight: 700; font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; text-align: center; text-decoration: none; color: blue; cursor: pointer; /*line-height: 100px;*/ /*1em = 20px*/ /*设置首字缩进 单位：em为准*/ text-indent: 2em; } </style> </head> <body> <div> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
单行文本垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 50px; border: 1px solid red; /*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/ line-height: 50px; font-size: 18px; } </style> </head> <body> <div> 内容国家 </div> </body> </html>
多行文本垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 175px; border: 1px solid red; padding-top: 25px; /*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/ line-height: 30px; font-size: 17px; } </style> </head> <body> <div> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div> </body> </html>
font-family
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字体</title> <style> p{ width: 300px; height: 60px; /* 等价于 font-size: 14px; line-height: 30px; font-family: '宋体'; */ font:14px/30px "Arial","Hanzipen SC","微软雅黑"; } </style> </head> <body> <!-- 使用font-family注意几点： 1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装， 比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体， 那么就会变成宋体 页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman 2.为了防止用户电脑里面，没有微软雅黑这个字体。 就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面， 没有安装微软雅黑字体，那么就是宋体： font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。 3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体， 就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体"; 4.所有的中文字体，都有英语别名， 我们也要知道： 微软雅黑的英语别名： font-family: "Microsoft YaHei"; 宋体的英语别名： font-family: "SimSun"; font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高可以用百分比，表示字号的百分之多少。 一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”; 等价于 font:16px/300% “宋体” --> <p> 我是文本</p> </body> </html>
超链接美化案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> </body> </html>
background-color
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; /*background-color: rgb(0,0,0);*/ background-color: #f00; /* 颜色表示方法有哪些？ 一共有三种：单词、rgb表示法、十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。 用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。 如果此项的值，是255，那么就说明是纯色： 黑色： background-color: rgb(0,0,0); 光学显示器，每个元件都不发光，黑色的。 白色： background-color: rgb(255,255,255); 颜色可以叠加，比如黄色就是红色和绿色的叠加： background-color: rgb(255,255,0); 再比如： background-color: rgb(111,222,123); 就是红、绿、蓝三种颜色的不同比例叠加。 16进制表示法 红色： background-color: #ff0000; 所有用#开头的值，都是16进制的。 #ff0000：红色 16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。 ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0); 怎么换算的？我们介绍一下 我们现在看一下10进制中的基本数字（一共10个）: 0、1、2、3、4、5、6、7、8、9 16进制中的基本数字（一共16个）: 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 16进制对应表： 十进制数 十六进制数 0 0 1 1 2 2 3 3 …… 10 a 11 b 12 c 13 d 14 e 15 f 16 10 17 11 18 12 19 13 …… 43 2b …… 255 ff 十六进制中，13 这个数字表示什么？ 表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。 小练习： 16进制中28等于10进制多少？ 答：2*16+8 = 40。 16进制中的2b等于10进制多少？ 答：2*16+11 = 43。 16进制中的af等于10进制多少？ 答：10 * 16 + 15 = 175 16进制中的ff等于10进制多少？ 答：15*16 + 15 = 255 所以，#ff0000就等于rgb(255,0,0) background-color: #123456; 等价于： background-color: rgb(18,52,86); 所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。 十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc; 比如： background-color:#ff0000; 等价于 background-color:#f00; 比如： background-color:#112233; 等价于 background-color:#123; 只能上面的方法简化，比如 background-color:#222333; 无法简化！ 再比如 background-color:#123123; 无法简化！ 要记住： #000 黑 #fff 白 #f00 红 #333 灰 #222 深灰 #ccc 浅灰 */ } </style> </head> <body> <div> </div> </body> </html>
background-img
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1500px; height: 1600px; background-image: url(./bojie.jpg); /*平铺*/ /*background-repeat*/ /*不平铺*/ /*background-repeat: no-repeat;*/ background-repeat: repeat-x; /*padding: 100px;*/ } </style> </head> <body> <div> </div> </body> </html>
repeat-应用案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } body{ background-image: url(./images/timg2.jpeg); } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> </body> </html>
background-position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 1500px; height: 1600px; background-image: url(./bojie.jpg); background-repeat: no-repeat; /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/ background-position: -100px -100px; } </style> </head> <body> <div> 波姐波姐 </div> </body> </html>
雪碧图技术
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0 } .box1{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -528px; } .box2{ width: 48px; height: 48px; background-image: url(./images/1.png); background-repeat: no-repeat; background-position: 0 -440px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
background-position位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1500px; height: 1600px; border: 1px solid red; background-image: url(./bojie.jpg); background-repeat: no-repeat; /*水平方向 left center right 垂直方向 top center bottom */ background-position:right bottom; } </style> </head> <body> <div> </div> </body> </html>
通天banner
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } body{ /*background-image: url(./images/banner.jpg);*/ /*background-repeat: no-repeat;*/ /*水平居中通天banner图*/ /*background-position: center top;*/ /*综合属性设置*/ background: red url('./images/banner.jpg') no-repeat center top; } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> </body> </html>
background-attachment
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1200px; height: 2000px; border: 1px solid red; background: url(./bojie.jpg) no-repeat 0 0 fixed; /*固定 背景*/ /*background-attachment: fixed;*/ color: white; } </style> </head> <body> <div> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> </body> </html>
相对定位
相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; /*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/ position: relative; /*设置相对定位 我们就可以使用四个方向的属性 top left right bottom 相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置 */ top: 20px; left: 30px; } </style> </head> <body> <!-- 定位有三种： 1.相对定位 2.绝对定位 3.固定定位 这三种定位，每种定位都暗藏玄机，所以我们要一一单讲 position:relative; position:absolute; position:fixed; --> <div class="box1"></div> </body> </html>
相对定位的特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 50px; left: 100px; } .box3{ background-color: blue; } </style> </head> <body> <!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
相对定位的用途
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接美化</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{ width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li.xiaoming{ position: relative; top: 40px; left: 30px; } .nav ul li a{ display: block; width: 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">网站导航</a> </li> <li class="xiaoming"> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> </body> </html> <!-- 因为相对定位有坑，占着茅房不拉屎，恶心人，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用： 1.微调元素位置 2.做绝对定位的参考（父相子绝） 讲绝对定位会讲 -->
相对定位的用途2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ margin: 100px; } .user{ font-size: 25px; } .btn{ position: relative; top: 3px; left: -5px; } </style> </head> <body> <!-- 微调我们元素位置--> <div> <input type="text" name="username" class="user"> <input type="button" name="" value="点我" class="btn"> </div> </body> </html>
绝对定位
绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; /*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/ position: absolute; } .box2{ background-color: green; } .box3{ background-color: blue; } span{ width: 100px; height: 100px; background-color: pink; position: absolute; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span>文字</span> </body> </html>
绝对定位参考点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 100%; height: 2000px; border: 10px solid green; } .box{ width: 200px; height: 200px; background-color: red; /*绝对定位参考点： 1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。 */ position: absolute; bottom: 100px; left: 18px; } </style> </head> <body> <div class="box"> </div> </body> </html>
绝对定位以盒子作为参考点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*父盒子设置相对定位*/ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; position: relative; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素设置了绝对定位*/ position: absolute; top: 0; left: 0; } /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点 这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点 */ </style> </head> <body> <div class="box"> <div class="box2"> <p></p> </div> </div> </body> </html>
绝对定位以父辈盒子作为参考点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*父盒子设置相对定位*/ position: absolute; padding: 50px; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素设置了绝对定位*/ position: absolute; top: 10px; left: 20px; } </style> </head> <body> <!-- 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。 注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。 --> <div class="box"> <p></p> </div> </body> </html>
绝对定位的盒子无视父辈的padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; margin: 100px; border: 10px solid red; position: relative; padding: 50px; } .father p{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 10px; left: 40px; } </style> </head> <body> <div class="father"> <p></p> </div> </body> </html>
绝对定位盒子居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; /*margin: 0 auto;*/ position: relative; left: 50%; margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ } </style> </head> <body> <div class="box"> <div class="c"></div> </div> </body> </html>
固定定位
固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; /*固定定位：固定当前的元素不会随着页面滚动而滚动， 特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点 如果用bottom描述，那么是以浏览器的左下角为参考点 作用： 1.返回顶部栏 2.固定导航栏 3.小广告 */ position: fixed; bottom: 30px; right: 40px; } </style> </head> <body> <div> <p></p> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </div> </body> </html>
固定定位-返回顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; position: fixed; bottom: 30px; right: 40px; line-height: 100px; font-size: 20px; text-align: center; color: #fff; } </style> </head> <body> <div> <p>返回顶部</p> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </div> <script src="./js/jquery-3.2.1.min.js"></script> <script type='text/javascript'> // 这下面的代码后面咱们会讲，大家不用在这个初学阶段去纠结下面的代码。 $(function(){ $('p').click(function(){ $('html').animate({ "scrollTop":0 },2000) }) }) </script> </body> </html>
固定定位-固定导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /*给body设置导航栏的高度，来显示下方图片的整个内容*/ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /*设置固定定位之后，一定一定要加top属性和left属性*/ position: fixed; top: 0; left: 0; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; font: 20px/49px "Hanzipen SC"; background-color: purple; } .wrap .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> </ul> </div> </div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </body> </html>
父相子绝案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 277px; height: 284px; border: 1px solid red; margin: 100px; position: relative; } .box img{ width: 277px; height: 177px; } .box .dtc{ width: 52px; height: 27px; background: url(./images/common.png) no-repeat -54px 0; position: absolute; top: -9px; left: 9px; } .box .zhegai{ width: 277px; height: 38px; color: #fff; line-height: 38px; text-align: center; background-color: rgba(0,0,0,.7); position: absolute; top: 139px; left: 0; } </style> </head> <body> <div class="box"> <img src="./images/longxia.jpg" alt=""> <span class="dtc"></span> <div class="zhegai">小龙虾</div> </div> </body> </html>
z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0 } .box1{ width: 200px; height: 200px; background-color: red; position:relative; top: 30px; left: 40px; z-index: 3; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; top: 0; left: 0; z-index: 2; } .box3{ width: 200px; height: 200px; background-color: green; float: left; margin-left: 20px; margin-top: -30px; } </style> </head> <body> <!-- z-index 1.z-index 值表示谁压着谁，数值大的压盖住数值小的 2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index 3.z-index值没有单位，就是一个正整数，默认的z-index值为0 4.如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 5.从父现象：父亲怂了，儿子再牛逼也没用 --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
从父现象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0 } .tianliang{ width: 200px; height: 200px; background-color: red; position: relative; z-index: 3; } .tianliang .sendie{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 240px; left: 300px; z-index: 333; } .lzy{ width: 200px; height: 200px; background-color: yellow; position: relative; z-index: 4; } .lzy .brother{ width: 100px; height: 100px; background-color: green; position: absolute; top: 100px; left: 320px; z-index: 111; } </style> </head> <body> <div class="tianliang"> <p class="sendie"></p> </div> <div class="lzy"> <p class="brother"></p> </div> </body> </html>
z-index的用途
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /*给body设置导航栏的高度，来显示下方图片的整个内容*/ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /*设置固定定位之后，一定一定要加top属性和left属性*/ position: fixed; top: 0; left: 0; z-index: 9999999; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; font: 20px/49px "Hanzipen SC"; background-color: purple; } .wrap .nav ul li a:hover{ background-color: red; font-size: 22px; } .app{ width: 100px; height: 100px; background-color: red; position: relative; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> <li> <a href="#">网页开发</a> </li> </ul> </div> </div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <div class="app"></div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </body> </html>
