如何用CSS快速布局— 布局元素详细

定义结果一样）。如下： 还会出现文字包绕现象： 块级元素和浮动元素优先级 当块级元素先于浮动元素定义时，浮动元素换行排后。当浮动元素先定义时，脱离文档流，不对正常文档流的块级元素造成影响。 3，内部盒子浮动元素和外部文档流内部元素关系： 浮动元素覆盖外部文档流元素，但不占据空间。 绿色块和图片是蓝色块的内部元素，可见，块级元素照正常文档流显示，但内联元素img还是会让步于浮动元素，即使是外部文档流的浮动元素。 4，兄弟元素绝对定位和浮动的优先关系 蓝色块为黄色内部块的absolute定位元素，且先于红色块设置p。红色块为Float定位元素，被absolute覆盖。 5，绝对定位和文档流元素的优先关系&相对定位元素的优先关系 绝对定位position：absolute。 1，相对一个不为static的父元素进行绝对定位，如果不指定父元素的position，absolute将相对整个html文档进行绝对定位。 2，如果没有设置top\left\bottom\right，则其顶端和左侧将与原文档流位置一致（即跟没有设置position一样），但又会覆盖掉外部文档流内部浮动元素多出部分。 下图为蓝色块设置position:absolute; （注：黄色块（内含红色和绿色子元素）和蓝色块（内含绿色子元素）是兄弟元素） 调换下顺序，蓝色块首先设置p，position为absolute。黄色块没设置position，即默认static。因为脱离了文档流，absolute元素优先显示。 设置黄色块position为relative，黄色块覆盖绝对定位元素。即当相对定位元素后于绝对定位元素定位时，相对定位元素优先显示。 总结： 1，正常文档流下，外部盒子优先显示于先定义元素的内盒子（如果超出会被覆盖）。块级元素和内联元素不会在同一行。 2，对内外部文档流，浮动元素脱离文档流，对于先定义的元素按正常文档流显示（让位块级，挤开内联），对后定义的元素不造成布局影响，但却影响正常文档流的内联元素展示，表现为内联元素依旧会被浮动元素“挤开”（不论哪里的内联元素，都不会被覆盖在浮动元素之下） 3，绝对定位元素优先显示于浮动元素。 4，不设置具体值的绝对定位元素会按正常文档流排列，但脱离文档流，不对后定义元素造成影响。 5，如果兄弟元素设置了position:relative；当先于绝对定位元素定义时，绝对定位元素优先显示于相对定位元素。 当后于绝对定位元素定义时，相对定位元素优先显示于绝对定位元素。 四、如何居中对齐 水平居中： 1.实现行内元素的居中。 方法：在行内元素外面的块元素的样式中添加：text-align:center; 2.实现块级元素的水平居中。 方法一： margin:0 auto; 注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且p中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个p中的另一个p希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。 方法二： 使用绝对定位和负边距。 position:absolute; left:50%;                 ——相对于父元素向左移动50%宽度 margin-left:-50px;    ——移回自身宽度的一半 垂直居中 1.行内元素的垂直居中 方法一： 让字体垂直居中，line-height设置为父元素高度。 方法二： 设置padding让其垂直居中。 方法三： 父元素设置line-height，行内元素设置vertical-align:middle。 2.块级元素的垂直居中。 方法一： 使用绝对定位和负边距。 方法二： 在父元素中添加display:flex;align-items:center;即可实现竖直居中。 实现水平和垂直居中 方法一： 使用绝对定位和负边距 方法二： 使用display：flex 在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中 。 方法三： 同样使用display:flex. 在父元素中设置display:flex;在子元素中设置margin：auto。 方法四： 使用css3属性——translate()变形函数 position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); 五、关于样式继承 盒模型样式是不可继承的，例如width、height（宽高）、border（边框）、margin（边距）、padding（补白）和背景等 vertical-align不可继承 可继承属性 color cursor direction font letter-spacing line-height list-style text-align text-indent text-shadow text-transform whitewhite-space word-break word-spacing word-wrap writing-mode 更多如何用CSS快速布局— 布局元素详细 相关文章请关注PHP中文网！