css学习1

1
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
2
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

3 align-content对齐灵活的 <div> 元素的各项：
Internet Explorer、Firefox 和 Safari 不支持 align-content 属性。</p>

4 块框元素比如div，H1或者p元素有text-align属性控制元素显示的位置：left，right，center；line-height 属性设置行间的距离（行高）。

5 span要设置高度，必须要转换成block元素才可以：
display:block; 这样就变成了块元素
在html5中可以直接用inline-block

div span区别：
块元素，就是DIV和block。他们无论多大，都占一行，就算同一行的地方空着，也不能放别的东西

inline就是span元素，流体排版，如果同一行的右边还有空余地方，就会把挨着他的别的元素放右边，依次放，直到放满换行
span将display设置为：inline-block就具备他们两个的特点，又不会占一行，又可以改变大小。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。

6
CSS 定位属性允许你对元素进行定位。
属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

大神总结

先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使 TOP,LEFT这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。
再说绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

转载于:https://www.cnblogs.com/lv-sally/p/4810300.html