CSS盒子模型:
早期的网页设计主要是表格,后来主要是div+css
盒子模型：
1.边框：border：
border-top、border-bottom、border-left、border-right
2.内边距：padding：
padding-top、padding-bottom、padding-left、padding-right
3.外边距：margin：
margin-top、margin-bottom、margin-left、margin-right
CSS的布局
语法：
float : none | left | right
取值：
| none | : | 默认值。对象不飘浮 |
| left | : | 文本流向对象的右边 |
| right | : | 文本流向对象的左边 |
语法：
clear : none | left | right | both
取值：
| none | : | 默认值。允许两边都可以有浮动对象 |
| left | : | 不允许左边有浮动对象 |
| right | : | 不允许右边有浮动对象 |
| both | : | 不允许有浮动对象 |
<style type="text/css">/*body{ 因为浏览器的不同，肯能在开发时，改变body外边框的值margin:0px;}*/div{border:#000000;padding-top:10px;padding-bottom:50px;padding-left:100px;padding-right:150px;/*padding:10px 50px 100px 150px ;/*上右下左*/}#div_1{background-color:#FF0000;/*margin-left:200px;*/float:left;/**/}#div_2{background-color:#FF9900;float:left;/*clear:left;*/}#div_3{background-color:#3300FF;/*clear:right;*/}</style> <div id="div_1">1号盒子</div> <div id="div_2">2号盒子</div> <div id="div_3">3号盒子</div>CSS的定位：
语法：
position : static | absolute | fixed | relative
取值：
| static | : | 默认值。无特殊定位，对象遵循HTML定位规则 |
| absolute | : | 将对象从文档流中拖出，使用 left ， right ， top ， bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index属性定义 |
| fixed | : | 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 |
| relative | : | 对象不可层叠，但将依据 left ， right ， top ， bottom等属性在正常文档流中偏移位置 |
<style type="text/css">div{border:#000000 solid 1px;height:100px;width:200px;}#div_0{background-color:#66FF99;height:400px;width:400px;position:absolute;/*position:static;*/top:100px;left:100px;}#div_1{ background-color:#FF0000; /*position:absolute;*/ /*假设父对象div_0没有定义position，比如是static，那么他的定位属性相对于body，有就是相对于div_0 */ position:relative; left: 80px;/*通过一个小程序可以实现数值的改变，进而实现该盒子在页面飘动的效果*/ top:50px;/*这个数值是相对于body而言的*/ }#div_2{background-color:#FF9900;width:200px;}#div_3{background-color:#3300FF;}</style> <div id="div_0"> <div id="div_1">1号盒子</div> <div id="div_2">2号盒子</div> <div id="div_3">3号盒子</div> </div>
CSS的图文混排
<style type="text/css">#imgtext{border:#3333FF dashed 1px;width:280px;}#img{float:right;}#text{color:#F6C;font-family:"华文隶书";}</style> <div id="imgtext"> <div id="img"> <img src="file:///C%7C/Users/Public/Pictures/Sample%20Pictures/1.jpg" height="200px" style="max-width:90%" alt=""> </div> <div id="text"> 这是一朵水仙花,呵呵呵呵呵呵呵呵呵呵呵呵呵呵asdsad最新的身份的广泛的广泛覆盖vbxcv大哥哥哥哥哥asdds的双方各持续持续持续弟弟！ 撒反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复 反复！ </div> <br> <p><br> </p> <p class="sycode"> <strong>总结来说，如果外区域有定义过position，那么内区域定义的position属性值是针对外区域而言，如果没有那么内区域针对的是body而言</strong> </p> <p class="sycode"> <strong><br> </strong> </p> <p class="sycode"> <strong><br> </strong> </p> <p class="sycode"> <strong>CSS图像签名</strong> </p> <p class="sycode"> <strong><br> </strong> </p> <p class="sycode"> </p>
<pre name="code" class="sycode"><style type="text/css">#imgtest{border: #FF0000 dotted 1px; width: 350px; /*margin: 50px;*/ position: absolute;/*防止图像动了,而文字未动,所以在imgtext也要定位*/ top:50px ;}#text{ font-family: "华文隶书"; font-size: 20px; position: absolute; top: 30px; left: 10px;}</style><div id="imgtest"> <div id="img"> <img src="1.jpg" height="300px" style="max-width:90%" alt="CSS学习笔记三_html/css_WEB-ITnose" > </div> <div id="text"> 小狗 </div>
</div>
