前端学习 CSS定位属性整理

最新推荐文章于 2024-09-27 15:49:05 发布

baiiu

最新推荐文章于 2024-09-27 15:49:05 发布

阅读量1k

点赞数

分类专栏： python、Js、Git等文章标签： css 前端布局

本文链接：https://blog.csdn.net/u014099894/article/details/51336948

版权

25 篇文章

订阅专栏

写了几个页面后，受不了对于CSS布局定位的折磨，下决心搞搞学习学习这个定位。也整理一下之前的资料。

必须要明确：

float:left|right|none

设置了float属性的元素将会根据属性值在父容器内进行重排，text和display为inline元素将会包裹在它旁边。
该属性使用于除了定位元素以外的所有元素。

float属性可以用来处理高度不定的情况，也可以使用该属性实现多列并排。
可以使用clear属性清除浮动，让使用了该属性的元素按照正常排列。

其他资料：

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
设置了float属性的元素将会根据属性值在父容器内进行重排，text和display为inline元素将会包裹在它旁边。
left属性： the element must float on the left side of its containing block.
How floats are positioned:
As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.
一旦设置了float:left它就会一直往左靠，直到到达父控件边缘或其他float的元素。

position:static
遵循html本身的布局规则。没啥用。
position:relative
该属性并不会把元素从文档流中拖出来。
使用left等属性进行元素偏移时，仅仅偏移的是它的视图，它仍然占据原始位置（即其他同级元素并不会跟着它一起偏移，还是不动，还是在原来的位置）。
一般没啥用，说不定也会有用。
position:absolute
该元素会把元素从文档流中拖出来，相对于其最接近的一个具有定位属性属性的父包含块进行绝对定位。
其他元素会占据该元素的位置。
position:fixed
相对于视图本身移动(浏览器网页窗口)。所以，它不会随浏览器窗口滚动条的滚动而变化。固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。

当你的元素有定位时，他们有时候会放置在另一个元素的顶部。要改变这些元素是一个 怎么样的层叠顺序，要知道z轴，z轴是用"z-index"属性来控制的。

给元素设置"z-index"属性，首先要在这个元素上设置了"position"属性值为"relatvie"、"absolute"或者"fixed"之一。

1.设置盒模型

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

此元素的内边距和边框不再会增加它的宽度。

即该元素的实际宽度 = marginLeft + elementWidth + marginRight;

2.max-width属性：
使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

3.width:calc(100% - 380px);
使用函数计算宽度，这样会方便很多

很多情况下，我们需要float来布局，然而又需要清除float来完成其他布局，就必须要清除浮动。

综合使用这些布局属性完成网页布局，他们不是独立的，而是互相联系并影响的，需要综合使用。在实战中熟练。

教程：
学习CSS布局

把 ten steps 自己写一遍，会有更深入的理解：
Learn CSS Positioning in Ten Steps
10步掌握CSS定位

资料：
HTML和CSS高级指南之二----定位详解