div+css를 사용할 때 주의해야 할 몇 가지 세부 사항
- 巴扎黑원래의
- 2017-07-18 17:36:571446검색
第一个注意点：选择器的使用（标签、class、id）
三种选择器中id（#）的优先级最高，根据id名筛选出唯一元素；
如下输入：#menu{ width:1200px; height:45px; background:#90F}
其次是class（.）的优先级较高，根据id名筛选出唯一元素；
如下输入：.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}
标签优先级最差，根据标签名选中元素；
如下输入：div{text-align:center; vertical-align:middle; line-height:100px}
第二个注意点：外边距margin、内边距padding和流float的使用
外边距margin和内边距padding的使用是相对于边框的调整，四边框按上右下左顺时针调整；
特殊使用：外边距margin一般配合流float来使用，流float给操作的对象规定一个方向（left向左流、right向右流），被操作对象按此按此方向进行布局
如下（导航栏的制作）：
.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#000; color:#F00; cursor:pointer}
另外，内边距padding：如果加了内边距，该元素会相应的变大，则需要在相应的高度属性中进行调整；
如下输入：
第三个注意点：分层z-index的使用条件
使用分层z-index时，要配合位置属性来调整；如果缺少属性位置的设置，则没有显示效果。
如下输入：
1. 배경 타일에 너무 작은 그림을 사용하지 마세요.
이것이 많은 사람들이 1px를 사용하지 않고 단지 알아두는 이유입니다. 너비와 높이가 1px인 이미지를 200px의 영역에 타일링하려면 200*200=40,000번의 시간이 필요하고 리소스를 차지합니다.
2. 국경이 없습니다.
추천 쓰기 방법은 border:none;, ㅎㅎ 맨날 이걸 써요. border:0; 테두리 너비를 0으로만 정의하지만 테두리 스타일과 색상은 여전히 브라우저에서 구문 분석되어 리소스를 차지합니다.
3. * 와일드카드를 주의해서 사용하세요.
소위 와일드카드는 사용 여부, 구식 또는 고급 여부에 관계없이 CSS의 모든 태그를 초기화하고 동일하게 취급하는 것입니다. 이는 많은 리소스를 소비합니다. 선택적 초기화 태그가 있어야 합니다.
4. CSS 16진수 색상 코드 약어.
약어와 소문자에 익숙하다 보니 분석에 소요되는 리소스를 줄이기 위해 권장하는 작성 방법이 아니라는 것을 깨달았습니다. 하지만 파일 크기도 늘어납니다. 어느 쪽이 더 나은지, 더 나쁜지 신중하게 검증해야 합니다.
5. 머리에는 스타일을, 발에는 스크립트를 넣어보세요. 포함되지 않았으며 외부 링크만 있습니다.
6. CSS 표현식을 사용하지 마세요.
7. @import를 통해 스타일 시트를 가져오는 대신 참조하는 데 사용합니다.
8. 일반적으로 PNG는 GIF보다 작으며 훨씬 작습니다. 그렇다면 GIF에서 얼마나 많은 색상이 낭비되는지는 최적화할 가치가 있습니다.
9. HTML에서 이미지 크기를 조정하지 마세요. 하나는 보기에 좋지 않고 다른 하나는 리소스를 차지합니다.
10. 텍스트 글꼴 12px, 14px, 16px에는 짝수를 사용하는 것이 가장 좋습니다. 효과가 매우 좋습니다. 특별한 경우, 15px.
위 내용은 div+css를 사용할 때 주의해야 할 몇 가지 세부 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!