11 CSS盒子模型（重点）

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

  • padding（内边距及其缩写）

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。

内边距可以设置多个值：

/*

当padding只有一个值的时候表示同时控制上下左右的内边距。

当padding只有两个值的时候表示分别控制上下、左右的内边距。

当padding有三个值的时候表示分别控制上、左右、下的内边距。

当padding有四个只的时候表示分别控制上、右、下、左的内边距。

*/

内边距也可以进行单独设置：

/*

padding-top 			设置上边的外边距

padding -bottom 		设置下边的外边距

padding -left			设置左边的外边距

padding -right			设置右边的外边距

*/
  • margin（外边距及其缩写）

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

1、在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。

	使用margin让元素自身居中：  margin: 0 auto;

2、浏览器的默认边距清零


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       .c1{

           width: 100%;

           height: 600px;

           border: 1px solid red;

       }

       .c2{

           width: 50%;

           height: 40px;

           background-color: rebeccapurple;

           margin: 10px auto;

       }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2"></div>

    <div class="c2"></div>

</div>

</body>

</html>

执行代码效果：

边距案例：

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

        <meta charset="utf8">

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .c1{

                width: 80%;

                margin: 100px auto;

            }

            .c1 .J_categoryList{

                list-style: none;

            }

            .c1 .J_categoryList li{

                display: inline-block;

                margin: 10px;

            }

            .c1 .J_categoryList li a{

                font-size: 16px;

                color: #333;

                padding: 20px;

                border: 1px solid rebeccapurple;

                text-decoration: none;

            }

        </style>

  </head>

  <body>

<div class="c1">

      <ul class="J_categoryList">

          <li><a href=""><span>红米</span></a></li>

          <li><a href=""><span>电视</span></a></li>

          <li><a href=""><span>笔记本</span></a></li>

          <li><a href=""><span>家电</span></a></li>

          <li><a href=""><span>小米手机</span></a></li>

      </ul>

</div>

  </body>

</html>

执行代码效果：

11 CSS盒子模型（重点）的更多相关文章

  1. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  2. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  3. 12月2日内容总结——边框属性，display属性，css盒子模型，浮动、溢出、定位、z-index属性和建议博客页面搭建

    目录 一.边框 边框简介 border-style--边框样式 border-width--边框宽度 border-color--边框颜色 二.display属性 三.CSS盒子模型 概念 margi ...

  4. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  5. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  6. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  7. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  8. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  9. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  10. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

随机推荐

  1. 关于 try... catch

    在逛论坛看见一个有意思的帖子,有点意思,记录下 关于"异常捕捉"(try catch)是否存在悖论? 一些我觉得有用的回复,放到下面了, 1. 当某些错误状况难以完全避免时,try ...

  2. win32 - 将剪贴板位图存储为文件

    简单的demo: #include <iostream> #include <fstream> #include <windows.h> typedef struc ...

  3. 一秒出图？SDXL-Turbo实时AI绘画整合包下载

    SDXL Turbo是一种快速生成的AI构图模型,它基于一种称为对抗性扩散蒸馏的新训练方法,该方法允许在1到4个步骤中以高图像质量对大规模基础图像扩散模型进行采样,并将其与对抗性损失相结合,以确保即使 ...

  4. 文件的拓展及文件函数，定义函数及函数参数---day09

    1.文件的拓展模式 utf-8 编码格式下,默认一个中文三个字节,一个英文或符号占用一个字节 read() 功能:读取字符的个数(里面的参数代表字符个数) seek() 功能:调整指针的位置(里面的参 ...

  5. 【Azure 事件中心】如何查看Event Hub的生产者或者是消费者端的IP地址呢？

    问题描述 哪些客户端 IP 正在向/从Azure Event Hub发送/接收事件?如何来查看Event Hub的生产者端,消费者端的IP地址呢? 问题解答 如果需要查看Event Hub 服务端的日 ...

  6. Nebula Graph 源码解读系列 ｜ Vol.04 基于 RBO 的 Optimizer 实现

    上篇我们讲述了一个执行计划是如何生成的,这次我们来看下这个生成的执行计划是被 Optimizer 优化的. 概述 Optimizer,优化器,顾名思义就是一个用来优化执行计划的组件.数据库的优化器通常 ...

  7. linux系统信息命令笔记

    1,时间和日期 2,磁盘信息 4,进程概念介绍 4.1,ps 基本命令使用 ps aux 显示内容太多了.一般用ps a 或 ps au 4.2, top命令的基本使用 top 可以动态的显示运行中的 ...

  8. 关于STM32Fx部分引脚不可以正常输出高低电平的解决办法(不可以正常使用)

    一.概述 在一次电路版测试中,发现stm32的部分引脚不可以正常的输出高低电平,刚开始以为是板子没有焊接好所以导致的经过多次的测试,发现电路版没问题.当时就想不清楚了,后面就问学长,还有实验室的学长一 ...

  9. CSRF(Steam的链接不用随便点)

    漏洞详解 CSRF 漏洞原理: 攻击者会冒充或利用用户本人对web服务器发送请求,然而web服务器无法识别该请求是否为用户本人所发送,因此造成各种危害. 漏洞利用过程: 1)首先需要用户登录了上网站, ...

  10. Java 练习题 看起来很简单 写起来却有点难度

    1 import java.io.PrintStream; 2 3 /* 4 * 5 * public class ValueTransferTest4 6 *{ 7 * public static ...