position 속성 에서 파생 된 css 진급 토론
normal flow(정상 흐름):정상 흐름 은 기본 적 인 포 지 셔 닝 방식 입 니 다.구체 적 으로 지정 되 지 않 은{position:absolute}또는{position:fixed}속성 과 움 직 이지 않 은 요 소 는 기본적으로 이 속성 을 얻 습 니 다.
이런 방식 에서 블록 급 요 소 는 그들의 포함 블록 에서 수직 으로 연장 되 고 줄 안의 요 소 는 그들의 포함 블록 에서 왼쪽 에서 오른쪽으로 수평 으로 배열 된다.
주의해 야 할 것 은 정상 적 인 흐름 에서 수직 여백(vertical margin)이 중첩 되 어 있다 는 점 이다.즉,상하 두 블록 급 상자 사이 의 거 리 는 그들 중의 거리 가 비교적 큰 요소 에 의 해 결정 되 는 것 이지 그들의 합 이 아니다!
<style>
div
{
width: 100px;
height: 100px;
border: 1px solid #00A4CC;
background-color: #3e8f3e;
}
.div1
{
margin:20px 0;
}
.div2
{
margin:40px 0;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
div 1 과 div 2 의 수직 거 리 는 큰 margin 에 의 해 결정 된다.즉,div 2 의 40px 는 양자 의 합 60px 가 아니다.
그 다음 에 줄 안의 요 소 는 부 러 지고 너비 가 제한 을 받 으 면 자동 으로 다음 줄 로 이동 합 니 다.줄 안에 테두리 가 있 으 면 보기 싫 은 효과 가 있 을 수 있 습 니 다.아래 효과 보기:
<head>
<style>
div
{
width: 200px;
height: 100px;
border: 1px solid #00A4CC;
}
span
{
border: 2px solid #00ff00;
}
</style>
</head>
<body>
<div>
<span> </span>
</div>
</body>
2.containing block
containing block(블록 포함):시각 포맷 모델 의 중요 한 개념 으로 상자 모델 과 유사 하고 사각형 으로 이해 할 수 있 습 니 다.이 사각형 의 역할 은 그 안에 포 함 된 요소 에 참고 가 되 고 요소 의 크기 와 위 치 는 이 요소 가 있 는 포함 블록 에 의 해 결정 됩 니 다.즉,하나의 요소 상자 의 위치 와 크기 는 특정한 사각형 에 비해 계산 되 는데 이 직사각형 은 요소 의 containing block 이 라 고 불 린 다.
하나의 요소 의 containing block 은 다음 과 같은 방식 으로 정의 합 니 다.
1.사용자 에이전트(예 를 들 어 브 라 우 저)는 루트 요 소 를 containing block(초기 containing block 이 라 고 함)으로 선택 합 니 다.
2.다른 요소 에 대해 요소 가 절대적 인 위 치 를 사용 하지 않 는 한 containing block 은 최근 블록 급 조상 요소 상자 의 내용 경계 로 구성 된다.
3.요소 에 속성 이 있 으 면'position:fixed',containing block 은 시점 에서 만 듭 니 다.
4.요소 에 속성 이 있 으 면'position:absolute',containing block 은 최근 position 가 static 의 조상 이 아 닌 다음 단계 에 따라 만 듭 니 다.
조상 이 블록 급 원소 라면,containing block 은 조상의 padding edge 로 이 루어 진다.
조상 이 내 연 요소 라면 containing block 은 조상의 direction 속성 에 달 려 있다.
direction 이 lr(왼쪽 에서 오른쪽)라면 조상 이 만 든 첫 번 째 상자 의 위,왼쪽 내용 경 계 는 containing block 의 위 와 왼쪽 이 고 조상 들 의 마지막 상자 의 아래,오른쪽 내용 경 계 는 containing block 의 아래 와 오른쪽 이다.
direction 이 rtl(오른쪽 에서 왼쪽)이 라면 조상 이 만 든 첫 번 째 상자 의 위,오른쪽 내용 경 계 는 containing block 의 위 와 오른쪽 이 고 조상 들 의 마지막 상자 의 아래,왼쪽 내용 경 계 는 containing block 의 아래 와 왼쪽 이다.
5.조상 이 없 으 면 루트 요소 상자 의 내용 경 계 는 containing block 으로 확 정 됩 니 다.
명사 해석:
시각:문 서 를 분석 함으로써 연속 미디어(예 를 들 어 화면 은 연속 미디어 이 고 프린터 는 페이지 기반 미디어)는 사용자 에 게 시각(창 이나 화면 에 표 시 된 영역)를 만들어 줍 니 다.
루트 요소:원본 파일 에 있 는 모든 요 소 는 부모 요소 가 있 습 니 다.하나의 예외 만 있 습 니 다.이것 이 바로 루트 요소 입 니 다.
padding edge:아래 그림 참조:
밤 을 들다.
<html>
<head>
<title>Illustration of containing blocks</title>
</head>
<body id="body">
<div id="div1">
<p id="p1">This is text in the first paragraph...</P>
<p id="p2">This is text
<em id="em1"> in the
<strong id="strong1">second
</strong> paragraph.
</em>
</p>
</div>
</body>
</html>
div 1 의 position 를 설정 하면:
#div1 { position: absolute;}3.BFC
BFC(Block Formatting Context 블록 포맷 컨 텍스트):W3CCS 2.1 규범 중의 한 개념 으로 CSS 3 에서 flow root 로 수정 되 었 습 니 다.포맷 은 이 환경 에서 요소 가 이 환경 에서 초기 화 되 어야 한 다 는 것 을 나타 낸다.즉,요소 가 이 환경 에서 어떻게 배치 해 야 하 는 지 등 이다.요소 가 BF 를 만 들 었 다 면 BFC 는 그 내용 을 어떻게 포 지 셔 닝 하 는 지,그리고 다른 요소 와 의 관계 와 상호작용 을 결정 합 니 다.
통속 적 인 이해:우선 BFC 는 하나의 명사 이 고 독립 된 구조 환경 이다.우 리 는 하나의 상자(실제로 볼 수 없고 만 질 수 없 는 것)로 이해 할 수 있다.상자 안의 물품 의 배 치 는 외부의 영향 을 받 지 않 는 다.BFC 로 전환 하 는 이 해 는 BFC 중의 요소 의 구 조 는 외부의 영향 을 받 지 않 는 다 는 것 이다.(우 리 는 흔히 이 특성 을 이용 하여 유동 요소 가 유동 적 이지 않 은 형제 요소 와 그 서브 요소 에 미 치 는 영향 을 없앤다.)또한 하나의 BFC 에서 블록 박스 와 줄 박스(줄 박스 는 한 줄 의 모든 내 연 요소 로 구성)는 부모 요소 의 테 두 리 를 따라 수직 으로 배열 된다.
BFC 를 만 든 요 소 는 다음 과 같은 방식 으로 하위 요 소 를 배열 합 니 다.
4.567917.BFC 에서 상 자 는 꼭대기 에서 부터 수직 으로 하나씩 배열 되 고 두 상자 사이 의 수직 간격 은 그들의 margin 값 에 의 해 결정 된다.한 BFC 에 서 는 인접 한 블록 급 박스 두 개의 수직 바깥쪽 거리 가 접 힌 다.즉,BFC 에서 인접 한 블록 급 원소 의 수직 사 이 드 거 리 는 접 힌 다(collapse)4.567917.BFC 에서 모든 상자 의 왼쪽 바깥쪽 가장자리(margin-left)는 용기 의 왼쪽 가장자리(border-left)(오른쪽 에서 왼쪽 까지 의 형식 에 있어 오른쪽 가장자리 에 닿 음)에 닿 습 니 다.변동 이 있어 도 마찬가지 입 니 다.(하나의 키 요소 의 내용 구역 이 변동 으로 압축 되 지만)이 하위 요소 가 새로운 BFC 를 만 들 지 않 는 한.그 자신 도 움 직 이 는 것 과 같다명사 해석:
여백 접 기:CSS 에서 인접 한 두 상자(형제 관계 일 수도 있 고 조상 관계 일 수도 있 음)의 바깥쪽 거 리 는 하나의 단독 바깥쪽 거리 로 결합 할 수 있다.이러한 바깥쪽 거 리 를 합 치 는 방식 은 접 는 것 이 라 고 불 리 며,이 로 인해 합 성 된 바깥쪽 거 리 를 접 는 바깥쪽 거리 라 고 한다.
접 은 결과:
1.두 개의 인접 한 바깥쪽 거 리 는 모두 양수 일 때 접 은 결 과 는 이들 사이 의 비교적 큰 값 이다.
2.두 개의 인접 한 바깥쪽 거리 가 모두 마이너스 일 때 접 은 결 과 는 이들 의 절대적 인 가치 가 비교적 크다.
3.두 개의 바깥쪽 거리 가 1 플러스 1 마이너스 일 때 접 는 결 과 는 이들 의 합 이다.
접 는 필수 조건:margin 은 인접 해 야 하 며 다음 과 같은 조건 을 만족 시 켜 야 합 니 다.
1.일반적인 문서 흐름(비 float 와 절대 위치)에 있 는 블록 급 상자 이 고 같은 BFC 에 있어 야 합 니 다.
2.카 트 리 지 없 음,공간 없 음(clearance),padding 과 border 없 음
3.모두 수직 방향 에서 서로 인접 한 바깥 거리 에 속 하 므 로 아래 의 임의의 상황 일 수 있다.
1.부동 원소(float:left|right)
2.절대 위치 요소(position:absolute|fixed)
3.줄 내 블록 요소(display:inline-block)
4.표 의 셀(display:table-cells,TD,TH)
5.표 의 제목(display:table-captions,CAPTION)
6.'overflow'특성 은 visible 요소 가 아 닙 니 다.
7.표 요소 가 만 든'익명 상자'
주의해 야 할 것 은'display:table'자체 에'block formating contexts'가 생기 지 않 는 다 는 점 이다.그러나'display:table-cell'을 포함 하 는 상 자 는 블록 포맷 컨 텍스트 를 만 들 수 있 습 니 다.
한 마디 로 하면'display:table'요소 에 대해 블록 포맷 컨 텍스트 를 만 드 는 것 은'display:table'이 아 닌 익명 상자 입 니 다.
마지막 으로 이 요소 들 은 블록 포맷 컨 텍스트 를 만 들 었 습 니 다.그 자체 가 블록 포맷 컨 텍스트 가 아 닙 니 다.
BFC 의 운용:변동 과 다 중 칸 레이아웃 제거.
1.두 칸 레이아웃 에 적응
<style>
body {
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
BFC 의 규칙 에 따라:
모든 상자 의 왼쪽 바깥쪽 가장자리(margin-left)는 용기 의 왼쪽 가장자리(border-left)에 닿 습 니 다.(오른쪽 에서 왼쪽 형식 으로 는 오른쪽 가장자리 에 닿 습 니 다)
따라서 유동 적 인 요소 인 aslide 가 존재 하지만 main 의 왼쪽 은 블록 을 포함 하 는 왼쪽 과 접촉 합 니 다.
그래서 우 리 는 다음 과 같이 근거 할 수 있다.
BFC 구역 은 플로트 박스 와 겹 치지 않 는 다.
메 인 을 터치 하여 BFC 를 생 성하 여 두 칸 레이아웃 에 적응 합 니 다.
.main {
overflow: hidden;
}
2.내부 변동 제거
<head>
<title>Clear float</title>
<style>
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.wrapper{
border:solid 3px #a33;
}
.main{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
</div>
</body>
그러나 결 과 는:
부모 용 기 는 움 직 이 는 서브 요 소 를 둘러싸 지 않 고 내 려 앉 는 것 이 라 고 부 르 는데 이런 현상 을 없 애기 위해 전통 적 인 위 류 방법 을 제외 하고.근거
BFC 의 높이 를 계산 할 때 부동 원소 도 계산 에 참여 한다
또한 부모 용 기 를 BFC 로 만들어 유동 을 제거 하고 코드 를 간단하게 수정 할 수 있 습 니 다.
<div class="wrapper" style="float:left;"> // float , BFC
<div class="main">1</div>
<div class="main">2</div>
<div class="main">3</div>
</div>
요약 하면 BFC 는 페이지 의 격 리 된 독립 용기 로 용기 안의 하위 요 소 는 바깥 요소 에 영향 을 주지 않 는 다.반대로 도 마찬가지다.
BFC 내부 의 원소 와 외부의 원 소 는 절대 서로 영향 을 주지 않 기 때문에,BFC 외부 에 변동 이 존재 할 때,BFC 내부 Box 의 배치 에 영향 을 주어 서 는 안 되 며,BFC 는 변동 과 중첩 되 지 않 고 좁 아 지 는 것 을 통과 한다.마찬가지 로 BFC 내부 에 변동 이 있 을 때 외부 원소 의 배치 에 영향 을 주지 않 기 위해 BFC 가 고 도 를 계산 할 때 변동 의 고 도 를 포함한다.margin 의 중첩 을 피 하 는 것 도 마찬가지다.
이상 은 position 속성 에서 파생 된 css 진급 토론 의 상세 한 내용 입 니 다.position 속성 에서 파생 된 css 진급 토론 에 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
