(4) CSS 위치 지정 및 부동

1. CSS의 포지셔닝
페이지의 요소 위치 변경하기
1. CSS 포지셔닝 메커니즘
일반 흐름: 요소는 HTML에서 배치되는 순서에 따라 부동을 결정합니다. 절대 레이아웃:
2. CSS 포지셔닝 속성
등록 정보
묘사
position
원소를 정적, 상대적, 절대적, 또는 고정된 위치에 두다
top
위쪽 요소 오프셋
left
요소의 왼쪽 오프셋
right
요소의 오른쪽으로 오프셋
bottom
요소의 아래쪽 오프셋
overflow
요소가 영역을 넘쳐흐르도록 설정하는 일
clip
요소 표시 형태 설정하기
vertical-align
요소의 수직 정렬 설정
z-index
요소의 쌓인 순서 설정
position
position의 네 가지 속성static: 정적 레이아웃,left와right는 작용하지 않습니다relative: 상대적인 레이아웃,원소 사이의 위치는left와right로 absolute를 조정할 수 있습니다: 절대적인 레이아웃,원소는 페이지에서 더 이상 위치를 차지하지 않습니다.다른 원소는 중첩할 수 있습니다.fixed:원소는 창에 고정되어 있고 다른 원소는 미끄러질 수 있습니다.그런데 이 원소는 원래의 위치에 있습니다.
2. CSS의 부동
1. float 속성
페이지에서 꺼내서 페이지에 띄우는 것과 같습니다. 용기 너비가 원소를 불러올 수 없을 때, 이 원소는 자동으로 다음 줄left에서 왼쪽으로 띄우기 right에서 오른쪽으로 띄우기 none 원소가 띄우지 않기 inherit에서 부모 띄우기 속성을 계승합니다
2.clear 속성
부동 속성 제거 left 제거 왼쪽 부동 right 제거 오른쪽 부동 both 제거 양쪽 부동 inherit 계승 부급의clear 값

<div id="div1">
    <ul>
        <li><img src="1.jpg">li>
        <li><img src="2.jpg">li>
        <li><img src="3.jpg">li>
    ul>
    <ul>
        <li><img src="4.jpg">li>
        <li><img src="5.jpg">li>
        <li><img src="6.jpg">li>
    ul>
    <ul>
        <li><img src="7.jpg">li>
        <li><img src="8.jpg">li>
        <li><img src="9.jpg">li>
    ul>
div>

*{//*    
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;//      
}
#div1{
    width: 950px;
    height: auto;
    margin: 20px auto;//      20px，      
}
ul{
    width: 250px;
    float:left;//    
}

위 CSS 코드는 단순한 폭포 흐름을 형성했습니다.