CSS盒模型CSS盒模型本质上是一个盒子，封装了周围的HTML元素，包括margin、border、padding、content盒模型的类型：W3C标准和模型以及IE盒模型（weirdboxmodel）W3C标准盒模型：属性width和height只包含content，不包含border和paddingIE盒模型：属性width和height包含border和padding，指的是content+padding的新box-sizing属性的值+bordercss3。content-box是标准盒模型，border-box是IE盒模型。基本框CSS假设每个元素都会生成一个或多个矩形框。每个元素框的中心是一个内容区域，周围环绕着可选的填充、边框和边距。盒模型——包含块每个元素都相对于它的包含块放置，它是元素的布局上下文。BoxModel--Normalflow指的是西文文字从左到右，从上到下显示，这也是传统HTML文档的文字布局。大多数元素处于正常流中，使元素脱离正常流的唯一方法是使其成为浮动或定位元素。块级元素控件框粗体文本模型水平方向有7个值：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right（合在一起必须等于包括快速宽度）。其中margin和width可以设置为auto，其他要么是固定值，要么默认为0。margin值可以设置为负数，padding不能。不合并水平边距。元素的默认高度由其内容决定，可以为任何块级元素设置显示高度。同理，控件框模型垂直方向有7个值：margin-top,border-top,padding-top,height,padding-top,border-top,margin-top（合起来必须等于包含快速的高度）。其中margin和height可以设置为auto，但是设置top和bottommargin为auto是没有用的，因为会被重置为0。级子级，它的默认高度是从最高块级子级的外边界边界到最低块级子级的外边界的距离。垂直方向的另一个重要方面是合并相邻元素的边距。如果两个相邻元素的垂直外边距都设置为负值，浏览器将取绝对值较大的作为外边距。一正一负，则取正margin与负margin的绝对值之差作为margin。block,inline,inline-blockvs.block：元素占据一行。默认情况下，元素的宽度自动填充父元素的宽度。可以设置宽高属性，设置了宽高的块级元素仍然独占一行。块级元素可以设置margin和padding.inline：元素不会占一行，多个相邻元素排成一行，排不齐会自动换行，其宽度随元素的内容。设置内联元素的宽高无效。内联元素的margin和padding属性在水平方向有效，在垂直方向不会产生margin效果。inline-block：将对象呈现为内联对象，但对象的内容具有块级元素的属性。float和position文档流的区别：css中有一个z-index属性。默认情况下，所有页面元素都位于z-index:0层，元素在该层按顺序排列称为文档流。float和position都是通过改变文档流来实现定位的。CSS具有三种定位机制：文档流、浮动和绝对定位。除非另有说明，否则所有元素都位于文档流中。CSS定位背后的基本思想很简单。它允许您相对于元素通常出现的位置，或相对于父元素、另一个元素，甚至是浏览器窗口本身来定位元素。floatfloat属性定位的元素位于z-index:0层。它使用float:left和float:right来控制元素在第0层是向左浮动还是向右浮动。float会改变整个文档流的排列，影响周围的元素，但不会跳出文档流。float元素在文档流中是并排排列的，但是只有float元素是并排排列的。对于非float元素，float元素会通过它们，即float:left会将非float元素向所有float元素元素向右挤压，float:right向左挤压。positionposition属性有四个值：static（默认值）、relative、absolute、fixed1.static：静态定位。元素框正常生成，元素按顺序显示，在文档流中一个接一个，内容遵循正常的从上到下的HTML流。2.relative：相对定位。元素偏移一定距离。该元素保留其未定位框的形状，并保留其最初占据的空间。相对定位的元素相对于其在HTML流中的当前位置进行定位。相对定位的主要用途不是移动一个元素，而是在行内为它里面绝对定位的元素设置一个新的参考点。position:relative的元素相对于它应该在的位置有偏移。偏移位置浮动在上面，但它仍然会保留其在z-index:0中的位置，不会影响相邻元素。absolute：绝对定位。绝对定位可以通过px、em、%指定左、右、上、下位置来确定元素的位置。此外，绝对定位的元素与页面流完全分离。3.absolute的一般用法：如果一个元素被设置为绝对定位，并且没有在任何其他应用了absolute、relative、fixed定位的标签中，那么它是相对于页面（body元素）定位的。如果一个元素在另一个具有绝对、相对或固定定位的标签内，则它是相对于元素的边界定位的。即：position:absolute的元素在静态父元素中是相对于页面的偏移量，在非静态父元素中是相对于父元素的偏移量。4.fixed：元素固定在屏幕上的某个位置，相对于浏览器窗口定位。如果你好学，想变强，可以来我的前端学习q..u.n.：784783012朋友们会在里面交流，分享一些学习方法和需要注意的小细节，说说一些很酷的前端-每天准时结束特效
