가장 좁은 770px과 가장 넓은 1024px_CSS/HTML의 클래식 레이아웃 연구-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

가장 좁은 770px과 가장 넓은 1024px_CSS/HTML의 클래식 레이아웃 연구

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:11 PM

가장 일반적이고 실용적인 레이아웃은 중앙에 3개의 열이 있는 상단, 중앙 및 하단입니다. 이 예에는 두 가지 특성이 있습니다.

1. 중간의 3열 효과는 모든 단일 열 배경색을 구현할 수 있습니다.
2. 전체적으로 가장 좁은 것은 770px이고 가장 넓은 것은 1024px입니다. 즉, 창이 770xp보다 작으면 하단 스크롤 막대가 나타납니다. 1024px보다 크면 화면이 자동으로 중앙에 배치됩니다.

효과 찾아보기: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm

분석:

가장 바깥쪽 래퍼에는 모든 콘텐츠가 내부에 중첩되어 있으며 전체가 상대적으로 배치되어 있습니다. max min은 이미 가장 좁은 값과 가장 넓은 값을 매우 잘 제어하지만 IE에는 영향을 미치지 않습니다. 산재된 다른 레이아웃이 없는 경우 이 레이어는 실제로 본문에 작성되어 중첩 레이어 하나를 제거할 수 있습니다.
#wrapper{ 너비:자동; 테두리: 1px 너비: 770px; 텍스트 정렬:왼쪽; 여백-오른쪽:자동; ;}

래퍼 하단 외부 머리글 바닥글

머리글은 절대 위치에 있고 바닥글은 상대적으로 위치합니다. 외부 여백은 왼쪽과 오른쪽 각각 130px입니다. 이는 IE 이외의 호환성의 핵심입니다.
#outer{ margin-left:130px; margin-right:130px; border-left:1px solid #000; 색상: #000;}
# 헤더{ 위치:절대:0; 높이:70px; 테두리-하단:1px 배경:#0ff; :center; 글꼴 크기:xx-대형}
#footer { 너비:100%; line-height:50px; border-top:1px 배경:#ffc; ; 텍스트 정렬:중심; 위치:상대;}

외부 하단 클리어헤더 외부랩 우측 클리어

클리어헤더는 헤더의 틈을 메우는 데 사용됩니다. 클리어헤더는 일반적으로 사용되는 채우기 해킹입니다.
외부랩 너비가 100%가 아닌 99%인 이유는 무엇입니까? 상단 외부 레이어에는 테두리가 있으므로 100% 너비에 2개의 테두리 픽셀을 더하면 확장되고 FF에는 확실한 효과가 있습니다.
right 처리는 매우 고전적입니다. IE에서는 위치 지정으로, FF에서는 부동으로 해결됩니다. 음수 여백 처리에서도 상단 외부에 남겨진 공간만 사용됩니다.
#clearheader{ 높이:72px;}
.outerwrap { float:left; 너비:99%;}
#right {
position:relative;
width:130px; ; 왼쪽:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ 높이:1px ; 오버플로:숨김; 여백:-1px;}

바깥쪽 포장에 더 선명하게 남겨진 중앙 내용은 매우 간단하며, 아이디어는 위의 설명과 유사합니다.