CSS 스타일을 지정하는 영리한 방법 요약
- 高洛峰원래의
- 2017-03-07 14:29:301295검색
이전에 접했던 몇 가지 특별한 스타일의 구현과 관련하여 오늘은 두 가지 목적으로 요약하겠습니다. 첫째, 나중에 필요할 때 찾아 사용할 수 있도록 이러한 방법을 기록합니다. 두 번째는 이 위대한 신들의 지혜의 결정체를 추진하여 대다수의 프런트 엔드 프로그래머가 우회를 피할 수 있도록 하는 것입니다. 이번 포스팅은 업데이트 내용입니다. 앞으로 좋은 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 중국어 웹사이트에 주목하세요!