• 理解盒模型


    盒子的分类
    不同元素产生不同的盒子类型可能不同,一个元素产生什么样的盒子取决于css的display属性
    - 属性:display
    - 是否能继承:否
    - 默认值:inline

    盒子的组成
    - margin:外边距(与其他的盒子的距离)
    - border:边距
    - padding:内边距(边框与内容之间的距离)
    - cotent:内容(内容的宽度与高度)
    margin
    表示边框和相邻盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
    >
    > div{
    >            margin-top :  10px ;
    >      }
    margin-top   上外边距 /  不可继承  /  默认值:0px


    - margin有1个数值:上下左右
    - margin有2个数值:上下 / 左右
    - margin有3个数值:上 / 左右 / 下
    - margin有4个数值:上 / 右 / 左 / 下

    border 边框
    分割内部和外部的界限,上(top)右(right)下(bottom)左(left)。
    - 上边框的样式
    > border-top-style
    > 不可继承 ;默认none 
    > solid  实线 / dashed   虚线  /  dotted  点阵 / double 双实线

    - 上边框的厚度
    > border-top-width
    > 默认值 medium  /  一般用px ;em

    - 上边框的颜色
    > border-top-color
    缩写 :border-top  (厚度 样式 颜色)
    padding

    表示边框和内容盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
    >
    > div{
    >           padding-top :  10px ;
    >      }
    padding-top   上外边距 /  不可继承  /  默认值:0px


    - padding有1个数值:上下左右
    - padding有2个数值:上下 / 左右
    - padding有3个数值:上 / 左右 / 下
    - padding有4个数值:上 / 右 / 左 / 下
    content
    width
    height
    子盒子
    边框盒 border-box 由border,padding,content 组成
    1. 浏览器调试时,页面中显示的页面尺寸
    2. 元素的背景,默认覆盖边框盒(元素的背景色,从边框盒开始渲染)
    3. background-clip 设置背景色的渲染区域

    填充盒子 由padding ,content 组成
    1. 溢出overflow 指填充盒的溢出

    内容盒子 由content组成
    outline 不占像素,但无样式。

  • 相关阅读:
    洛谷P3233 世界树
    线性基
    CF321E Ciel and Gondolas
    洛谷P2619 Tree I
    重温一下基本数据类型以及自动提升数据类型的问题
    不可理喻的JSTL标签库
    理解RESTful架构(转)
    Node.js的优点和缺点(转载)
    自制双色球随机号码
    编程, 细心永远都不嫌多(记录java连接数据库的一个错误)
  • 原文地址:https://www.cnblogs.com/1301774939-/p/9503023.html
Copyright © 2020-2023  润新知