CSS盒模型

suosuopuo 发布于2019-04-23 13:06 / 889人阅读

摘要：一什么是盒模型盒模型又称框模型，它规定了元素框处理元素内容内边距边框和外边距的方式。二盒模型边框边框涉及到三个点，分别是边框的粗细样式颜色。关于的属性三盒模型填充设置元素与边框之间的距离，叫做填充。

一、什么是CSS盒模型？

　　CSS盒模型又称CSS框模型，它规定了元素框处理元素内容、内边距、边框、和外边距的方式。

　　元素框的最内部分是实际内容，直接包围在内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

　　内边距、外边距和边框都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

二、盒模型--边框（border）：边框涉及到三个点，分别是边框的粗细、样式、颜色。

　如border: 2px solid red，意思为粗细为2px，样式为实线，颜色为红色。

　　关于border的属性：

三、盒模型--填充（padding）：设置元素与边框之间的距离，叫做填充。

　　padding 定义元素边框与元素内容之间的空白区域。可以设置长度值和百分比值，但是不允许使用负值。

padding也分四部分：上、下、左、右。这四个属性可以连写也可以分别设置。

td {
                padding: 20px 10px 50px 50px;
            }

上、下、左、右四个元素分开写：

td {
                padding-top: 50px;
                padding-left: 20px;
                padding-bottom: 20px;
                padding-right: 50px;
            }

四、盒模型--边界：元素之间的距离就是边界，也就是外边框，用margin设置。

margin也分为四部分，即上右下左（margin-top/margin-right/margin-bottom/margin-left）。

同样margin的四部分也可以连写。

p {
                margin: 20px 50px 60px 30px;
            }

上、下、左、右四个元素分开写：

p {
                margin-top: 20px;
                margin-left: 30px;
                margin-bottom: 60px;
                margin-right: 50px;
            }

海外云主机 GPU服务器盒模型盒模型html吗简述html盒模型盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1446.html

深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

Code4App 2019-08-29 15:20 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 评论0 收藏0
css1：盒模型

摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...

TalkingData 2019-08-30 10:59 评论0 收藏0
十分钟复习CSS盒模型与BFC

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中，每...

verano 2019-08-02 10:48 评论0 收藏0