盒子模型

• CSS 盒子模型（元素框）由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。盒子模型，最里面的部分是实际内容；直接包围内容的是内边距；内边距的外边缘是边框；边框之外的是外边距。 内边距呈现了元素的背景；外边距默认是透明的，所以不会遮挡它后面的任何元素。


• div标记
  可定义文档中的分区或节（division/section）。

  标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记

  ，那么该标签的作用会变得更加有效。 用法，

  是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

  固有的唯一格式表现。可以通过

  的 class 或 id 应用额外的样式。不必为每一个

  都加上类或 id，虽然这样做也有一定的好处。可以对同一个

  元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素

盒子模型相关属性

• css盒子模型相关属性之width/height是指内容的宽度和高度
• css盒子模型相关属性之边框(宽度，样式，颜色) border: px style color; border-top: px style color; 宽度：border-width;单个边框：border-top-width;
• css盒子模型相关属性之内边距–padding 设置单个方向：padding-top/padding-bottom/padding-left/padding-right
• css盒子模型相关属性之外边距-margin 设置单个方向：margin-top/margin-bottom/margin-left/margin-right
• 、css盒子模型相关属性之轮廓:作用在border之外的样式 outline-width outline-style： hidden(隐藏) dotted(点) dashed(虚线) solid(实线) double(双线) outline-color: 或者： outline: px style color;

背景属性

• 1.在项目目录中添加一张图片 2.编写HTML，为body添加style，添加背景图片， 3.页面显示结果，这是重复平铺背景图片的效果 4.可以加上background-repeat:no-repeat设置为不平铺，默认为平铺即repeat，也可以设置为repeat-x 5.设置为不平铺之后页面显示结果
• CSS2.1 之前是不能设置背景bai图大小的，CSS3就可以通过dubackground-size来设定图片大小，可以是像zhi素或者是百分比dao。例如background-size:100px 200px;表示把背景图片大小调整为100x200px。要把图像应用成为背景，要使用 background-image这一 属性。当background-image 属性默认值是 none的时候，这表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

背景属性

• 1、css背景属性总的说来就bai一个。 background其他的 backgroud-image , background-color, background-repeat等等都是它du的分之。用css控制背景，一个background就够了。zhi比如：background:#f00 url(图片地址) no-repeat;背景色为红色，有图片，图片不重复。如果分开写的话就要写3个属性，很不简洁。2、盒子模型，其实就是把html的标签比喻成box（盒子）。盒子干嘛的？当然就是装东西的啦。盒子属性有：width height，宽高。px为单位。可以理解为内容区域。padding 内边距。是内容距离盒子边缘的距离。border边框。就是盒子的“墙壁”margin 外边距。盒子与周围的其他盒子的距离。另外，css3多了个圆角。 border-radius 也可以算是盒子模型中的编外分子。特别强调盒子模型属性都要占位。