前端菜鸟笔记Day-4CSS布局

文章大纲来源：【Day3】HTML回顾+CSS基础CSS盒子模型宽高paddingmarginmarginCSS定位浮动CSS盒子模型内容参考：CSS盒子模型概述CSS盒子盒子模型指定元素的盒子如何处理元素内容、填充、边框和边距。元素的背景应用于由内容加上填充和边框组成的区域。border外面是margin，margin默认是透明的，不会遮住后面的任何元素。填充、边框和边距是可选的，默认为零；padding、border和margin可以应用于元素的所有边，也可以应用于各个边。宽度和高度定义元素的宽度和高度属性。widthwidthheightheight可以用px为单位进行数值定义，比如1px；也可以用百分比表示，比如100%，百分比代表父元素的百分比。注意：内联元素不能定义宽高，而块元素和内联块元素可以。填充内容引用：CSS填充元素在边框和内容区域之间有填充。padding属性定义一个元素的填充，接受长度或百分比值，但不允许负值。h1{填充：10px;}也可以按照上、右、下、左的顺序设置每一边的内边距，每一边可以使用不同的单位或百分比值：h1{padding:10px0.25em2ex20%;}也可以使用以下四个单独的属性设置单边填充属性：padding-toppadding-rightpadding-bottompadding-left1{padding-top:10px;右填充：0.25em；底部填充：2ex；padding-left:20%;}之前在宽高设置部分使用了内边距的百分比，可以相对于父元素的宽高来设置。填充百分比值是相对于父元素的宽度计算的。/*段落的padding设置为父元素宽度的10%*/p{padding:10%;注意，上面解释的部分，padding只是指父元素的宽度，即top和bottompaddings也是引用width，而不是常识中指的是父元素的height；padding-top/padding-bottom也指相同的宽度。边距内容参考：CSSMargins元素边框周围的透明区域是边距。设置边距是使用margin属性完成的，它接受任何长度单位（像素、英寸、毫米或em）、百分比值，甚至是负值。margin可以设置为auto。基本上，margins和padding的写法类似，即使百分比是指父元素的宽度。单边margin属性与单边内margin属性类似：margin-topmargin-rightmargin-bottommargin-left不再赘述。值复制有时会输入一些重复的值：p{margin:0.5em1em0.5em1em;}通过值复制，可以不重复地声明属性：/*上面的规则等价于下面的规则*/p{margin:0.5em1em;}CSS定义了允许为margin指定少于4个值的规则：missingleft,userightvaluemissingbottom,useuppervaluemissingright,useuppervalueh1{margin:0.25em1em0.5em;}/*相当于0.25em1em0.5em1em*/h2{margin:0.5em1em;}/*相当于0.5em1em0.5em1em*/p{margin:1px;}/*等同于1px1px1px1px*/CSSPositioning内容参考：CSSPositioningCSSPositioning属性允许您定位元素。定位的基本思想很简单，它允许你定义一个元素的框相对于它的正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。Everythingisaboxdiv、h1或p元素通常被称为块级元素。这意味着这些元素显示为一个内容，一个“块框”。相反，诸如span和strong之类的元素被称为内联元素，因为它们的内容显示在一行或“内联框”中。可以使用显示属性更改生成的框的类型。如果框的属性设置为display:none，则框及其所有内容不再显示，不占用文档空间。但是有一种情况是即使没有明确定义（包括包装标签）也会创建块级元素，这种情况发生在将某些文本添加到块级元素（例如div）的开头时。即使文本没有被定义为段落，它也会被视为一个段落：

在这种情况下，该框称为空白块框，因为它不与特定定义的元素相关联。定位机制CSS具有三种基本定位机制：正常流定位、浮动定位和绝对定位。默认情况下，所有框都位于正常流中。块级盒子从上到下依次排列，盒子之间的垂直距离由盒子的垂直边距计算。行内框水平排列成一行。它们可以使用水平填充、边框和边距来隔开。但是，垂直填充、边框和边距不会影响行内框的高度。由一行组成的水平框称为行框，行框的高度总是足够大以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。位置属性通过使用位置属性，我们可以在4种不同类型的定位之间进行选择。static：元素框正常生成。relative：元素框偏移一定距离。该元素保留其未定位的形状，并保留其最初占用的空间。absolute：元素框完全从文档流中移除并相对于其包含块定位。fixed：类似于将位置设置为绝对，但包含块是视口本身。相对定位的内容引用：CSS相对定位设置为相对定位的元素框会偏移一定的距离。该元素保留其未定位的形状，并保留其最初占用的空间。简单的说就是原来的位置还是占据那个位置，只是元素会偏移显示。#box_relative{位置：相对；/*框将在其原始位置顶部下方20px*/top:20px;/*框将在其原始位置左右各30px*/left:30px;}绝对定位内容参考：CSSAbsolutePositioning设置为绝对定位的元素的框完全从文档流中移除并相对于其包含块定位.与相对定位不同，绝对定位使元素的位置独立于文档流，因此不占用空间。简而言之，该元素不再占用文档流中的任何空间，只是保持相对于包含块的定位。#box_relative{位置：绝对；/*框将在包含块顶部下方20px*/top:20px;/*盒子将在包含块左侧的右边30px*/left:30px;}注意上面包含块的概念是：绝对定位元素的位置是相对于最近定位的祖先元素,如果该元素没有定位的祖先元素，那么它的位置是相对于原始包含块（通常是HTML元素）的。上述概念中，positioned是指position属性设置为relative、absolute、fixed其中之一的元素；最近定位指的是从该元素向上查找的元素的父子链，其中最近定位的祖先元素。提示：因为绝对定位框与文档流无关，所以它们可以覆盖页面上的其他元素。这些盒子的堆叠顺序可以通过设置z-index属性来控制。浮动内容参考：CSSFloat浮动框可以向左或向右移动，直到其外边缘接触到包含框或另一个浮动框的边框。由于浮动元素不在文档的正常流中，因此文档正常流中的块框表现得好像浮动元素不存在一样。如果容器太窄无法容纳三个水平排列的浮动元素，则其他浮动元素将向下移动，直到有足够的空间。如果浮动元素具有不同的高度，它们可能会在向下移动时被其他浮动元素“卡住”。float属性使用浮动方法：img{/*将图像向右浮动*/float:right;}float的可能值：none：默认值，元素不浮动，会在文本中出现的地方显示。left：元素向左浮动。right：元素向右浮动。inherit：从父元素继承float属性的值。lineboxes和cleanupfloats旁边的lineboxes被缩短，这样lineboxes就会环绕float，所以创建一个float允许文本环绕图像。注意：这里说的linebox就是前面说的unnamedblockbox。如果要防止linebox包围floatingbox，需要给box应用clear属性（？）。属性值可以是left、right、both或none，表示框的哪些边不应紧挨着浮动框。浮动和清零的深入使用和机制这里就不详细解释了（主要是暂时不喜欢用，用到的时候开专解说，咕咕）.个人静态博客：前端泡泡日记：https://rheabubbles.github.io