2014년도 신성css강좌 여름판 6절

이 절에서 우리는 포석에 대해 이야기해야 한다. 사실 포석 자체는 매우 간단하지만 합리적으로 포석을 짜려면 그리 간단하지 않다. 우리가 글을 쓰는 것처럼 한 편의 글을 쓰는 것은 매우 간단하지만 명작을 한 편 쓰는 것은 매우 어렵다. 이것은 우리의 탄탄한 기초와 문학에 대한 이해가 필요하다. 그러나 천 리 길도 한 걸음부터 시작한다. 우리 시작하자.
*************표시 모드 ***********
1. 때때로 우리는 원소의 표시 방식을 설정할 수 있다. 예를 들어 우리가 내비게이션을 할 때 디스플레이: inline을 사용하여 원소를 내연적인 스타일로 만든다.
2. 다음은 이 디스플레이를 제외하고visibility 속성에 대해 말씀드리자면,hidden으로 설정할 수 있습니다. 즉, 표시하지 않으면 이 블록의 영역은 공백으로 표시됩니다.디스플레이: none을 사용하는 비슷한 방법이 있습니다. 디스플레이를 설정하지 않지만, 그 역할은 이 요소를 사라지게 하고, 뒤에 있는 요소는 자동으로 공간을 차지합니다.
3. 우리는 디스플레이:block을 사용하여 디스플레이를 하나의 블록급 요소로 만들 수 있다. 이것은 강제적인 줄 바꾸기로 이해할 수 있지만 디스플레이:inline은 강제적으로 줄을 바꾸지 않고 오른쪽으로 배열한다.
4. 요소의 디스플레이 유형을 변경하고 이 요소가 어떻게 표시되는지, 어떤 요소인지 확인한다. 예를 들어 내부 연결 요소가 디스플레이: Block으로 설정된 경우 내부 블록 요소가 있는 것을 허용하지 않는다.

************* 크기 ***************
1. HTML 요소에 대해width 속성과height 속성을 설정하여 크기, 즉 너비와 높이를 설정할 수 있습니다.
2. 다른 설정 크기의 속성도 있는데 자주 사용하지 않는 것 같아서 열거하지 않았다.
*********** 포지셔닝 *****************
1. 첫 번째 포지셔닝 방식은 기본적인 방식이다. 위에서 아래로 왼쪽에서 오른쪽으로 이동하는 모델이자 가장 간단한 모델이다.
2. 두 번째는 고정된 위치입니다. 위치는 브라우저의 창 위치와 상대적으로 고정되어 있고 창이 굴러도 움직이지 않습니다. 이런 위치는 광고줄과 같은 용도로 사용할 수 있습니다. 다음은 HTML 파일에서 쓴 코드가 다음과 같습니다.

<html>

<head>

    <title>2014   CSS     </title>

    <link rel="stylesheet" type="text/css" href="my.css">

</head>

<body>

    <p>     ，    </p>

</body>

</html>

그리고 my.css 파일, 스크롤 바가 굴러갈 때 이 단락의 위치가 변하지 않는 특성을 보기 위해 브라우저 창의 크기를 지정해야 합니다.

body{width:400px;

height: 900px;}

p{position: fixed;

top:30px;

left: 50px;}

3. 위의 방식은 브라우저의 호환성에 좋지 않습니다. IE8 아래에 설명이 필요합니다!DOCTYPE만 가능합니다. 여기 top는 위쪽에서 브라우저의 위쪽까지의 거리를 가리키고,left는 오른쪽에서 브라우저의 오른쪽까지의 거리를 가리킵니다.
4. 상대적 포지셔닝: 여기서 상대적'누구'에 대한 포지셔닝을 명확히 해야 한다. 여기서 상대적 포지셔닝은 첫 번째 방식에 대한 포지셔닝, 즉 기본 방식에 대한 포지셔닝이다. 기본 방식을 바탕으로 일부 수정을 하고left 등 속성을 설정할 수 있다. 만약left를 -20px로 설정하면 원시 위치에 비해 20개의 픽셀을 왼쪽으로 이동한다는 뜻이다.그것도postion 속성에relative를 부여해야 합니다.
5. 절대 포지셔닝:position을 absolute로 지정하고left와 top 또는right 등의 속성을 설정해야 합니다. 이 요소에 부모 요소가 없으면 전체 브라우저 창에 비해 위치가 달라집니다.
****************소결******************
1. 이 소절은 디스플레이 방식과 포지셔닝 방식을 설명하여 뒤의 배치에 일정한 기초를 다졌다.
2. 다음 소절에서 포석 방면의 문제를 설명할 것이다.

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

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

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

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

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

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

2014년도 신성css강좌 여름판 6절

좋은 웹페이지 즐겨찾기