>웹 프론트엔드 >CSS 튜토리얼 >CSS 활용 스킬 요약

CSS 활용 스킬 요약

巴扎黑
巴扎黑원래의
2017-08-14 15:05:381447검색

세로 중앙 정렬에 line-height 사용

line-height:24px;
고정 너비 컨테이너를 사용하고 행을 세로 중앙에 배치해야 하는 경우 line-height를 사용합니다(높이는 상위 레이어 컨테이너와 동일합니다). 더 많은 수직 중심 요약을 볼 수 있습니다. 여기를 보세요.

투명 컨테이너가 떠다닙니다.

#main { 
overflow:hidden; 
}

이 문제에 대해서도 이전에 언급한 바 있습니다. 자세한 내용은 여기에서 확인하세요.

링크 줄 바꿈을 허용하지 마세요

a { 
white-space:nowrap; 
}

위 설정을 사용하면 링크 줄 바꿈을 피할 수 있지만, 저는 개인적으로 긴 링크에 해당 줄이 있는 것을 권장합니다(줄 바꿈에 대한 논의는 원 중앙의 기록을 참조하세요).

Firefox에서 항상 스크롤 막대를 표시하도록 합니다.

html { 
overflow:-moz-scrollbars-vertical; 
}

Mozilla/Firefox 비공개 CSS 속성에 대한 자세한 내용은 여기를 참조하세요. 브라우저 간 지원을 위해

body, html { 
min-height:101%; 
}

를 사용하여 블록 요소를 수평으로 가운데에 배치할 수도 있습니다.

margin:0 auto; 실제로는

margin-left: auto; 이 기술은 기본적으로 모든 CSS 교과서에서 설명하므로 너비를 추가하는 것을 잊지 마십시오. Explorer에서


body{ 
text-align: center; 
}

를 사용한 다음 내부 컨테이너

text-align: left

restore를 정의할 수도 있습니다.

Exploer 텍스트 영역의 스크롤 막대 숨기기


textarea { 
overflow:auto; 
}

Exploer 텍스트 영역에는 기본적으로 세로 스크롤 막대가 있습니다(이유는 묻지 마세요).

인쇄 페이징 설정



h2 { 
page-break-before:always; 
}

page-break-before 속성은 웹 페이지를 인쇄할 때 페이징을 설정할 수 있습니다.

링크의 점선 프레임 제거



a:active, a:focus { 
outline:none; 
}

Firefox는 링크에 포커스가 있을 때(또는 클릭할 때) 기본적으로 점선 프레임을 추가합니다. 점선 프레임은 위 속성을 사용하여 삭제할 수 있습니다.

가장 간단한 CSS 재설정



* { 
margin: 0; padding: 0 
}

위 내용은 CSS 활용 스킬 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.