CSS 박스 모드를 철저하게 이해하는 것이 좋습니다(DIV 레이아웃 빠른 소개)_체험교류

머리말
표를 사용하지 않고 웹페이지 레이아웃을 해보고 싶은데, 흔히 p를 사용하여 웹페이지 구조를 레이아웃한다는 이야기를 자주 듣는 CSS를 사용하거나, 웹페이지 표준 디자인을 배우고 싶다면, 또는 상사가 회사의 경쟁력을 높이기 위해 전통적인 테이블 레이아웃 방법을 변경하기를 원할 경우 반드시 알아야 할 지식 포인트 중 하나는 CSS 상자 모드입니다. 이것이 p 레이아웃의 핵심인 전통적인 테이블 레이아웃입니다. 웹 페이지 콘텐츠의 위치와 레이아웃을 위한 다양한 크기 및 테이블 중첩 CSS 레이아웃으로 전환한 후 웹 페이지는 CSS에서 정의한 다양한 크기의 상자 및 상자 중첩을 통해 정렬됩니다. 이렇게 입력한 웹 페이지의 코드는 간단하고, 업데이트가 쉽고, PDA 장치 등 더 많은 브라우저와 호환될 수 있기 때문에 정상적으로 탐색할 수도 있으므로 좋아했던 표 조판을 포기할 가치가 있습니다. 더 중요한 것은 웹 페이지의 CSS 조판입니다. 여기서는 관련 정보를 직접 찾지 않겠습니다.
CSS 박스 모델 이해
CSS 박스 모델이란 무엇인가요? 왜 상자라고 부르나요? 먼저 웹 디자인에서 자주 듣는 속성 이름인 콘텐츠, 패딩, 테두리 및 여백에 대해 이야기해 보겠습니다.

우리가 일상에서 접하는 상자(박스)에도 이러한 속성이 담겨있다고 하여 박스 패턴이라 부릅니다. 내용물은 상자에 들어 있는 것입니다. 내용물(귀중품)이 손상되는 것을 방지하기 위해 충전재는 상자 자체입니다. 통풍과 쉽게 제거할 수 있도록 일정한 간격을 두고 함께 쌓아서 배치할 수 없습니다. 웹 디자인에서 콘텐츠는 텍스트, 그림 등의 요소를 참조하는 경우가 많지만, 실제 상자와 달리 작은 상자(p-중첩)일 수도 있습니다. 일반적으로 실제 사물은 상자보다 클 수 없습니다. 늘어나서 부러지고 CSS 상자는 탄력적입니다. 내부의 물건은 상자 자체보다 크고 최대로 늘어나지만 손상되지는 않습니다. 충전재에는 폭 속성만 있는데, 이는 생활 속 상자에 들어가는 방진 보조자재의 두께로 이해될 수 있으며, 테두리에는 생활에서 보는 상자의 두께로 이해될 수 있는 크기와 색상이 있습니다. 그리고 상자가 어떤 색의 재료로 만들어졌는지 경계는 상자와 다른 것들 사이의 거리입니다. 실제 생활에서 우리가 정사각형 안에 있고 다양한 크기와 색상의 상자를 일정한 간격과 일정한 순서로 배치한다고 가정해 보겠습니다. 마지막으로 정사각형에서 내려다보면 우리가 원하는 것과 유사한 그래픽과 구조를 볼 수 있습니다. . 웹 페이지 레이아웃은 아래와 같이 디자인되었습니다.

'상자'로 구성된 웹페이지 레이아웃

생각 바꾸기

전통적인 프런트 엔드 웹 디자인은 다음과 같이 수행됩니다. 요구 사항에 따라 먼저 기본 색상, 사용할 사진 유형, 글꼴, 색상을 고려합니다. 그런 다음 Photoshop과 같은 소프트웨어를 사용하여 자유롭게 그리고 마지막으로 작은 그림으로 자르고 더 이상 자유롭게 HTML을 디자인하여 페이지를 생성하지 않습니다. 레이아웃을 CSS로 전환한 후에는 이 아이디어를 변경해야 합니다. 주요 고려 사항은 페이지의 내용입니다. 강력한 CSS 제어 기능을 갖춘 웹 페이지이므로 웹 페이지가 완성된 후 원하는 웹 페이지 스타일을 쉽게 조정할 수 있습니다. 또한 CSS 레이아웃의 또 다른 목적은 다음과 같습니다. 코드를 읽기 쉽게 만들고, 블록을 지우고, 코드를 재사용할 수 있도록 강화하므로 구조가 중요합니다. 내 웹페이지 디자인이 매우 복잡하다고 말하고 싶다면 나중에 그 효과를 얻을 수 있을까요? 제가 말씀드리고 싶은 것은 CSS로 효과를 얻을 수 없다면 일반적으로 테이블로는 효과를 얻기가 어렵다는 것입니다. 왜냐하면 CSS의 제어 능력이 너무 강력하기 때문입니다. 그런데 CSS를 사용하면 매우 실용적인 이점이 있습니다. 조판을 위해 웹 사이트 구축을 위해 주문을 받는 경우 CSS를 사용하여 웹 페이지 레이아웃을 지정하는 경우 나중에 고객이 불만족스러운 경우, 특히 색상 톤을 변경하는 것이 매우 쉬울 것이며 사용자 정의도 가능합니다. 다양한 스타일의 CSS 파일. 고객이 동적 호출을 구현하는 프로그램을 선택하거나 작성하여 웹사이트에서 스타일을 동적으로 변경하는 기능을 갖습니다. 구조와 표현의 분리 실현 실제로 레이아웃 실습을 시작하기 전에 구조와 표현의 분리도 CSS 레이아웃의 특성을 활용한다는 점을 알아두겠습니다. , 코드가 간결해질 것입니다. 업데이트하는 것이 편리합니다. 이것이 CSS를 배우는 목적이 아닙니까? 예를 들어 P는 구조화된 태그입니다. P 태그가 있으면 단락 블록이라는 의미입니다. 여백은 단락을 2자씩 들여쓰도록 만들고 싶습니다. 공백을 추가하지 않고도 이제 P 태그에 CSS 스타일을 지정할 수 있습니다: P {text-indent: 2em;}. 결과 본문 내용은 추가 성능 제어 태그 없이 다음과 같습니다.
그래도 수정하고 싶다면 글꼴, 글꼴 크기, 배경, 줄 간격 등으로 단락을 수정하려면 해당 CSS를 P 스타일에 직접 추가하면 됩니다.

단락 내용

다음 내용이 혼합되어 있습니다. 구조와 표현이 통일된 구조를 가지고 있는 문단이 많다면 성능적인 면에서 이런 식으로 코드를 작성하는 것은 번거로울 것입니다.
구조와 성능의 분리에 대한 이해를 심화하기 위해 코드를 직접 나열해 보겠습니다.

조판에 CSS 사용

#photoList img{

높이:80;
너비:100;
여백:5px auto; >

>


;/p>

CSS 레이아웃 없음

첫 번째 방법은 콘텐츠 부분의 코드가 단순해야 한다는 것입니다. 이미지 목록이 더 많으면 첫 번째 CSS 레이아웃 방법이 더 많은 장점을 가지게 됩니다. 이해하시죠: I BODY에서 한 사람을 소개하고 싶습니다. 그 사람이 어떤 사람인지, 키가 얼마나 큰지, 남자인지 아닌지만 말씀드리겠습니다. 여자라면 CSS에서 확인해 보면 알 수 있습니다. 이렇게 하면 BODY에서의 작업이 단순해지며, 이는 BODY의 코드도 단순해진다는 의미입니다. BODY에 팀원이 있으면 CSS에 항목을 기록하면 됩니다. 이는 Flash 소프트웨어의 구성 요소 및 인스턴스 개념과 약간 비슷합니다. 서로 다른 인스턴스가 동일한 구성 요소를 공유하므로 애니메이션 파일이 크지 않을 것입니다. 아이디어를 CSS 웹 디자인으로 옮기는 것입니다. 즉, 코드가 복잡하지 않고 웹 페이지 파일이 작아서 클라이언트가 더 빨리 다운로드할 수 있다는 것입니다.

CSS 레이아웃을 사용하여 웹페이지 파일 크기 줄이기

위에서 만든 레이아웃처럼 4개의 블록으로 나누어지고, 각 블록의 프레임은 네, 이 프레임워크는 CSS로 작성되었습니다. 스타일이 작성되면 셀 수 없이 호출할 수 있습니다(ID가 아닌 클래스로 호출). 텍스트 내용이 변경되는 한 통일된 스타일을 가진 많은 섹션이 생성될 수 있습니다. 스타일 및 구조 코드는 다음과 같습니다(웹페이지를 직접 복사하여 생성하지 말고 웹페이지가 있어야 할 위치에 다음 코드를 붙여넣으세요).

mainBox"> ;

CSS 상자 모드

텍스트 콘텐츠

생각 바꾸기

텍스트 콘텐츠

단계 숙지

텍스트 내용

작업 흐름
실제로 작업을 시작하기 전에 다음과 같은 아이디어를 마음 속에 형성해야 합니다. 테이블이 무엇인지 모르고 글꼴과 같은 성능 제어 태그에 표시되도록 할 수 없습니다. , color, height, width, align 및 기타 태그는 사용할 수 없습니다. 다시 말하지만, (간단히 말하면, 작업하기 전에 세뇌하고, 기존 관행을 잊어버리고, 새로운 방법을 수용하고 사용하는 것입니다.) 저는 단순히 p를 사용하여 조판의 중첩을 구현하지 않습니다. 블록 수준 요소, 그리고 P도 블록 수준 요소의 경우, 예를 들어 텍스트 내용의 여러 블록을 분리하려는 경우 p 조판이라고 부르기 위해 p를 사용할 필요는 없습니다. "

텍스트 블록 1

텍스트 블록 대신 텍스트 블록 1

텍스트 블록 2

텍스트 블록 3

" 2

텍스트 블록 3"이 더 적합합니다.
p+CSS를 사용하는 디자인 아이디어는 다음과 같습니다. 1. p를 사용하여 의미 구조를 정의합니다. 2. 그런 다음 CSS를 사용하여 배경, 줄 테두리, 정렬 속성 등을 추가하는 등 웹 페이지를 아름답게 만듭니다. .; 3. 마지막으로 이 CSS에서 상자에 텍스트, 그림 등과 같은 콘텐츠를 추가합니다. (속성을 표시하는 레이블이 없습니다.) 이 단계에 대한 이해를 돕기 위해 예를 들어보겠습니다. 먼저 결과 사진을 보세요:


데모 주소: http://www.php.cn/


CSS 레이아웃 결과 사진

p를 사용하여 의미 구조 정의
이제 보여드리고 싶은 것은 일반적인 레이아웃 열 구조, 즉 페이지 헤더, 탐색 모음, 콘텐츠, 저작권(아래 그림 참조),

일반적인 레이아웃 열 구조

구조 코드는 다음과 같습니다.

코드 복사코드는 다음과 같습니다. 다음과 같습니다:

p>

🎜>
페이지 중앙에 가장 바깥쪽의 큰 상자(작은 상자가 포함된 큰 상자)를 지정하고 너비를 760픽셀로 다시 정의한 다음 테두리를 추가해야 합니다.

코드 복사

코드는 다음과 같습니다.

body {

font-family: Arial, Helvetica, sans-serif
font- 크기: 12px;
여백: 0px 자동;
높이: 자동;
너비: 760px;
테두리: 1px 솔리드 #006633;


단순화를 위해 여기에서는 블록 전체에 배경 이미지를 적용하고 하단 테두리에 일정한 간격을 디자인하면 헤더 이미지가 아래에 만들어지는 탐색 표시줄과 연결되는 것을 방지할 수 있습니다. 이것도 아름다움을 위해서이다. 스타일 코드는 다음과 같습니다:

#header {
height: 100px;

width: 760px

background-image: url(headPic.gif); Repeat: no-repeat;
margin:0px 0px 3px 0px;
}


마우스를 위로 올리면 버튼 배경색과 글꼴이 변경됩니다. color.color를 사용하면 이러한 작은 버튼을 작은 상자로 이해할 수 있으므로 이는 상자 중첩 문제입니다.

#nav {

height: 25px; >너비: 760px;
글꼴 크기: 14px;

목록 스타일 유형: 없음

}
#nav li {
float:left; #nav li a{
색상:#000000;
padding-top:4px;
너비:97px; 22px;
텍스트 정렬:센터;
배경 색상:
여백-왼쪽: 2px
}
#nav li a:hover{
배경 색상 :#006633;
color:#FFFFFF; 레이블과 단락은 첫 번째 줄에서 2단어씩 자동으로 들여쓰기되어야 하며 동시에 모든 내용은 외부 큰 상자의 테두리에서 일정 거리에 표시되어야 합니다. .여기에서는 채우기가 사용됩니다. 콘텐츠 블록 스타일 코드는 다음과 같습니다.


#content {
height:auto;
width: 740px
line-height: 1.5em>padding: 10px;
}
#content p {
텍스트 들여쓰기:
}
#content h3 {
글꼴 크기:

여백: 10px;

저작권 열의 경우 페이지 헤더와 일치하도록 배경을 추가하세요. 내용이 여러 줄일 경우 줄 간격이 적절해야 합니다. 여기서는 링크 스타일을 별도로 지정할 수도 있는데 여기서는 이에 대해 논의하지 않겠습니다. 스타일 코드는 다음과 같습니다:

#footer {
height: 50px;
width: 740px;
line-height:
text-align: center ;
배경색: #009966;
여백: 10px;* {
여백: 0px;
}


와일드카드를 사용하여 각 레이블의 테두리와 패딩을 초기화하는 것입니다(일부 레이블에는 Form 태그와 같은 특정 경계가 있는 경우). 그런 다음 각 태그에 이러한 컨트롤을 추가할 필요가 없습니다. 어느 정도 코드를 작성합니다. 최종 완성된 스타일 코드는 다음과 같습니다.

 

结构代码是这样的：

 

 

 

• 首 页
 

• 文 章
 

• 상册
 

• 블로그
 

• 论 坛
 

• 帮助
 

 

 

前言

 

第一段内容

 

리리解CSS盒子模式

 

第二段内容

 
 

 

关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管리 | 会员登录 | 购物车

Copyright ©2006 - 2008 Tang Guohui. 모든 권리 보유

 
 
 

　　好了,此文到此结束，更多内容，如：CSS中的盒子宽島计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^