CSS 상자 모델 및 위치 지정 소개

박스 모델의 공통 관련 속성과 속성값

/*基本属性*/padding: padding-left/right/top/bottom
border: border-left/right/top/bottom  border-radiusmargin: margin-left/right/top/bottom/*定位*/position                //把一个元素放在静态的static、相对的relative、绝对的absolute、固定的fixed位置中left right top bottom   //元素距原位置的左右上下的偏移量overflow                //设置元素溢出其区域发生的事情clip                    //设置元素显示的形状vertical-align          //设置元素垂直对齐的方式z-index                 //设置元素的堆叠次序/*浮动*/float    //浮动 left right none inheritclear    //去掉浮动 left right both inherit 123456789101112131415161718

css float

먼저 div는 페이지에서 한 줄을 차지하는 블록레벨 요소로, 다음과 같이 배열된다는 점을 알아야 합니다. 위에서 아래로, 이것이 전설적인 흐름이다. 아래 그림과 같이

div1의 너비가 매우 작더라도 페이지의 한 줄에 div1과 div2를 수용할 수 있으며 div 요소가 div 요소를 차지하므로 div2는 div1 뒤에 순위가 지정되지 않음을 알 수 있습니다. 자신의 라인.
위 이론은 표준 흐름의 div를 참조합니다. 레이아웃이 아무리 복잡하더라도 기본 시작점은 "여러 div 요소를 한 행에 표시하는 방법"입니다.
분명히 표준 스트림은 더 이상 수요를 충족할 수 없으므로 플로트를 사용해야 합니다. 플로팅은 특정 div 요소가 표준 흐름에서 벗어나 표준 흐름과 동일한 수준이 아닌 표준 흐름 위에 떠 있게 하는 것으로 이해될 수 있습니다. 예를 들어 위 그림의 div2가 float라고 가정하면 표준 흐름에서 벗어나지만 div1, div3, div4는 여전히 표준 흐름에 있으므로 div3은 자동으로 위쪽으로 이동하여 div2의 위치를 ​​차지하며 재구성됩니다. 흐름. 그림과 같이: 让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列

그림에서 볼 수 있듯이 div2는 float로 설정되어 있으므로 더 이상 표준 흐름에 속하지 않습니다. div3는 자동으로 위로 이동하여 div2의 위치를 ​​대체합니다. div1 , div3, div4가 순서대로 배열되어 새 스트림이 됩니다. 그리고 float는 표준 흐름 위에 떠 있기 때문에 div2는 div3의 일부를 차단하고 div3은 "짧게" 보입니다.

여기서 div2는 왼쪽 부동(float:left;)을 사용하는데, 이는 부동으로 이해될 수 있으며 왼쪽으로 배열됩니다. 그리고 오른쪽 부동(float:right;)은 물론 오른쪽으로 배열됩니다. . 여기서 왼쪽과 오른쪽은 페이지의 왼쪽과 오른쪽 가장자리를 나타냅니다.

div2를 오른쪽으로 띄우면 효과는 다음과 같습니다.

이때 div2는 페이지 오른쪽 가장자리에 정렬되고 div3는 더 이상 차단되지 않습니다. 위에서 언급한 div4로 구성된 스트림인 div1 및 div3을 참조하세요.

지금까지 하나의 div 요소(div2)만 플로팅했습니다. 여러 div를 플로팅하면 어떻게 되나요?

다음으로 div2와 div3 모두에 왼쪽 부동을 추가합니다. 효과는 다음과 같습니다.

마찬가지로 div2와 div3도 부동이므로 더 이상 표준 흐름에 속하지 않으므로 div4는 자동으로 위로 이동하면 div1은 "새로운" 표준 흐름을 형성하고 부동 소수점은 표준 흐름 위에 떠 있으므로 div2는 div4를 차단합니다.

div2와 div3가 동시에 부동으로 설정되면 div3은 div2를 따릅니다. 독자들이 지금까지 모든 예제에서 div2가 부동이지만 div1을 따르지 않는다는 것을 눈치채셨는지 모르겠습니다. 따라서 우리는 중요한 결론을 내릴 수 있습니다.

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。1

독자의 이해를 돕기 위해 몇 가지 예를 더 들어보겠습니다.

div2, div3, div4를 왼쪽으로 부동하도록 설정하면 효과는 다음과 같습니다.

위 결론에 따르면: div4 분석부터 시작하면 상위 요소 div3이 부동인 것으로 나타났습니다. 따라서 div4는 div3가 상위 요소 div2도 부동 상태임을 확인한 후 div2를 따르고 div2는 상위 요소 div1이 표준 흐름의 요소임을 발견하므로 div2의 상대적인 수직 위치는 변경되지 않습니다. 상단은 여전히 ​​div1 요소가 하단에 정렬되어 있습니다. 부동 상태로 남아 있기 때문에 왼쪽이 페이지 가장자리에 가깝기 때문에 왼쪽이 전면이므로 div2가 가장 왼쪽에 있습니다.

div2, div3, div4를 오른쪽으로 플로팅하도록 설정하면 효과는 다음과 같습니다.

원리는 기본적으로 왼쪽으로 플로팅하는 것과 동일하지만 이전에 해당 관계에 주의해야 합니다. 그리고 그 이후. 오른쪽으로 떠 있기 때문에 오른쪽이 페이지 가장자리에 가깝기 때문에 오른쪽이 앞쪽이므로 div2가 가장 오른쪽에 있습니다. 🎜div2와 div4만 왼쪽으로 띄우면 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜

依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列，清除浮动可以理解为打破横向排列。

清除浮动：

语法： clear : none | left | right | both 

none : 默认值，允许两边都可以有浮动对象 
left : 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
both : 不允许有浮动对象12345678

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。而其实这种理解是不正确的，这样做没有任何效果。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

위 내용은 CSS 상자 모델 및 위치 지정 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!