重温css系列01

2016-01-07——解决背景层透明度的问题需要ie9+

问题：如果我对div设置opacity: 0.8;这个透明属性后希望内容不发生改变怎么弄？

A:做两层，或者rgba

解决后的效果图：

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

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

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

1.css盒子模型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        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;}
    </style>
</head>
<body>
<!--外边距合并 是以大的一个的距离为准 进行合并操作的 .container2{margin: 20px;}-->
<div class="container">
    <div class="bd">
        <div class="pd">
            <div class="content">hello word </div>
        </div>
    </div>
</div>

<div class="container2">
    <div class="bd2">
        <div class="pd2">
            <div class="content2">hello word </div>
        </div>
    </div>
</div>
</body>
</html>

View Code

2.定位相关

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background: yellow;">
<div style="background: #fff;">A
    <div style="background: #81b6ff; position:relative;">A - 1
        <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
            A - 2</div></div></div></body>
</html>

View Code

一些的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则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

具体的列子可以参考：http://www.cnblogs.com/coffeedeveloper/p/3145790.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        .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;}


    </style>
</head>
<body>
<div class="container">
    <div class="fd"></div>
    <div class="sd"></div>
    <div class="td"></div>
</div>
</body>
</html>

View Code

3.选择器

首页框架布局结构展示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
      <style>
            *{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;}
      </style> 
</head>
<body>
<div class="top">
    <div class="top-content"></div>
</div>

<div class="body">
    <div class="body-image"></div>

    <div class="body-content">
        <div class="body-no"></div>
    </div>
</div>

<div class="footing">
    <div class="footing-content"></div>
    <div class="footing-subnav"></div>
</div>
</body>
</html>

View Code

posted on 2015-10-13 14:41 云的旋律阅读(269) 评论(1) 编辑收藏举报

刷新页面返回顶部