zoukankan      html  css  js  c++  java
  • css盒子模型

    盒子模型 (block, inline-block)
    提示:display属性可以调整元素为行内,块级或行内块级
    w3c盒子模型的content不包含边框和padding
    (1)content (width,height)
    (2)border 边框
    (3)padding 内边距
    (4)margin 外边距
    注意:外边距合并,当相邻的元素都具备非零的margin属性时,
    相邻的边,外边距会重合,取值为较大的一个。

    *(5) outline (部分元素)

    *(6) display: (inline, block, inline-block)

    6.定位与层叠
    (1).绝对定位
    a.绝对定位的元素,不再受文档流影响,也不会影响其它相邻元素影响
    b.top,left属性,相对于非静态定位的容器左上角为坐标原点偏移,不受容器的padding影响

    (2).相对定位
    top,left属性,相对于元素本来应该出现的位置偏移
    (3).z-index属性:控制层叠,只在position为非静态定位时有效

    7.浮动 float
    (1)浮动的块级元素会脱离默认的文档流
    (2)清除浮动 clear
    如果要使用浮动让块级元素横向排列,一定要加确定宽度的容器或给容器指定最小宽度

    * 书写样式的思路,规范:
    1.把页面结构看成盒子套盒子,各种盒子模型的集合
    2.从外到内,从上到下,从左到右

  • 相关阅读:
    redis缓存雪崩、穿透、击穿概念及解决办法
    搭建svn
    树莓派3
    开博留念
    Linux系统网卡配置“漂移”现象
    3.1、final、finally、 finalize
    2.2、Exception和Error
    2.1、NoClassDefFoundError和ClassNotFoundException区别
    1、Java平台的理解
    阻塞队列(java并发编程)
  • 原文地址:https://www.cnblogs.com/yangwenxin/p/5811723.html
Copyright © 2011-2022 走看看