css 요소 포지셔닝 및 레이아웃

1. 포지셔닝 모델과 포지셔닝은 밀접하여 분리할 수 없다. 마치 가구를 샀는데 가구를 놓을 곳을 찾아야 하는 것과 같다. 그렇지 않으면 놓을 곳이 없고 남의 집에 두는 것은 무의미하다.
포지셔닝의 등록 정보는 다음과 같습니다.

position 정의 요소가 페이지에 위치하는 방식

left 지정 요소와 가장 가까운 위치 설정이 있는 부모 대상의 왼쪽 거리

right 지정 요소와 가장 가까운 위치 설정이 있는 부모 대상의 오른쪽 거리

top 지정 요소와 가장 가까운 위치 설정이 있는 부모 대상의 상단 거리

bottom 지정 요소와 가장 가까운 포지셔닝 설정이 있는 부모 대상 아래의 거리

z-index는 요소의 겹치는 순서를 설정하고position 속성이relative 또는absolute일 때만 유효

width 설정 요소의 상자의 폭

height 설정 요소의 상자 높이

overflow 내용 넘침 제어

clip 클립

처음 6개는 포지셔닝, 다음 4개는 청크를 설정하거나 내용을 제어합니다.
다음은 주로position의 속성 absolute,relative(상대적),static(정적),fixed(고정적)
다음은 absolute의 예입니다. top와left의 역할은 간단합니다.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
    </style>
</head>
<body>
<div id="box">      100     200
</div>
</body>
</html>

다음은relative의 예입니다. 주로 상급 모델 블록 콘텐츠의 위치에 비해

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
        #content1{ position:relative;top:100px;left:200px; background-color:Blue;}
    </style>
</head>
<body>
<div id="box">      100     200
<p id="content1">relative  </p>
</div>
</body>
</html>

다음은fixed의 예입니다. 주로 브라우저 창의 위치에서 부상 광고를 제작할 수 있습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cssTest</title>
    <style type="text/css">
        #box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
        #content1{ position:relative;top:100px;left:200px; background-color:Blue;}
        #content2{ position:fixed;top:100px;left:200px; background-color:Blue;}
    </style>
</head>
<body>
<div id="box">      100     200
<p id="content1">relative  </p>
</div>
<p id="content2">fixed         </p>
</body>
</html>

기타 몇 가지 속성은 잠시 말하지 않겠습니다. 시간이 있으면 보충해 주세요...배치
배치와 배치는 모형 블록을 한 곳에 배치하는 것과 약간 유사하다
레이아웃의 작업은 주로 블록의 표시 위치를 어떻게 배정하고 배열하며 바꾸며 이웃 분쟁(두 개의 이웃 블록의 간격을 설정) 레이아웃의 주요 속성은 다음과 같다.

clear 지정 요소는 부동 대상이 있는 사이드 값을 none left right both

로 허용하지 않습니다

float에서 지정한 원소의 부동 여부와 부동 방법은 none left right

이다.

clip은 요소의 시각적 영역을 지정하고 영역 밖의 부분은 숨김

오버플로우가 지정한 요소의 내용이 지정한 너비와 높이를 초과할 때의 처리 방식은 기본적으로visible(숨김)

오버플로우-x 너비 초과

오버플로우-y 높이 초과

display 지정 요소 표시 방법

visibility 표시 여부 지정

속성을 보면 많은 것을 필요로 하는 것 같다. 여기는float와clare의 용법이고float는 주로 어디로 흐르는clear는 주로 어느 방향으로 흐르지 않게 한다.

<head>
    <title>cssTest</title>
    <style type="text/css">
          .news {
          background-color: gray;
          border: solid 1px black;
          }
        .news img { float: left;  }
        .news p { float: right; }
        .clear { clear:right; }
    </style>
</head>
<body>
<div class="news">
<img src="news-pic.jpg" /><div class="clear">candnndnnd</div>
<p>some text</p>
</div>
</body>
</html>

위의clear 속성을 both left right로 바꾸어 효과를 보십시오
다른 건 시간 나면 채워요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?

장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css 요소 포지셔닝 및 레이아웃

좋은 웹페이지 즐겨찾기