重温css系列01

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

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

好,我们进入今天的主题 重新整理一下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>

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>

一些的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有很多共同点:

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

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>

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>

时间: 2024-11-10 14:17:18

重温css系列01的相关文章

Windows内核原理系列01 - 基本概念

1.Windows API Windows 应用编程接口(API)是针对WIndwos操作系统用户模式的系统编程接口,包含在WindwosSDK中. 2.关于.NET .NET由一个被称为FCL的类库和一个被称为CLR的公共语言运行库组成.FCL是建立在CLR之上的,而CLR是一组标准的COM服务器,提供了垃圾回收,即时编译类型检验等特性.由于CLR的这些特性,使得开发人员的生产效率得以提高..NET框架与组建的关系如下: .NET应用程序 用户模式(托管代码) —————————— 类库(FC

.net工作准备系列--01前言

注:学习参考朱毅编著的进入IT名企必读200题. 内容重在自我学习与巩固. 前言: 章节划分 01应聘须知 02基础知识(重点) 03进阶知识 04重点应用(aspnet第一部分) 04重点应用(aspnet第二部分) 05.网络通讯 06.代码与算法 07 增强知识 01应聘须知-1.了解软件开发大环境.-2.准备简历:不宜超过一页,永远准备中文,模板.-3.渠道:3大网站,中华英才,前程无忧(51job最给力),智联招聘. -4.面试禁忌:不重考官,不注礼节,夸夸其谈,急问待遇. 总得来说就

Java 集合系列 01 总体框架

java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java 集合系列 04 LinkedList详细介绍(源码解析)和使用示例 Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.*Java集合主要可以划分为4个部分:List列表.Set集合.Map映射.工具类(Itera

CSS系列(4)-如何使用Firebug查看网页的html和css

Firebug是火狐浏览器Firefox的一个插件,专门为开发人员开发的.使用Firebug需要先在Firefox中安装这个插件,网上有很多教程,可以对照着安装一下. 不同的火狐浏览器版本中的Firebug可能有些差别,不过大致相同.我使用的是火狐31.0版本. 使用Firebug查看百度的菜单. 1,百度首页改版了,变得更简洁了,通过百度首页,打开左上角[更多产品]中的[全部产品] 2,打开之后,可以看到百度的菜单如下图, 网址为:http://www.baidu.com/more/ 3,按一

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1)    一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * {   margin: 0;  padding: 0;  } * 是通配符,就是一个符

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

小白C#窗体系列-01.简易浏览器

最近重伤,今天正好放假,就抽个空出C#第一集,开发完毕... 如果你看不到这篇文章,那过一天就可以看见了. 软件下载(.NET 4.0 框架)http://pan.baidu.com/s/1c03X7vM[源码看下面] 一.设计图纸: 二.代码分析 1.后退键. 前进键.停止键.刷新键:这几个功能本来我是准备用个数组来存储,可以前进后退的,后来啃他自带方法的时候发现微软提供了方法,也就偷个懒了后退按钮 this.webBrowser1.GoBack(); 前进按钮 this.webBrowser

我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容效果,很大程度上取决于Ta本人,也就是原材料,对网页来说,原材料就是html标签,因此设计优秀的html标签结构十分重要. 整容医生的作用也至关重要,割双眼皮,整容医生的基本功,不同医生割出来的效果不同. 作为一个网页设计师,我们是不是应该追求完美,尽最大努力,让网页漂亮一些. 我知道,我们往往自称