CSS深入
块元素：div、h1、p等等。
列表的样式：
/*使用系统提供的一些样式：例如无序、有序都可以使用circle*/ ul{ list-style-type: circle; } ol{ list-style-type: circle; }
/*使用图片，实现自定义*/ ul{ /*图片要小一点*/ list-style-image: url("../2.png"); /*list-style: url("../2.png");*/ /*简写: 即image、position、type的事，它都可以干*/ } <ul> <li>猫</li> <li>狗</li> <li>猪</li> </ul>
添加轮廓，突出内容：
p{ /*使用outline添加一个轮廓：outline相当于一个简写，因为它可以设置所有的轮廓属性*/ outline: auto; outline-color: aqua; outline-style: groove; outline-width: 2px; } <p>测试文本</p>
CSS Box Model——对于一个元素而言：
盒子模型包含：content、padding、border、margin。
设置内边距padding：
td{ /*padding: 100px;*/ padding-top: 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; } <table border="1"> <tr> <td>盒子模型padding</td> </tr> </table>
设置边框border：
p{ /* 1 样式、border-style: double;*/ /*对每一边进行设置(可以将简写覆盖掉)*/ border-top-style: double; border-bottom-style: double; border-left-style: double; border-right-style: double; /* 2 宽度、border-width: 2px;*/ border-top-width: 2px; /* 3 颜色、border-color: red;*/ border-bottom-color: red; /* 4、CSS3提供边框的：圆角、阴影、环绕图片*/ border-radius: 5px; box-shadow: 10px 10px 2px red; /*不用线或者点了，用图片自定义(把前面的宽度、颜色、圆角、阴影注掉)*/ /*border-image: url(http://www.w3school.com.cn/i/border.png) 30 30 round;*/ } <p>一共定义了10种border-style</p>
外边距margin：
.margin{ /*外边距默认为透明区域，可以接受任何长度单位或百分数*/ /*margin: 100px;*/ /*margin: 0px 10px 15px 20px;*/ /*上、右、下、左(顺时针)*/ margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; }
Box-Model结构设计：
body{ /*将整个页面拟作一个盒子(一个元素)，所以去掉body的干扰*/ margin: 0; } .margin{ margin: 100px; } .border{ border: double; } .padding{ padding: 100px; } .content{ background-color: red; text-align: center; } <body> <!--描述Box Model的层次结构--> <div class="margin"> <div class="border"> <div class="padding"> <div class="content">Box Model</div> </div> </div> </div> </body>
外边距合并（位置上的重叠）：
/*重叠后，取margin较大者，作为新margin*/ .margin-one{ margin-bottom: 100px; } .margin-two{ margin-top: 50px; } <!--只有垂直方向存在合并--> <div class="margin-one">margin-one</div> <div class="margin-two">margin-two</div>
CSS定位：
定位的思想：定义该元素，相对于其正常、父元素、其他元素、浏览器窗口的位置。
三种基本的定位机制：普通流、绝对定位、浮动。默认所有框都在普通流中定位。
块级框之间的距离，只由框之间的垂直margin计算。行框：一行所有的框组合而成。
所有元素都是框：行内框inline+块框block，通过display更改 <a href="">a不设置</a> <a href="" style="display: block">a设置block</a> 让指定元素没有框，因此不显示(没有框占文档的空间) <p style="display: none">p设置none</p> <p style="display: inline">p设置inline</p> <p>p不设置</p>
相对定位（可看作普通流）：
<p>.p1元素无论是否移动，都会占据其原来位置</p> <p class="p1">相对定位</p> <style> .p1{ /*relative：采用相对定位 — 设置水平、垂直位置(可以为负数)，就会相对于原来位置移动*/ position: relative; left: 20px; /*水平位置：left、right*/ top: 20px; /*垂直位置：top、bottom*/ } </style>
绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。
<p class="p1">采用绝对定位</p> <span>绝对定位不占位置</span> <style> .p1 { position: absolute; /*绝对定位的位置是相对于最近的已定位祖先元素；而对于其他元素，就像不存在一样*/ left: 100px; top: 100px; } </style>
浮动：
<p>test</p> <style> p{ /*所有元素都可以浮动*/ /*假如在一行之上不足以容纳浮动元素，那么这个元素会继续占据下一行，直到能够容纳。*/ float: right; /*向右浮动；默认是none(不浮动)，而不是left*/ /*使用JS操纵：object.style.cssFloat="right"*/ } </style>
浮动不同于定位，对于浮动，就理解为如同在水中漂浮的元素：
<p>test</p> <p>test</p> 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 <style> p{ float: left; display: inline; background-color: purple; width: 30px; } </style>
举例 —— 创建水平菜单：
<ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <style> ul{ /*默认情况ul有margin-top、margin-bottom、padding-left(好像是来自user agent stylesheet)*/ padding: 0; margin: 0; list-style-type: none; } li{ /*看来li也是块*/ display: inline; } a{ float: left; width: 7em; text-decoration: none; color: white; background-color: purple; padding: 0.2em 0.6em; } a:hover{ background-color: #ff3300; } </style>
启用响应式：确保适当的屏幕缩放和绘制，需要添加viewport元信息：
<!-- content包含可选的属性：--> <!-- width：控制设备屏幕宽度。initial-scale：确保网页加载时,1:1比例呈现,不会有缩放。 user-scalable：是否禁用用户的缩放操作。一般与maximum-scale=1.0一起使用 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
