CSS 스타일을 지정하는 영리한 방법 요약-CSS 튜토리얼-php.cn

CSS 스타일을 지정하는 영리한 방법 요약

高洛峰

풀어 주다： 2017-03-07 14:29:30

원래의

1291명이 탐색했습니다.

이전에 접했던 몇 가지 특별한 스타일의 구현과 관련하여 오늘은 두 가지 목적으로 요약하겠습니다. 첫째, 나중에 필요할 때 찾아 사용할 수 있도록 이러한 방법을 기록합니다. 두 번째는 이 위대한 신들의 지혜의 결정체를 추진하여 대다수의 프런트 엔드 프로그래머가 우회를 피할 수 있도록 하는 것입니다. 이번 포스팅은 업데이트 내용입니다. 앞으로 좋은 CSS 스타일 스킬이 있으면 수시로 업데이트하겠습니다.

1. 요소를 가로, 세로 중앙에 배치하세요. (특별 감사합니다: Xin Life. Xin 형제가 생산하는 제품은 품질이 좋을 것 같아요! 존경합니다)

블록 요소의 수평 및 수직 센터링의 경우 수평 센터링 방법에 대해 많이 말할 필요가 없습니다. 일반적으로 이를 달성하기 위해 margin:auto; 수직 센터링의 경우,vertical-align:middle 속성이 있지만 이는 테이블 태그에만 적용되며 테이블 태그의 효과를 제어하기 어렵다는 것은 누구나 알고 있습니다. . . 따라서 우리가 일반적으로 사용하는 방법은 자식 요소의 inline-block 속성을 설정하고 line-height 속성의 값을 부모 요소와 동일한 높이로 설정하는 것입니다. 여기서는 "Xin Life"에서 파생된 방법을 홍보하고 싶습니다

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D %E5 %AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85% E4% B8%AD/

코드는 다음과 같습니다:

html:

<body>
　　　　<p class="big">
　　　　　　<p class="small"></p>
　　　　　</p>
　　</body>

로그인 후 복사

CSS:

.big{   
　　　　width:500px;   
　　　　height:500px;   
　　　　border:1px solid red;   
　　　　position:relative;   
　　　　}   
　　.small{   
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;   
　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
　　　　margin:auto;   

}

로그인 후 복사

위 코드에서는 하위 요소의 너비와 높이가 임의로 설정됩니다. 이 요소는 상위 요소의 중앙에 가로 및 세로로 표시될 수 있습니다. 상위 요소에서는 위치의 상대 속성을 사용합니다. 하위 요소에서는 위치 속성을 절대값으로 설정한 후 네 방향 모두의 값을 0px로 설정합니다. 그리고 그의 마진 가치를 적응적으로 만드십시오. 요소를 검사해 보면 이 설정 후에 하위 요소의 여백 영역이 전체 상위 요소를 채우고 왼쪽 및 오른쪽 여백 값이 동일하며 위쪽 및 아래쪽 여백 값도 동일하다는 것을 알 수 있습니다. 하지만 이는 코드 값이 충돌할 때 위쪽과 왼쪽 값을 먼저 파싱한다는 규칙을 따르지 않습니다. Xiaoge는 원리가 무엇인지 모르기 때문입니다. . 누군가 그것에 대해 알고 있다면 그가 나에게 깨달음을 줄 수 있기를 바랍니다. 하지만 이것은 좋은 방법이고, 모두가 배워서 활용해 볼 수 있기를 바랍니다.

2. 의사 클래스 클리어 플로트 이후

보통 블록 요소의 플로트를 설정한 후 이를 피하기 위해 플로트를 클리어해야 합니다. 레이아웃 혼란. 부동 소수점을 지우는 두 가지 일반적인 방법이 있습니다: 1) 후속 하위 요소 CSS에 "clear:both;"를 작성합니다. 2) 플로팅 요소의 상위 요소에 "overflow:hidden"을 씁니다. 이제 세 번째 방법을 사용할 수 있습니다. after pseudo-class를 사용하여 부동 속성을 작성하면 부동 속성이 필요한 곳이 있을 때마다 부모 요소에 이러한 부동 속성을 추가할 수 있습니다.

코드는 다음과 같습니다.

.clearfix:after{   

　　　　　content:"";   

　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;   

　　　　　}

로그인 후 복사

이 방법은 재설정에 쓸 수 있고 나중에 여러 번 호출할 수 있다는 장점이 있습니다.

위 글은 CSS 스타일의 몇 가지 영리한 방법을 요약(권장)한 내용인데, 이는 편집자가 공유한 모든 내용이 여러분께 참고가 되기를 바라며, PHP 중국어 홈페이지를 지원해 주시길 바랍니다.

관련 기사를 요약하는 CSS 스타일의 더 독창적인 방법을 보려면 PHP 중국어 웹사이트에 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 스타일을 지정하는 영리한 방법 요약