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)
  • 相关阅读:
    7、Nginx基础Http原理
    8、nginx基础
    9、nginx常用基础模块
    第一章·MySQL介绍及安装
    第二章· MySQL体系结构管理
    第三章·MySQL版本区别及管理
    第四章· MySQL客户端工具及SQL讲解
    第五章· MySQL数据类型
    第六章· MySQL索引管理及执行计划
    第七章· MySQL的存储引擎
  • 原文地址:https://www.cnblogs.com/pengsn/p/12334571.html
Copyright © 2011-2022 走看看