Tag 8: Einführung in das CSS-Layout_Basic-Tutorial

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。

1.定义DIV

分析一个典型的定义div例子：

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

说明如下：

• 层的名称为sample，在页面中用
  就可以调用这个样式。
• MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
• PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
• BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
• BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
• COLOR用于定义字体颜色，上一节已经介绍过。
• TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
• LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
• WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。

下面是这个层的实际表现:

这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，

这里是演示内容，这里是演示内容，

这里是演示内容，这里是演示内容，

这里是演示内容...

테두리가 2px 회색이고, 오른쪽 하단에 배경 이미지가 반복되지 않고, 콘텐츠가 왼쪽 테두리에서 20px 떨어져 있고, 콘텐츠가 모두 예상한 대로 중앙에 배치되어 있음을 알 수 있습니다. 호호, 보기에는 좋지 않지만 가장 기본이군요. 마스터하면 CSS 레이아웃 기술의 절반을 배운 것입니다. 그게 다야, 전혀 어렵지 않아! (나머지 반은 무엇인가요? 나머지 반은 레이어 간 위치 지정입니다. 차차 설명하겠습니다.)

2.CSS2 박스 모델

1996년 CSS1이 출시된 이후 W3C 조직은 웹 페이지의 모든 개체를 상자에 배치할 것을 권장했습니다. 디자이너는 정의를 생성하여 이 상자의 속성을 제어할 수 있습니다. 이미지 및 레이어

. 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 위에서 설명한 샘플 레이어는 일반적인 상자입니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다.

3. 모든 보조 이미지는 배경으로 처리되어야 합니다

XHTML+CSS 레이아웃을 사용하면 처음에는 익숙하지 않은 기술이 있는데, 기존의 테이블 레이아웃과는 다른 사고방식이라고 해야 할까요. 즉 모든 보조 이미지가 구현된다는 것입니다. 배경이 있습니다. 다음과 같습니다:

배경: url(images/bg_poem.jpg) #FEFEFE 반복 없음 오른쪽 하단;

를 콘텐츠에 직접 삽입할 수는 있지만 권장되지 않습니다. 여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 예를 들어 사진 앨범의 사진, 사진 뉴스의 사진, 위의 3D 상자 모델 사진은 모두 요소를 사용하여 페이지에 직접 삽입할 수 있으며, 나머지는 로고와 유사합니다. 제목 그림 및 목록 접두어는 배경 또는 기타 CSS 방법을 사용하여 표시되어야 합니다.

이에는 두 가지 이유가 있습니다.

• 성능과 구조를 완전히 분리하고(다른 기사 참조: "성능과 구조의 분리 이해" 참조) CSS를 사용하여 모든 모양과 성능을 제어하고 수정을 용이하게 합니다.
• 페이지를 더욱 유용하고 친근하게 만들어 보세요. 예를 들어, 시각 장애인이 스크린 리더를 사용하는 경우 배경 기술을 사용하여 구현된 사진은 소리내어 읽혀지지 않습니다.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn