首页 > 网站 > WEB开发 > 正文

CSS彻底研究(2)

2024-04-27 14:34:20
字体:
来源:转载
供稿:网友
CSS彻底研究(2)

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偏蓝色的contentchrome表示


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;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表