Github pages 博文

一 . CSS盒模型

1.盒子的结构

margin-border-padding结构 + 内容content 组成盒模型

注意

  1. width,height 取的是content区域的宽高,不包括padding border margin,但是盒子实际所占高度要算上外面三个(padding border margin)
  2. 赋值顺序,顺时针,上(top)->右(right)->下(bottom)->左(left)
----top(1)----->|

|               |

left(4)        right(2)

|               |

<---bottom(3)----

赋值,一个值,四个值都是这个,如margin : 10px;

赋值,两个值,两个值赋给 top right,也就是前两个,然后,bottom = top , left = right

赋值,三个值,分别赋值给 top right bottom,也就是前三个,然后left = right

赋值,四个值,不用多说了...

3. 在各浏览器中的表示

html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>在浏览器开发人员工具中的表示</title>

    <style>

        body

        {

            margin: 0;

            background-color: cyan;

        }

        #test-div

        {

            padding: 10px;

            border: 5px dotted yellow;

            margin: 20px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="test-div">

        内部文字

    </div>

</body>

</html>

chrome

偏红的margin

偏xx色的border(啥颜色,叫不出来)

偏青色的padding

偏蓝色的content

IE10,win8.1浏览器

offset,见stackoverflow问题,说是用relative absolute改变之后的偏移,同chrome里的position

2.border

border : width(2px) color(green) style(dotted/dashed)

border-width/color/style 设置某一属性

border-left : width color style 设置一边的属性

结合起来可以border-left-style : dotted;

边框与背景

对于IE,background = content + padding

对于FF,background = content + padding + border

小的差距,要注意

3.padding 与 margin

赋值规则,上面说了,总结起来就是:

从top开始,顺时针,将N个值赋给前N个,其他的依据top-bottom left-right配对拷贝这个原则即可,对于一个值得,表示四个全都一样

body特殊的盒子,在默认的情况下,body会有若干px的margin,而且body的background会扩展到margin部分,也就是紧贴着浏览器,background-image 和 background-color都会这样,其他的盒子background最多也就是到border(FF下).

二 . 标准文档流

1.简称标准流

指在不使用其他的与排列、定位相关的特殊CSS规则时各种元素的排列规则。

  1. 块级元素block，典型的有div ul li

    总是以一个块的形式表现出来，并且跟同级的兄弟块之间，依次竖直排列，左右撑满。
  2. 行内元素inline，典型的有span a标签 标签。

    横向排列,最右端自动折行

div能包含span样式，反之而不能，即span不能包含div。

2.块间距

  1. 行内元素的水平间距

    间距 = 左侧元素的margin-right + 右侧元素的margin-left
  2. 块级元素的竖直间距

    竖直间距 = max(上面元素的margin-bottom , 下面元素的margin-top)

    这个就是所谓的塌陷原则,小的margin塌陷到大的margin里面去了
  3. 嵌套div的margin

    子div的margin放在父div的content区域,合理的理想情况
  4. margin设置为负值

    margin其实是border 距离外边界的距离,将margin-left 设置为 -50px;盒子整体左移50px;

CSS彻底研究(2)的更多相关文章

  1. CSS深入研究:display的恐怖故事解密(2) - table-cell

    上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用 ...

  2. CSS深入研究:display的恐怖故事解密(2) - table-cell(转)

    http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - ...

  3. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  4. css定位研究

    css的定位是很重要的一个知识点,要学会网页布局,一定要先把定位弄清楚,今天抽空整理一下这方面的知识. 1.块级元素和行内元素(内联元素) 块级元素:display值为block的元素就是块级元素,比 ...

  5. CSS导航的魔力——源自温谦老师《CSS彻底研究设计》

    web标准出台以后,非常注重的一个标准就是希望内容与样式分离.希望HTML就干HTML该干的事.但是有的时候我们为了美观必须多多少少改动HTML 代码.下面介绍几个导航栏.               ...

  6. CSS彻底研究(1)

    Github pages 博文 基本选择器 标记选择器h1 {...} 类别.class_name{...},两个class同时作用,如class = 'one two',冲突取前者 ID选择器 #i ...

  7. CSS currentColor研究

    刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变 ...

  8. 对浏览器如何计算CSS的研究---------------引用

    1. 加载CSS 在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接: 上面的rel指明了它是一个样式文件.这个加载是异步,不会影响DO ...

  9. 响应式疑惑？ CSS单位研究

    各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率    响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分 ...

随机推荐

  1. for循环和经典案例

    循环:初始条件,循环条件,状态改变,循环体.for(初始条件;循环条件;状态改变){ 循环体}for(int i=1;i<=10;i++){ }例子:100以内与7有关的数.求100以内所有数的 ...

  2. C# 将窗口移动到指定位置

    private void button1_Click(object sender, EventArgs e) { Frm f = new Frm(); f.StartPosition = FormSt ...

  3. IOS网络开发实战（二）

      1 飞机航班查询软件 1.1 问题 NSURLConnection是IOS提供的用于处理Http协议的网络请求的类,可以实现同步请求也可以实现异步请求,本案例使用NSURLConnection类实 ...

  4. 把python项目部署到centos里

    .安装centos VMware9下面安装centos .在centos下面设置共享文件夹为你本地的论坛的代码,然后设置网络为桥接:直接连接到物理网络,赋值网络连接状态 .进入forum_svr.py ...

  5. vc 获取当前时间

    1.使用CTime类 CString str; //获取系统时间 CTime tm; tm=CTime:: GetCurrentTime_r(); str=tm.Format("现在时间是% ...

  6. Scala学习文档-各种使用模式的情况

    模式在变量定义中 在定义val或者var的时候,可以使用模式替代简单的标识符,如可以使用模式拆分元组,并把每个值分配给变量 val myTuple = (123,"abc") va ...

  7. 100个iOS开发/设计程序员面试题汇总，你将如何作答？

    100个iOS开发/设计程序员面试题汇总,你将如何作答? 雪姬 2015-01-25 19:10:49 工作职场 评论(0)   无论是对于公司还是开发者或设计师个人而言,面试都是一项耗时耗钱的项目, ...

  8. 头文件intrins.h

    intrins.h 在C51单片机编程中,头文件INTRINS.H的函数使用起来,就会让你像在用汇编时一样简便. 内部函数 描述 _crol_ 字符循环左移   _cror_ 字符循环右移   _ir ...

  9. Qt自定义圆周动画（360 10.0 的模仿作者写的）

    由于项目需求,需要把一张图片做圆周运动,用到了属性动画,坐标计算等. 在编写代码的过程中,由于太长时间没用sin,cos函数忘了是用弧度为单位,汗呀 下面把代码贴出来 /* * 圆周运动动画 * */ ...

  10. Linux上ld和ld.so命令的区别

    显然,ld链接器,它的生命周期是发生在compile-time的,它的一些参数是编译时期gcc给传递的,比如,指定需要链接什么库. ld.so命令的周期是发生在run-time的,名字叫动态链接器/加 ...