css盒子模型
网页布局的关键点：盒子
盒子模型组成部分
盒子的组成
- margin(外边距)
- border(边框)
- padding(内边距)
- content(内容)
border
- border-width:盒子的宽度
- border-style:边框的款式 默认值：none(无款式) solid(实线) dashed(虚线) dotted(点线)
- border-color:边框的色彩
简写形式
border:border-width border-style border-color<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 200px; height: 200px; background-color: #0000FF; border: 10px solid #008000; } </style> </head> <body> <div></div> </body></html>border的边框写法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> input { border: none; border-bottom:1px solid red; } </style> </head> <body> 账号：<input type="text" name="username"> <br /> 明码：<input type="password" name="password"> <br /> </body></html>border-collapse
border-collapse:表格合并
因为表格中的行标签和单元格标签都领有本人的边框 因而须要合并边框
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> table, tr, td, th { border-collapse: collapse; } .t-red { background-color: hotpink; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500"> <caption> <h2>小说排行耪</h2> </caption> <tr class="t-red"> <th>排名</th> <th>关键词</th> <th>今日搜寻</th> <th>最近七日</th> <th>相干链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>345</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>2</td> <td>盗墓笔记</td> <td>34555</td> <td>123444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td>24555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr class="t-red"> <td>4</td> <td>东游记</td> <td>3455</td> <td>3444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>5</td> <td>甄嬛传</td> <td>3555</td> <td>1444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>6</td> <td>水浒传</td> <td>355</td> <td>12344</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr class="t-red"> <td>7</td> <td>三国演义</td> <td>3555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> </table> </body></html>padding
padding：盒子间隔内容之间的间隔 应用内边距之后盒子会变大
padding设置
padding简写
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 200px; height: 200px; color: red; border: 1px solid blue; padding: 20px 50px 20px 60px; } </style> </head> <body> <div>尧子陌</div> </body></html>新浪导航栏
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .nav { height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid gray; } .nav>a { display: inline-block; line-height: 41px; text-decoration: none; color: #000000; padding: 0px 20px; } .nav>a:hover { background-color: #eee; color: red } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">挪动客户端</a> <a href="#">登录</a> <a href="#">微博</a> <a href="#">博客</a> </div> </body></html>效果图
盒子理论尺寸
盒子的宽度：Elements width= content Width + padding Width + border 盒子的高度：Elements height= ontent height + padding height +border在真正的理论开发中，内边距是肯定要实在存在的，所以只能减去盒子的宽高，来维持盒子的宽高不变
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .nav { width: 200px; height: 200px; background-color: #0000FF; padding: 20px; border: 1px solid red; } /* 盒子的理论宽度=200px+20px+20px+1px+1px=242px */ /* 盒子的理论高度=200px+20px+20px+1px+1px=242px */ </style> </head> <body> <div class="nav"></div> </body></html>课堂案例
案例1
盒子的宽度为130
案例2
盒子宽度为200px+100px+50px+2px=352px
盒子高度为200px+50px+50px+1px+5px=306px
padding不影响盒子大小的状况下
在非凡状况下，如果指定的盒子没有给宽度，则盒子不会被padding值撑开。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .nav { height: 200px; width: 200px; background-color: #0000FF; } .nav p { height: 200px; padding-left: 20px; /*此时p的宽度和父元素同为200px */ } </style> </head> <body> <div class="nav"> <p></p> </div> </body></html>margin
margin是外边距，是盒子与盒子之间的间隔
margin的简写
同理和padding值的简写统一
块级盒子程度居中对齐
满足两种条件能力让盒子居中对齐1. 盒子必须指定宽度2. 左右的外边距margin设置auto设置auto的三种办法
- margin-left:auto margin-right:auto;
- margin:auto
- margin:0 auto;
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav { width: 200px; height: 200px; background-color: #0000FF; margin: 20px auto; } </style> </head> <body> <div class="nav"></div> </body></html>盒子程度居中对齐和文字水平居中对齐
text-align:不仅能够让文字水平居中对齐，还能够让行内块元素和行内元素程度居中对齐margin:auto :能够让块级盒子程度居中对齐
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: rgba(0, 0, 0, 0.6); } .nav { width: 200px; height: 200px; background-color: #0000FF; color: wheat; margin: 20px auto; text-align: center; line-height: 200px; } </style> </head> <body> <div class="nav">尧子陌</div> </body></html>插入图片和背景图片的区别
插入图片
插入图片个别用于展现类 ，通过盒模型的padding和margin来挪动地位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .nav { width: 800px; height: 800px; border:1px solid red; } .nav img { margin: 20px; margin-top: 50px; } </style> </head> <body> <div class="nav"> <img src="../WEB照片/素材.jpg" alt=""> </div> </body></html>背景图
背景图片个别用于做一些精灵图等等，通过background-position来挪动地位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav { width: 800px; height: 800px; border: 1px solid red; background-image: url(../WEB照片/素材.jpg); background-position: 20px 50px; background-repeat: no-repeat; } </style> </head> <body> <div class="nav"></div> </body></html>革除元素的默认的内外间距
* { margin：0； padding:0;}注意事项
- 为了关照行内元素的兼容性，只设置左右内外边距，不设置高低内外边距；
外边距合并问题
相邻块元素外边距合并问题
相邻块元素合并：取两个块元素外边距合并的较大值，所以只给一个盒子的外边距是最好的解决办法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .head, .foot { width: 200px; height: 200px; background-color: #0000FF; } .head { margin-bottom: 50px; } .foot { margin-top: 60px; } </style> </head> <body> <div class="head"></div> <div class="foot"></div> </body></html>嵌套块元素外边距合并问题的三个办法
嵌套块元素外边距合并问题的三个办法
- 给父元素border值
- 给父元素padding值
- 给父元素overfiow:hidden;
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .father { width: 600px; height: 600px; background-color: pink; /* border-top: 1px solid transparent; */ /* padding-top:1px ; */ overflow: hidden; } .son { width: 200px; height: 200px; background-color: #0000FF; margin-top: 50px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body></html>盒子布局稳定性
ps应用
- ctrl+o:关上文件
- ctrl+r :关上标尺
- ctrl+ + ：放大
- ctrl+ - ： 放大
- 按住空格 能够挪动视图
- 吸管工具：汲取色彩
- 选框工具：测量宽高
去掉列表默认的款式
li { list-style:none; }新闻案例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .nav { width: 300px; height: 230px; border: 1px solid #ccc; margin: 100px auto; padding: 0px 15px; background: url(images/line.jpg); } .nav h2 { font-size: 16px; padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC; } .nav ul li { height: 32px; line-height: 32px; list-style: none; padding-left: 15px; background: url(images/arr.jpg) no-repeat 0px center; border-bottom: 1px dashed #ccc; } .nav li a { color: #333; font-size: 12px; text-decoration: none; } .nav li a:hover { text-decoration: underline; } </style></head><body> <div class="nav"> <h2>最新文章 /New Articles</h2> <ul> <li><a href="#">北京招聘平面设计，网页设计，php</a></li> <li><a href="#">体验javascript的魅力</a></li> <li><a href="#">jquery的世界降临</a></li> <li><a href="#">网页设计师的幻想</a></li> <li><a href="#">jquery中的链式编程是什么</a></li> </ul> </div></body></html>效果图
圆角边框
设置圆形
border-radius:50%;设置矩形
border-radius:高度的一半border-radius的简写
border-radius:左上角 右上角 右下角 左下角代码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> /* 设置圆角 */ div { width: 200px; height: 200px; background-color: blue; border-radius: 50%; } /* 设置矩形*/ div:nth-child(2) { width: 200px; height: 50px; background-color: red; border-radius: 25px; } </style></head><body> <div></div> <div></div></body></html>盒子的暗影
box-show:盒子暗影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: blue; box-shadow: 20px 20px 2px 20px red inset; } </style></head><body> <div></div></body></html>css书写标准
- 选择器与{}之间保留空格 属性与属性值之间保留空格
- 嵌套元素不应该超过三级
- 属性值应以分号完结