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

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

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

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

不同部分的说明:

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

元素分类

在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素内联元素(又叫行内元素)内联块状元素

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>...(具体可参考block elements

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>...具体可参考(Inline elements

常用的内联块状元素有:

<img>、<input>

元素分类--块级元素

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a { display:block; }

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

元素分类--内联元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

 div {
display:inline;
} ...... <div>我要变成内联元素</div> 

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

元素分类--内联块状元素

内联块状元素(inline-block就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

div {
border:2px solid red;
}

上面是 border 代码的缩写形式,可以分开写:

div {
border-width:2px;
border-style:solid;
border-color:red;
}

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

border-color:#888;//前面的井号不要忘掉。

3、border-width(边框宽度)中的宽度也可以设置为:

thin | medium | thick(但不是很常用),最常还是用象素(px)。

盒模型--边框(二)

现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式:

p { border-bottom:1px solid red; }

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

盒模型--填充(padding)

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:

div { padding:20px 10px 15px 30px; }
顺序一定不要搞混。可以分开写上面代码:
div {
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}

如果上、右、下、左的填充都为10px;可以这么写

div { padding:10px; } 
如果上下填充一样为10px,左右一样为20px,可以这么写:
div { padding:10px 20px; }

如果left和right的值相同,如下面代码:

div { padding: 10px 20px 30px 20px; }

可缩写为:

div { padding: 10px 20px 30px; }

注意:border、margin的缩写方法和padding是一致的。

盒模型--边界(margin)

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。padding和margin的区别,padding在边框里,margin在边框外。

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距


浏览器的兼容性问题

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。 CSS3的box-sizing属性可以定义要使用哪种盒模型,但是除了一些非常特殊的场合之外很少需要使用这个属性。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

 

css盒模型(Box Model)的更多相关文章

  1. 盒模型Box Model(浮动)

    一.标准盒模型的大小:border+padding+content(width)        怪异盒模型大小:padding+border   二.display inline  默认,且变为行由内 ...

  2. 教你吃透CSS的盒子模型(Box Model)

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  3. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  4. CSS盒模型详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...

  5. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  6. CSS 盒模型、解决方案、BFC 原理讲解--摘抄

    PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...

  7. CSS盒模型(Box Model)

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  8. HTML和CSS的盒子模型(Box model)

    本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...

  9. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

随机推荐

  1. 一:My Batis快速入门

    ---恢复内容开始--- 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检 ...

  2. Java并发编程实践读书笔记(4)任务取消和关闭

    任务的取消 中断传递原理 Java中没有抢占式中断,就是武力让线程直接中断. Java中的中断可以理解为就是一种简单的消息机制.某个线程可以向其他线程发送消息,告诉你“你应该中断了”.收到这条消息的线 ...

  3. 下载apache-tomcat-9.0.17-windows-x64及安装以及用途

    首先我们先去这个网站下载http://www.apache.org/,进入Tomcat,点击Tomcat9 下载64-bit Windows_zip 当我们下载好了之后解压,把多余的文件删除掉,也可以 ...

  4. Python运行MapReducer程序时所遇异常

    landen@Master:~/UntarFile/hadoop-1.0.4$ bin/hadoop jar contrib/streaming/hadoop-streaming-1.0.4.jar ...

  5. Java学习之路(十二):IO流<二>

    字符流 字符流是可以直接读写字符的IO流 使用字符流从文件中读取字符的时候,需要先读取到字节数据,让后在转换为字符 使用字符流向文件中写入字符时,需要把字符转为字节在写入文件 Reader和Write ...

  6. MAC帧格式、IPV4数据报格式、TCP报文格式、UDP数据报格式

    1.MAC帧格式 类型:2字节,指出数据域中携带的数据应交给哪些协议实体处理 校验码:校验数据段(采用32位CRC冗余校验方式进行校验) 2.IPV4数据报 版本:IP协议版本,这里为4 首部长度:占 ...

  7. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  8. 【Java并发编程】:并发新特性—Executor框架与线程池

    Executor框架简介 在Java5之后,并发编程引入了一堆新的启动.调度和管理线程的API.Executor框架便是Java 5中引入的,其内部使用了线程池机制,它在java.util.cocur ...

  9. Jmeter参数化与检查点

    一.Jmeter参数话有3种方法: 1. add->pre processors->user parameter(用户参数) 2.add->config Element->CS ...

  10. 针对石家庄铁道大学官网首页的UI分析

    身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...