두 가지 방법 중 W3C 표준을 따르는 방법은 무엇입니까? 브라우저에서 예상대로 작동합니까?
국경 : 없음;
국경 : 0;
답변
둘 다 유효합니다. 당신의 선택입니다.
나는 border:0그것이 더 짧기 때문에 선호합니다 . 나는 그것을 더 읽기 쉽다는 것을 안다. 당신은 찾을 수 none보다 읽기. 우리는 매우 유용한 CSS 포스트 프로세서의 세계에 살고 있으므로 원하는 것을 사용하고 “압축기”를 통해 실행하는 것이 좋습니다. 여기서 싸울 가치가있는 거룩한 전쟁은 없습니다.
모든 프로덕션 CSS를 손으로 작성하는 경우 의견에 불평이 있더라도 대역폭을 의식하는 데 상처를 입히지 않습니다. 를 사용 border:0 하면 무한한 양의 대역폭 이 절약 됩니다 . 그 자체로는 매우 중요하지만 모든 바이트 수를 계산 하면 웹 사이트가 더 빨라집니다.
CSS2 사양 은 여기에 있습니다 . 이것들은 CSS3에서 확장되었지만 이것과 관련이 없습니다.
'border'
Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties 너비, 스타일 및 색상의 조합을 사용할 수 있습니다.
여기 0에서 너비, none스타일을 설정합니다 . 렌더링 결과는 동일합니다. 아무것도 표시되지 않습니다.
답변
그들은에서 동등한 효과 , 다른 단축키를 가리키는 :
border: 0;
//short for..
border-width: 0;그리고 나머지..
border: none;
//short for...
border-style: none;둘 다 작동합니다. 하나만 골라 가십시오. 🙂
답변
다른 사람들이 말했듯이 둘 다 유효하며 트릭을 수행 할 것입니다. 나는 그들이 동일하다는 것을 100 % 확신하지 못합니다. 스타일 캐스 케이 딩이 진행되는 경우 이론적으로 다른 값을 재정의하므로 이론적으로 다른 결과를 생성 할 수 있습니다.
예를 들어. “테두리 : 없음;”을 설정하면 나중에 테두리 너비와 스타일을 재정의하는 두 가지 스타일이 있으며 하나는 무언가를하고 다른 하나는하지 않습니다.
IE와 firefox의 다음 예제에서 처음 두 테스트 div에는 테두리가 없습니다. 그러나 두 번째 블록은 두 번째 블록의 첫 번째 div는 평범하고 두 번째 블록의 두 번째 div는 중간 너비의 점선 테두리를 갖습니다.
따라서 둘 다 유효하지만 캐스케이드 방식이 많고 내가 생각하는 것처럼 스타일을 주시해야 할 수도 있습니다.
<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>
</head>
<body>
<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>
<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>
</body>
</html>답변
(참고 :이 답변은 2014-08-01에보다 상세하고 정확하며 라이브 데모 를 추가하기 위해 업데이트되었습니다 )
Shortand 속성 확장
따르면 W3C의 사양 CSS2.1 ( “생략 값이 초기 값으로 설정된다” ), 다음과 같은 특성이 동등하다 :
border: hidden; border-style: hidden;
border-width: medium;
border-color: <the same as 'color' property>
border: none; border-style: none;
border-width: medium;
border-color: <the same as 'color' property>
border: 0; border-style: none;
border-width: 0;
border-color: <the same as 'color' property>이러한 규칙이 요소의 테두리에 적용되는 가장 구체적인 규칙 인 경우 너비가 0이거나 hidden/ none스타일로 인해 테두리가 표시되지 않습니다 . 따라서 첫 번째로 볼 때이 세 가지 규칙은 동일하게 보입니다. 그러나 다른 규칙과 결합하면 다른 방식으로 작동합니다.
접는 테두리 모델의 테이블 컨텍스트 테두리
테이블을 사용하여 렌더링하면 렌더링 된 border-collapse: collapse각 테두리가 여러 요소간에 공유됩니다 (내부 테두리는 인접 셀로 공유되고, 외부 테두리는 셀과 테이블 자체간에 공유되지만 행, 행 그룹, 열 및 열 그룹도 테두리를 공유 함) ). 이 사양은 국경 충돌 해결에 대한 몇 가지 규칙을 정의합니다 .
와 테두리
border-style의hidden다른 모든 충돌 테두리 인수 우선 순위. […]스타일이
none가장 낮은 테두리의 우선 순위가 가장 낮습니다. […]스타일 중 하나도
hidden없고 그 중 하나 이상이 아닌none경우 좁은 테두리는 더 넓은 스타일을 위해 삭제됩니다. […]테두리 스타일의 색상 만 다른 경우 […]
따라서 테이블 컨텍스트에서 border: hidden(또는 border-style: hidden)은 가장 높은 우선 순위를 가지며 공유 경계를 숨겨줍니다.
우선 순위의 다른 쪽 끝에서 border: none(또는 border-style: none)의 우선 순위가 가장 낮고 너비가 0 인 경계 (가장 좁은 경계이므로)입니다. 이 수단은 것으로 계산 값 의 border-style: none과 계산 값 의은 border-width: 0본질적으로 동일하다.
계단식 규칙 및 상속
이후 none및 0다른 속성 (영향 border-style과에게 border-width), 그들은 작동합니다 다른 때 보다 구체적인 규칙 을 정의 바로 스타일이나 단지 폭입니다. 예를 들어 Chris 답변 을 참조하십시오 .
라이브 데모 !
이 모든 사례를 한 페이지에보고 싶습니까? 라이브 데모를 엽니 다 !
답변
사용
border: none;일부 IE 버전에서는 작동하지 않습니다. IE9는 괜찮지 만 이전 버전에서는 스타일이 “없음”인 경우에도 테두리가 표시됩니다. 입력 상자에 테두리를 원하지 않는 인쇄 스타일 시트를 사용할 때이 문제가 발생했습니다.
border: 0;모든 브라우저에서 제대로 작동하는 것 같습니다.
답변
Oli가 친절하게 제공 한 사양에 따라 간단하게 사용할 수 있습니다.
나는 항상 사용 border:0 none;합니다.
별도로 지정해도 아무런 해가 없지만 레거시 CSS1 속성 호출을 사용하면 일부 브라우저에서 CSS를 더 빨리 구문 분석합니다.
비록 border:0;일반적으로 테두리 스타일이 기본값으로 사용됩니다 none, 내가 그러나 어떤 수 이상하게 덮어 쓰기 기본 테두리 스타일을 적용 일부 브라우저를 발견했습니다 border:0;.
답변
나는 사용한다:
border: 0;CSS 2.1의 8.5.4 부터 :
‘경계’
값 : [<border-width> || <테두리 스타일> || < ‘테두리 상단 컬러’>] | 상속
따라서 두 방법 중 하나가 잘 보입니다.
