CSS를 사용하여 모든 요소에 너비를 제공하는 방법은 무엇입니까?
CSS를 사용하여 모든 요소에 너비를 제공하는 방법은 무엇입니까?
Photoshop 에서처럼 우리는 내부, 중앙 및 외부에있는 줄 수 있습니다.
기본 CSS 속성이 포토샵의 가운데처럼 중앙에 중앙에 생각합니다. 맞습니까?
외부가 아닌 상자 내부에 포장을 지정하고 싶습니다. 상자 너비에 너비를두고 너비를 조정합니다.
outline:1px solid white;
이것은 너비의 너비와 높이를 추가하지 않습니다.
CSS 상자 크기 확인 ...
box-sizing CSS3 속성은 사용자가 할 수 있습니다. border-box 값 (content-box 주소와 반대)는 최종적인 상자를 선언 된 너비로 만들고 상자 내부의 장치와 패딩을 잘라냅니다. 이제 픽셀 기반 패딩 및 자율을 포함하여 요소의 너비를 100 %로 보장하고 목표를 완벽하게 달성 할 수 있습니다.
- -webkit-box-sizing : 테두리 상자; / * Safari / Chrome, 기타 WebKit * /
- -moz-box-sizing : 테두리 상자; / * Firefox, 기타 Gecko * /
- 상자 크기 : 상자; / * Opera / IE 8 이상 * /
믹싱을 만드는 것이 좋습니다. W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 에서 box-sizing에 대한 자세한 정보를 찾을 수 있습니다 .
의도 한 브라우저 지원에 따라 box-shadow속성을 사용할 수 있습니다 .
흐림 값을 0으로 설정하고 선택할 수 있습니다. 박스 섀도우의 가장 좋은 점은 외부 (기본적으로) 또는 내부 ( inset속성 사용)를 그릴 지 여부를 제어 할 수있는 것 입니다.
예 :
box-shadow: 0 0 0 1px black; // Outside black border 1px
또는
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
상자 그림자를 사용하는 한 가지 큰 장점은 여러 상자 그림자를 사용하여 창의성을 얻을 수있는 것입니다.
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
내가 말할 수없는 유일한 것은 일반적인 방법입니다. 한 번 에이 기술을 사용하는 요소가 수백 개라면 문제가 될 수 있다고 생각합니다.
나는 같은 문제에 부딪쳤다.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
이 대답을 사용하면 한쪽에 있습니다. 그리고 상자 그림자를 사용하는 것과 달리 IE8 +에서 작동합니다.
물론 특정 건물을 골라 내야 할 때 의사 요소 속성을 변경하십시오.
* 새롭고 기능 기능 *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
이를 통해이를 사용하고 상자의 여러면을 칠 수 있습니다.
abenson이 말했듯이 외곽선을 사용할 수 있습니다 한 가지 문제는 Opera가 "직사각형 문제는"을 그릴 수있는 것입니다. 작동하는 것과 같이 보이는 또 다른 옵션은 CSS와 같이 음수 여백을 사용하는 것입니다.
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
이 html로 :
<body>
<div>A block</div>
<div>Another block</div>
</body>
덜 깔끔한 또 다른 옵션은 html에 추가 마크 업을 추가하는 것입니다. 예를 들어 외부 요소의 너비를 설정하고 내부 요소에 테두리를 추가합니다. CSS :
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
그리고 html :
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
사용 box-sizing: border-box순서는 국경 만들 수 INSIDE DIV 폭을 수정하지 않고 사업부를.
div 너비를 수정하지 않고 div 외부outline 에 테두리를 만드는 데 사용 합니다 .
예 : https://jsfiddle.net/4000cae9/1/
참고 : border-box현재 IE에서는 지원되지 않습니다.
지원하다:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
테두리가없는 경우 패딩을 사용합니다. 테두리가있는 경우 패딩을 제거합니다.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
기본적으로 2px 패딩을 2px 테두리로 바꿉니다. Div 크기는 동일하게 유지됩니다.
귀하의 경우 패딩에서 테두리의 절반을 빼서 퍼지 할 수 있습니까? (테두리 너비가 5px이면 패딩에서 -2.5, 네거티브 패딩을 사용할 수 없으므로 상자의 전체 너비를 줄이십시오). 전체 상자 크기를 동일하게 유지하기 위해 여백에 2.5px를 추가 할 수 있습니다.
나는이 제안이 정말 마음에 들지 않지만 이것을 깨끗하게 처리 할 방법이 없다고 생각합니다.
따라서 잘 알려진 IE 박스 모델 버그 와 동일한 결과를 얻으려고합니다 . 그건 불가능하다. 또는 Windows에서만 IE로 클라이언트를 지원하고 IE를 쿼크 모드 로 강제 하는 doctype 을 선택하고 싶습니다 .
배경색이 단색 인 경우 다른 옵션 :
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
개요 : 3px 단색 검정 || 테두리 : 3px 단색 검정
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}<div>
hello world
</div>'IT' 카테고리의 다른 글
| Python에서 람다 식 내부 할당 (0) | 2020.09.04 |
|---|---|
| Android SDK AsyncTask doInBackground가 실행되지 않음 (하위 클래스) (0) | 2020.09.04 |
| osx mavericks에 "gem install therubyracer -v '0.10.2'"가 설치되지 않았습니다. (0) | 2020.09.04 |
| TypeError : ObjectId ( '')는 JSON 화 가능하지 않습니다. (0) | 2020.09.04 |
| jQuery를 사용하여 마우스 포커스를 설정하고 커서를 입력 끝으로 이동 (0) | 2020.09.04 |