zoukankan      html  css  js  c++  java
  • 3.深入理解盒子模型

    1.border属性  3个   color , width ,style(重要  其中hidden可以解决边框冲突问题)
    2.属性简写形式  以border-color为例
    2个属性值  上下边框
    3个属性值   前者为上边框    中间的为左右边框     后者为下边框
    4个属性值  依次为上  右  下  左边框的属性  即顺时针排序
    3.单个边框 属性的设置    border-left:1px  red  solid
    border-left-color:red
    4.边框和背景    background-color   ie作用域为content+padding     firefox是content+padding+border   。将border设置为粗虚线时 表现得特别明显 。在ie中虚线空白的地方露出来的事padding部分的背景,而在firefox中虚线空白的地方露出来的是 margin部分的背景。
    5.内边距    padding
         当一个盒子设置背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范围,并以padding的左上角为基 准点平铺背景图像。
    6.外边距   margin     元素与元素之间的距离
    body是一个特殊的盒子   背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖  padidng+内容   ie浏览器 ;或者 者border+padding+内容部分   firefox浏览器中
    body盒子的宽度由浏览器窗口决定   不是由其内部的内容决定的
    margin用于控制块与块间的距离
    7.盒子之间的关系
    1.dom文档对象模型   网页所有蒜素组织在一起   就构成了一颗  dom树
    #document是整个文档的根节点     css控制网页的表现形式    html控制网页的内容结构   
    2.标准文档流     简称标准流  指在不使用其他的与排列和定位相关的特殊css规则时,各种元素的排列规则。
    元素的分类(1).块级元素   占据着一个矩形的区域,并且和相邻的元素数值排列, 不会排在同一行中。因此被称 为块级元素,以一个块的形式表现出来,并且跟同级的兄弟块一次竖直排列,左右撑满
    ul  li
      (2).行内元素  inline  对文字类元素   各个字母横向排列,到最右段自动折行,这就是另一种元素称 为“行内元素”
    <strong></strong>标记  ,本身不占有独立的区域,仅仅是在其他元素的基础上指出了一定的 范围。a元素也是行内元素     css中块级元素拥有自己的区域,行内元素则没有。
    3.<div>标记与<span>标记
    (1).<div>块级容器可以容纳段落,标题,表格,图片,等等
    <span>是行内的元素 同样可以容纳各种html元素
    8.盒子在标准流中的定位原则
    要对margin有更深入的了解 。padding只存在于一个盒子的内部。所以不涉及与其他盒子之间的关系。
    (1)行内元素之间的水平margin
    第一个元素的margin-right加上第二个元素的margin-left
    (2)块级元素之间的竖直margin
    上下两个块级元素中margin-bottom和margin-top中的较大者,称为塌陷现象。
    (3)嵌套盒子之间的margin
    父子关系  父padding+子margin=父子边框间的距离
    (4)将margin设置为负值
    会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块是父子关系时   可以将子块从父块中分离。
     
  • 相关阅读:
    Angular随笔第一课
    web前端面试集锦(自己搜集的,如有错误请不吝赐教)
    菜单选项卡-2中方法加载选项卡的内容
    dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)
    JAVA中对象赋值以及前拷贝,深拷贝等~~
    基类指针指向派生类对象
    JAVA中方法的参数传递(转)
    java和C++的const 和 final 的区别
    JAVA--虚函数,抽象函数,抽象类,接口
    libdash编译中遇到的问题及解决方案
  • 原文地址:https://www.cnblogs.com/dongguolei/p/7902949.html
Copyright © 2011-2022 走看看