zoukankan      html  css  js  c++  java
  • CSS世界(二)盒模型

    猜谜: 会上同心盛况空前(打一字)

    问题

    1. 内联元素是否同样适用于以上的盒模型?
    2. 内联元素与块级元素在盒模型是否有区别?有什么区别?
    3. 关于元素的盒子模型宽高的理解?
    

    盒模型解释

    1. 针对以上盒模型分析有四个内容,分别是 margin,border,padding,content
    2. 释义: margin 外边距 | border 边框 | padding 内边距 | content 内容区域
    3. 表现形式: 可颜色修饰 border, content . 不可颜色修饰: margin padding
    4. 填充顺序: 顺时针, 上-右-下-左
    

    margin

    1. 内联元素<inline>设置margin-top,margin-bottom是无效的。
    2. margin是可以设置负值,使其反向移动
    

    border
    巧用border的边框实现三角形

    padding

    1. 内联元素添加padding会使元素宽高发生变化, 但不会使其他元素产生移动,显示为重叠效果
    2. 块级元素添加padding,如果padding大于元素原本的宽高,padding的值将会影响元素的宽高, 且同时会影响其他元素
    

    content
    元素显示部分

    box-sizing

    box-sizing: content-box|border-box;
    content-box 设置宽高的时候, 元素总宽高 = margin + border + padding + (width|height)
    border-box 设置宽高的时候, 元素总宽高 = margin + (width|height)
  • 相关阅读:
    2020-08-11 题目题解
    N皇后问题
    逆序对(模板)
    归并选择(模板)
    快速选择(模板)
    快速排序(模板)
    vuecli4+elementui实现面包屑
    vue-路由导航(守卫)那些事
    vue-vant中ImagePreview 图片预览正确的打开方式
    Selenium 对表格table处理
  • 原文地址:https://www.cnblogs.com/pengsn/p/12334571.html
Copyright © 2011-2022 走看看