CSS 쓰기Border 에 대해 당신 이 주의해 야 할 부분 1/2 페이지

오늘 CSS 를 썼 는데 갑자기 생각 나 는 것 을 써 서 여러분 과 공유 해 보 세 요. 우 리 는 이미 padding 이 서로 다른 브 라 우 저 에서 의 차이 점 에 익숙 해 졌 을 것 입 니 다. 하지만 이 건 주의 하지 않 아 도 돼.  먼저 한 장면 을 말한다.예 를 들 어:  너비 400 px 의 노란색 상자,왼쪽 에 300 px 의 작은 파란색 상자,오른쪽 에 너비 100 px 의 빨간색 상 자 를 놓 습 니 다.이렇게 하면 딱 내 려 놓 을 수 있 겠 죠? 300+100 이 400 이 니까! 자,먼저 해 보 세 요!  나 는 쓰기 시작 했다. 

<style> 
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;} 
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;} 
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;} 
</style> 

400px 
<div id="yellow"> 
 <div id="blue">300px</div> 
 <div id="red">100px</div> 
</div> 
효과 보기: www.zishu.cn 400 px
div id="blue">300 px
100 px
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]마지막 효 과 는 다음 과 같 습 니 다내 려 놓 지 않 은 이 유 는 border:1px 를 썼 기 때 문 입 니 다. 그럼 우리 그 를 없 애 보 자.  www.zishu.cn 400 px
300 px
100 px
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]
1 2 다음 페이지 전문 을 읽다

좋은 웹페이지 즐겨찾기