• 理解盒模型


    盒子的分类
    不同元素产生不同的盒子类型可能不同,一个元素产生什么样的盒子取决于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 不占像素,但无样式。

  • 相关阅读:
    Ftp、Ftps与Sftp之间的区别
    Previous Workflow Versions in Nintex Workflow
    Span<T>
    .NET Core 2.0及.NET Standard 2.0 Description
    Announcing Windows Template Studio in UWP
    安装.Net Standard 2.0, Impressive
    SQL 给视图赋权限
    Visual Studio for Mac中的ASP.NET Core
    How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
    用于Azure功能的Visual Studio 2017工具
  • 原文地址:https://www.cnblogs.com/1301774939-/p/9503023.html
Copyright © 2020-2023  润新知