盒子模型的原理

• 内容（文字/图片/标签元素）-content

• 内边距-padding

• 外边距-margin

• 边框-border
  

*内边距，外边距和边框都有4个方向
 - padding-top
 - padding-right
 - padding-bottom
 - padding-left

内容的实际高度和宽度=自己+上下的内边距，外边距和边框

<div> 、<ul>、<ol>、<p>、<h>、<table>块级标签，都具有模型的特征

这一小节讲解<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把下面的第一段话“美国梦”三个字设置成blue（蓝色），所以这样情况下就可以用到<span>标签了。

display:none- 使元素不会被显示和隐藏

*大多数会和JavaScript（JS）一起结合使用。

display:inline-block-将元素设置为内联块状元素。

<img>、<input>标签就是内联块状标签。

inline-block 元素特点：

1、和其他元素并列

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

*内联元素是不可以设置宽和高的

绝对定位

使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位

 position:absolute;
    left:100px;
    top:50px;

相对定位

使用left、right、top、bottom属性

相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

div{
    position:relative;
    left:100px;
    top:0;
    }

固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，

 position: fixed;
    left:100px;
    top:50px;

块状元素可以通过代码【display:inline】变成内联元素。

• 块状元素 + display:inline = 内联元素

内联元素特点：

1、和其他元素并列

2、元素的高度，宽度；顶部，底部边距不可设置

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

CSS3的布局 - css布局模型

CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)

浮动模型

#div1{float:left;}
#div2{float:right;}

3、层模型（Layer）

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

margin为盒子设置外边距（边界）

上、右、下、左

div{margin:20px 10px 15px 30px;}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

padding和margin的区别，padding在边框里，margin在边框外。

padding为盒子设置内边距（填充）

填充也可分为上、右、下、左(顺时针)

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

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

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

border-radius设置圆角

div{border-radius: 20px 10px 15px 30px;}

如果四个圆角都为10px;可以这么写：

div{ border-radius:10px;}

如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：

div{ border-radius:10px 20px;}

一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形

边框

1、border-style（边框样式）

dashed（虚线）| dotted（点线）| solid（实线）。

div{border:2px  solid  red;}

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

背景色

div{background-color:red;}//为块状元素设置
a{background-color:green;}//为行内元素设置

排队显示-流动模型（一）

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

italic是字体系列(比如宋体，楷体)里的斜体，而oblique是字体倾斜效果，对于没有斜体的字体系列使用oblique实现斜体效果

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">