CSS 레이아웃을 배우기 위한 입문 튜토리얼
- 高洛峰원래의
- 2017-03-17 09:33:371430검색
개요
웹이 등장한 이후 CSS에 대한 소개와 학습 자료가 압도적으로 늘어났습니다.
이 글에서는 구체적인 CSS 구문을 다루지는 않지만, 초보자의 관점에서 CSS를 접해본 적이 없거나 거의 없는 사람들도 CSS가 무엇인지, 어떻게 사용하는지 빠르게 이해할 수 있기를 바랍니다.
CSS란 무엇입니까
개념을 이해할 때 가장 먼저 보이는 것은 이름이며, 종종 무시되는 것도 이름입니다.
CSS(캐스케이딩 스타일 시트)는 중국어 캐스케이딩 스타일 시트로 번역될 수 있습니다. 이름에서 알 수 있듯이
캐스케이딩(Cascading): 스타일이 겹쳐질 수 있으므로 우선순위가 있음을 나타냅니다.
스타일 시트: 나타냅니다. CSS는 설명 스타일이고 프로그래밍 언어가 아닌 그냥 표일 뿐이므로 나중에 CSS를 점점 더 많이 사용하면서 CSS 구문을 확장한 Sass, Less 등의 언어가 나왔습니다
CSS 기능
CSS의 기능은 사실 HTML만으로 웹을 만들 수 있지만, 기계와 브라우저의 성능이 향상될수록 사람들의 요구사항은 점점 더 높아집니다. CSS는 웹페이지의 아름다움과 사용 편의성을 위해 점점 더 중요해졌습니다.
CSS에는 두 가지 주요 기능이 있다고 생각합니다.
프로그래밍 언어나 구성 파일의 변수와 마찬가지로 쉽게 수정하기 위해 웹 스타일을 균일하게 관리할 수 있습니다.
웹페이지 콘텐츠와 스타일을 분리하여 유연하게 콘텐츠 표현 가능
HTML은 웹페이지의 실제 콘텐츠인 CSS라는 점에 유의하세요. HTML 요소 가 표시되는 방식과 표시 여부를 제어하세요.
CSS 레이아웃
레이아웃에서 CSS를 가장 많이 사용하는 이유는 과거에는 소위 p+css 레이아웃 방식이 있기 때문입니다. , HTML을 사용했으며 모두 테이블 레이아웃입니다.
p+css 레이아웃에 대한 사전 이해를 위해서는 프레임 모델, 포지셔닝, 플로팅 3가지 포인트를 이해하면 충분하다고 생각합니다.
박스 모델
각 p는 CSS용 상자입니다. 각 박스는 안쪽부터 바깥쪽까지 4부분으로 구성되어 있습니다. 내용 여백테두리p 길이와 프레임은 합으로 구성됩니다. 이 4개 부분의 너비
예:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p>Content</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
}예는 매우 간단하지만 볼 수 있습니다.
- 외부에서 내부로 margin, border, padding, content
- p의 너비와 높이는 내용의 크기와 같습니다
위치결정은
절대위치와 상대위치로 구분됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="p1">Content1</p>
<p id="p2">Content2</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
position: absolute;
}
#p1 {
top: 100px;
left: 100px;
}
#p2 {
top: 200px;
left: 200px;
} 절대 위치 지정은 명확하지만 유연성이 없습니다. 화면 크기를 고정할 수 없으면 여러 CSS 세트가 필요합니다. 설정이 잘못되면 요소가 겹칠 수 있습니다. 절대 위치 지정에서 가장 중요한 설정은 위치: 절대
위와 동일한 예에서 position:absolute를 position:relative로 바꾸면 두 p가 더 이상 겹치지 않는 것을 확인할 수 있습니다.
레이아웃할 때 여러 개의 p를 일렬로 배열하려면 플로팅(또는 기존 테이블 방식 사용)을 사용하면 됩니다.
p의 플로팅 속성을 설정한 후 p를 사용하여 다양한 레이아웃을 할 수 있습니다. 구조.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="head">head</p>
<p id="middle">
<p id="nav">nav</p>
<p id="content">content</p>
</p>
<p id="foot">foot</p>
</body>
</html>
body {
background-color: #FAEBD7;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
border: 1px solid black;
text-align: center;
}
#head {
height: 50px;
width: 100%;
}
#middle {
width: 100%;
top: 50px;
bottom: 100px;
left: 0px;
position: absolute;
}
#nav {
float: left;
width: 200px;
height: 100%;
}
#content {
height: 100%;
overflow: hidden;
}
#foot {
height: 100px;
width: 100%;
bottom: 0px;
left: 0px;
position: absolute;
}위의 예에서는 머리와 발의 높이가 고정되어 있고 탐색 너비가 고정되어 있습니다. . 다른 것들은 적응적이며 브라우저 창의 크기를 조정하여 효과를 볼 수 있습니다.
요약
CSS 레이아웃은 매우 간단합니다. 다른 대화형 작업이 있는 경우 js를 통해 구현할 수 있습니다(예: 탐색 및 콘텐츠 연결).
요즘에는 테이블 레이아웃 방식을 사용하는 사람이 거의 없습니다. 테이블은 데이터를 표시하는 방법일 뿐이고 행 및 셀 방식은 컴포넌트화에 적합하지 않기 때문입니다.
위 내용은 CSS 레이아웃을 배우기 위한 입문 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!