집 >웹 프론트엔드 >HTML 튜토리얼 >CSS 레이아웃 상자 모델 속성

CSS 레이아웃 상자 모델 속성

php中世界最好的语言원래의: 2018-02-28 09:54:362715검색

이번에는 CSS 레이아웃의 박스 모델 속성에 대해 소개하겠습니다. CSS 레이아웃의 박스 모델 속성 주의사항은 무엇이며, 다음은 실제 사례입니다. 살펴보겠습니다.

너비/높이

　CSS에서는 모든 블록 수준 요소에 대해 명시적인 높이를 설정할 수 있습니다.

　지정된 높이가 콘텐츠를 표시하는 데 필요한 높이보다 큰 경우 초과 높이는 마치 추가 패딩이 있는 것처럼 시각적 효과를 생성합니다.

　지정된 높이가 콘텐츠를 표시하는 데 필요한 높이보다 작으면, Overflow 속성에 따라 스크롤이 필요합니다. 막대는 Overflow:auto로 설정되어야 합니다.

auto

　 너비, 높이, 여백을 자동으로 설정할 수 있습니다. 블록 수준 요소의 경우 너비가 자동으로 설정되면 최대한 넓어집니다. 구체적으로 요소 너비 = 포함 블록 너비 - 요소 가로 여백 - 요소 가로 여백 너비 - 요소 가로 패딩

　 높이를 자동으로 설정하면 최대한 좁아집니다. 자세히 설명하면, 요소 높이 = 인라인 콘텐츠를 포함할 만큼의 높이

　[참고] 포함 블록의 높이가 명시적으로 선언되지 않으면 요소의 높이 백분율이 자동으로 재설정됩니다

[최대 및 최소 너비 및 높이]

min-width | min-height

　초기값: 0

적용 대상: 블록 수준 요소 및 대체 요소

　비율: 포함 블록의 너비(높이) 기준

max-width | -heightt

초기값: 없음

적용 대상: 블록 수준 요소 및 대체 요소

백분율: 포함 블록의 너비(높이)에 상대적

[참고] 최소 너비(높이)가 다음보다 큰 경우 최대 너비(높이), 최소 너비가 사용됨 가장 높은 값이 우선함

내부 여백 패딩

박스 모델의 다른 속성(예: 포지셔닝에 자주 사용되는 음수 값 여백)과 비교하여 패딩은 훨씬 더 규칙적이며 호환성도 없고 특별한 기능도 없습니다. 문제

인라인 요소의 경우 요소 시작 부분에 왼쪽 패딩이 적용되고 요소 끝 부분에 오른쪽 패딩이 적용됩니다.

　[참고]Padding은 음수일 수 없습니다.

padding

　초기 값: 정의되지 않음

　백분율: 너비에 비례합니다. 포함 블록

【50%】

　블록 수준 요소는 패딩을 통해 달성할 수 있습니다: 50% 제곱 효과. 수평 및 수직 패딩의 백분율 값은 포함 블록의 너비를 기준으로 결정되기 때문에 종종 헤더 이미지를 이동하는 데 사용됩니다

Margin

여백을 설정하면 요소 외부에 추가 여백이 생성됩니다. 공백은 일반적으로 다른 요소를 배치할 수 없는 영역을 의미하며 상위 요소의 배경을 볼 수 있는 영역입니다. 이 영역

margin

　초기값: 정의되지 않음

적용 대상: 모든 요소

퍼센트: 포함 블록 기준 너비

[참고] 일반 요소의 경우 포함 블록은 블록 수준 상위 요소입니다. 위치 지정 요소인 경우 포함 블록은 위치 지정 상위 요소입니다. 따라서 일반 요소의 마진 비율은 블록 수준 상위 요소의 너비를 기준으로 하며, 위치가 지정된 요소의 마진 비율은 위치가 지정된 상위 요소의 너비를 기준으로 합니다.

마진은 음수 값으로 설정할 수 있으며 여백과 너비는 높이는 자동을 지원하고, 여백은 매우 이상한 중첩 특성을 가지고 있습니다.

겹침, 자동 및 유효하지 않은 상황을 포함하여 여백의 여러 핵심 부분 소개

1. 겹치기

【전제 조건】

마진 겹치기를 마진 병합이라고도 합니다

1. 블록 요소에서 발생합니다 (float, 절대, 인라인 블록 요소 제외)

2. 세로 방향에서만 발생합니다 (writing-mode에 관계없이)

【분류】

여백이 겹치는 상황

1. 인접한 형제 elements

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. 부모 요소와 첫 번째 또는 마지막 자식 요소, 부모와 자식 수준의 여백 겹침을 여백 전송이라고도 합니다.

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

웹 페이지 레이아웃에서는 여백 겹침으로 인해 종종 여백을 다음과 같이 처리합니다. "질문 스타일"을 사용하고 가능한 한 적게 사용하십시오. 하지만 실제로는 큰 역할을 하기 때문에

그래서 겹치는 부분을 잘 활용해야 하고, 목록 항목에서는 margin-top과 margin-bottom을 동시에 사용할 수 있습니다. 이런 방식으로 페이지 구조가 더 강력해지고 마지막 요소를 제거하거나 배치해도 원래 레이아웃이 파괴되지 않습니다.

2.auto

너비/높이 및 여백만 자동으로 설정할 수 있습니다.

【margin:auto가 수직 센터링을 달성할 수 없는 이유】

水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间

垂直方向不可以居中是因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

图片无法水平居中，类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。左右margin设置为auto，会被重置为0

所以，图片要水平居中，需要设置为display:block元素

3.无效情形

1、行内元素垂直margin无效

因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CSS 레이아웃 상자 모델 속성

관련 기사