꼭 봐야 할 CSS 레이아웃 팁 공유

다음 편집기는 꼭 읽어야 할 CSS 레이아웃 팁을 제공합니다. 편집자님이 꽤 좋다고 하셔서 지금 공유하고 참고용으로 드리고 싶습니다. 에디터를 따라가서 살펴보자.

1.max-width:

페이지의 좌우 폭이 줄어들었을 때 , 왼쪽 및 오른쪽 스크롤을 피하기 위해 경험이 좋지 않은 경우 max-width를 사용할 수 있습니다! 페이지가 너비보다 작으면 자동으로 축소됩니다~

max-width : 500px;   
margin: 0 auto;   
}

2.box-sizing:

요소에 box-sizing:border-box를 설정하고, 너비를 결정한 후 padding과 border를 설정하면 너비가 변경되지 않습니다. 브라우저 호환성 문제를 해결하기 위해 다음과 같이 전역 설정을 지정할 수 있습니다:

-webkit-box-sizing : border-box;   
-moz-box-sizing:border-box;   
box-sizing:border-box;   
 }

3.overflow:auto

테두리는 콘텐츠의 크기에 맞게 조정되며 넘치지 않습니다.

IE 호환 솔루션:

.example{ Overflow:auto; Zoom:1; }

4.

미디어 쿼리를 사용한 후 다양한 페이지 너비에 따라 다양한 레이아웃을 설정할 수 있습니다. 방법은 다음과 같습니다.

//页面宽度大于600px时，nav模块浮动于左侧   
@media screen and (min-width: 600px) {   
nav {   
    float: left;   
    width: 25%;   
}   
section {   
    margin-left: 25%;   
}   
}   
//页面宽度小于599时，nav模块打横，在上方   
@media screen and (max-width: 599px) {   
nav li {   
    display: inline;   
}   
}

5. 텍스트 다중 열 레이아웃:

.three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }

위 내용은 꼭 봐야 할 CSS 레이아웃 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!