css

资料收集

CSS布局 ——从display，position， float属性谈起

 

css响应式设计

viewport

div块元素按代码顺序进行加载，顺序不一样效果不一样 

div为块元素，独占一行，不管宽为多少，几个div从上往下摆列

关于高度：div的总高度取决于里面没有浮动的子div的总高度。浮动的div可能在div界线外显示（这样会被外面的div覆盖掉），没有浮动的div总是在父div里面。

浮动div的前面如果是浮动div，那么它将在前面的div的左或是右边摆列，如果前面是不浮动的div，那它在不浮动div的下方

父div加上overfloat:hidden后，父div的大小会在以有的基础上加上浮动出去的div大小

 

什么是文档流

定义：

　　将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素,即为文档流。

块元素在文档流的位置：

　　每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。

内联元素在文档流的位置：

　　不会独有一行.

一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

加哪些样式后不再在文档流里：

　　浮动float、绝对定位absolute、固定定位fix

基于文档流理解下面的定位方式

　　相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留，在文档流里保留空间。

　　绝对定位：即完全离开文档流, 相关于position属性非static值的父级元素进行偏移。（即：父级元素要是非position为static的值才能相对它来定位，如果父级元素是static就再往上找父级元素定位，直到body元素甚至html元素）

     固定定位：即完全离开文档流，相关于视区进行偏移。

css2里position的定义：检索对象的定位方式。共有4种取值。

absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。

fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。
relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

inherit：继承值，对象将继承其父对象相应的值。

 

display:none和visibility:hidden

display:none从文档流移除，就好比html里没有了这个元素一样

visibility:hidden在文档流里有，只是不显示，隐藏了，原来的位置占着

 

float和position:absolute在一起用时，float已经没用了，因为position:absolute后就已经脱离文档流了，float可以和position:relative一起用，效果是先float再position:relative定位

 

转载于:https://www.cnblogs.com/shengyu-kmust/p/5140840.html