重温css系列01_html/css_WEB-ITnose

独自坐着地铁 突然一股莫名的孤独感涌上心头,原来这么久都是一个人承载着生活中的苦辣与酸甜!

往往都在拼命的往终点狂奔,忽略了太多身边的人和事了,需要我们静下来,重新整理一下自己的思绪,勿忘初衷!??2015-10-11(帮朋友搬家)

好,我们进入今天的主题 重新整理一下css中一些容易忽略的问题

1.css盒子模型

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 

            body{margin: 0;}        .container{margin: 10px;}        .bd{border-style: dotted}        .pd{padding: 100px;}        .content{font-size: 22px;background-color: #f2dede;}        .container2{margin: 20px;}        .bd2{border-style: dotted}        .pd2{padding: 100px;}        .content2{font-size: 22px;background-color: #f2dede;}    
hello word
hello word

登录后复制

 

 

 

2.定位相关

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 

    
A
A - 1
A - 2

登录后复制

 

一些的position小知识

 

1)应用了position: relative/absolute的元素,margin属性仍然有效,以position:relative来举例。

    如果设置了left、top、bottom、right的属性,建议大家不要设置margin数据,因为很难精确元素的定位,尽量减少干扰因素。

2)position: absolute忽略根元素的padding。

3)在IE6/7中设置position属性后会导致z-index属性失效

4)行内元素在应用了position:absolute之后会改变display。

因此,要注意到relative是并没有改变行内元素的呈现模式,而absolute是会改变行内元素的呈现模式,如果设置了absolute并不需要显式的的将元素display改成block。

5)应用了position: absolute / relative之后,会覆盖其他非定位元素(即position为static的元素),如果你不想覆盖到其他元素,也可以将z-index设置成-1。

 

Fixed

在很长的时间里,这个属性值因为兼容性问题,并没有得到非常广泛的应用(IE6未实现该属性值)。fixed和absolute有很多共同点:

会改变行内元素的呈现模式,使display之变更为block。 会让元素脱离普通流,不占据空间。 默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于:absolute的”根元素“是可以被设置的,而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页,其元素与浏览器窗口之间的距离是恒定不变的。

具体的列子可以参考:

 

立即学习“前端免费学习笔记(深入)”;

 

    浮动        .container{width: 500px;height: 500px;background-color: darkgray;}        .fd{width: 150px;height: 150px;background-color: #0000FF;float: left;}        .sd{width: 150px;height: 150px;background-color: #9dffbb;float: left;}        .td{width: 150px;height: 150px;background-color: #ffd093;float: left;}    

登录后复制

 

3.选择器

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 

 

 

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 

 

 

立即学习“前端免费学习笔记(深入)”;

 

立即学习“前端免费学习笔记(深入)”;

 首页框架布局结构展示:

                *{margin: 0;padding: 0}.top{width: 100%;height: 50px;background-color: black;}.top-content{width: 75%;height: 50px;margin: 0 auto;background-color: #0000FF}.body{margin: 20px auto;width: 75%;height: 1500px;background-color: #f1f2f3;}.body-image{width: 100%;height: 400px;background-color: #f04124;}.body-content{width: 100%;height: 1100px;background-color: #4e89c5;}.body-no{width: 100%;height: 50px;background-color: #ff00ff;}.footing{width: 75%;height: 400px;background-color: #f0be22;margin: 0 auto;}.footing-content{width: 100%;height: 330px;background-color: darkorange;}.footing-subnav{width: 100%;height: 70px;background-color: black;}      

登录后复制

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3106585.html

(0)
上一篇 2025年3月29日 09:24:02
下一篇 2025年2月25日 10:11:09

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论