CSS 盒子模型(Box Model)

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

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

CSS 边框属性

border-style 值:

none: 默认无边框、dotted: 定义一个点线边框、dashed: 定义一个虚线边框、solid: 定义实线边框、double: 定义两个边框。两个边框的宽度和 border-width 的值相同

border-width 属性为边框指定宽度

border-color属性用于设置边框的颜色

border-style：属性1，属性2，属性3，属性4

上->右->下->左

border-style：属性1，属性2，属性3

上->左右->下

border-style：属性1，属性2

上下->左右

border-style：属性1

上下左右属性相同

CSS margin(外边距)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

可能的值：auto-设置浏览器边距、length-定义一个固定的margin、%-定义一个使用百分比的边距

margin属性可以有一到四个值：

margin:25px 50px 75px 100px；

上边距为25px、右边距为50px、下边距为75px、左边距为100px

margin:25px 50px 75px;

上边距为25px、左右边距为50px、下边距为75px

margin:25px 50px;

上下边距为25px、左右边距为50px

margin:25px;

所有的4个边距都是25px

padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

length-定义一个固定的填充

%-使用百分比值定义一个填充

padding-简写属性

padding-bottom-设置元素的底部填充

padding-left-设置元素的左部填充

padding-right-设置元素的右部填充

padding-top-设置元素的顶部填充

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./box.css" rel="stylesheet" type="text/css">
</head><body><div class="header">头部<div class="logo"></div><div class="nav"></div></div><div class="conten">主体<div class="conten_left"></div><div class="middle"></div><div class="content_right"></div></div><div class="footer">脚部<div class="footer_left"></div><div class="footer_right"></div></div>
</body></html>

.header {width: 100%;height: 100px;background-color: aqua;text-align: center;
}.conten {width: 100%;height: 500px;background-color: blue;margin-top: 10px;text-align: center;
}.footer {width: 100%;height: 100px;background-color: indigo;margin-top: 10px;text-align: center;
}

CSS盒子模型、Boder基础相关推荐

（6）css盒子模型（基础下）
一.理解多个盒子模型之间的相互关系现在大部分的网页都是很复杂的,原因是一个"给人用的"网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着. html与DOM的关系详情了 ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...

CSS盒子模型、Boder基础