HTML+CSS日学习总结--盒子模型

CSSCSS就三个大模块： 盒子模型 、 浮动 、 定位。

一、盒子模型

1. 看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用 CSS 摆放盒子的过程， 就是网页布局。

2. 盒子模型（ Box Model ）

所谓盒子模型：

1.就是把HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

2.CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括： 外边距（ margin ）、边框

（ border ）、内边距（ padding ）、实际内容（ content ）四个属性。

3. 盒子边框（border）

语法：border : border-width || border-style || border-color

 

边框属性 — 设置边框样式（ border-style ）

边框样式用于定义页面中边框的风格，常用属性值如下：

none ：没有边框即忽略所有边框的宽度（默认值）

solid ：边框为单实线 ( 最为常用的 )

dashed ：边框为虚线

dotted ：边框为点线

double ：边框为双实线

 3.1 边框综合设置

border : border-width || border-style || border-color

3.2 border的三角形原理

#box{
width:100px;
height:100px;
background:yellow;
border-top: 20px solid red;
border-right:20px solid black;
border-bottom:20px solid green;
border-left:20px solid blue;
}

3.4 圆角边框 (CSS3)

用法： border-radius : 左上角 右上角 右下角 左下角 ;

 

4. 内边距（padding）

padding 属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top: 上内边距

padding-right: 右内边距

padding-bottom: 下内边距

padding-left: 左内边距

 

5. 外边距（margin）

margin 属性用于设置外边距。 设置外边距会在元素之间创建 “ 空白 ” ， 这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 上外边距

margin: 上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同6

6.overflow 溢出(补充)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible( 默认 ) : 　不剪切内容也不添加滚动条。

auto : 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

二、浮动（float）

1.1 CSS 布局的三种机制

网页布局的核心 —— 就是 用 CSS 来摆放盒子 。 CSS 提供了 3 种机制 来设置盒子的摆放位置，分别是 普通

流 （标准流）、 浮动 和 定位 ，其中：

1. 普通流 （标准流）

块级元素 会独占一行， 从上向下 顺序排列；

常用元素： div 、 hr 、 p 、 h1~h6 、 ul 、 ol 、 dl 、 form 、 table

行内元素 会按照顺序， 从左到右 顺序排列，碰到父元素边缘则自动换行；

常用元素： span 、 a 、 i 、 em 等

2. 浮动

让盒子从普通流中 浮 起来 , 主要作用让多个块级盒子一行显示。

3. 定位

将盒子 定 在浏览器的某一个 位 置 ——CSS 离不开定位，特别是后面的 js 特效。

总结： html 当中有一个相当重要的概念，标准流或者普通流。普通流实际上就是一个网页内标签元素正

常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；

按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

2. 清除浮动

2.1 为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题

出现， 但是，你不能说浮动不好 。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此

时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是 清除浮动后造成的影响。

如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

三、定位（position）

1.元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1. 定位模式 ( 定位的分类 )

在 CSS 中， position 属性用于定义元素的定位模式，其基本语法格式如下：

选择器 {position: 属性值 ;}

2. 静态定位(static)

静态定位是所有元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。

所谓静态位置就是各个元素在 HTML 文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（ top 、 bottom 、 left 或 right ）来改变元素的位置