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

    CSS 盒子模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model):

    不同部分的说明:

    • Margin(外边距) - 清除边框外的区域,外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
    • Content(内容) - 盒子的内容,显示文本和图像。

     其中,

    内容(CONTENT)就是盒子里装的东西;
    而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
    边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
    填充只有宽度属性,每个HTML标记都可看作一个盒子;

    示例:

    实例
    div {
         300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
    

      

  • 相关阅读:
    MySQL数据库的常用命令
    MySQL数据库的概念
    Linux磁盘管理
    linux账号与权限管理
    安装及管理程序
    vi编辑器+常用命令
    centos7下部署elasticsearch7.2集群--Elastic Stack之一
    打开virt-manager界面显示方格乱码
    Rabbitmq之修改日志和数据存放路径
    Rabbitmq之Memory
  • 原文地址:https://www.cnblogs.com/qq3069418554/p/9050193.html
Copyright © 2011-2022 走看看