간과하기 쉬운 CSS 기능
- 黄舟원래의
- 2016-12-16 10:17:041225검색
容易被忽略CSS特性
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑
大小写不敏感
虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的
.test{ background-COLOR:#a00; width:100px; height: 100px;}
虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求
选择器优先级
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
同一级别
同一级别中后写的会覆盖先写的样式
上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样
到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色
行内(inline)元素的一些属性
并不是所有的属性对行内元素都能够生效
行内元素不会应用width属性，其长度是由内容撑开的
行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节
行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响
行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效
行内元素的overflow属性无效，这个不用多说了
行内元素的vertical-align属性无效（height属性无效）
예제에서 볼 수 있듯이 범위에 설정한 너비 및 높이 속성은 적용되지 않으며 margin-top 및 margin-bottom은 유효하지 않습니다. padding- top 및 padding- 하단은 요소의 범위를 변경하지만(배경 영역이 더 커짐) 아래 요소의 위치에는 영향을 미치지 않습니다.
일부 상호 배타적인 요소
절대적인 경우 및 고정 위치 지정(고정 크기, 너비 설정 및 높이 속성) 요소, 위쪽 및 왼쪽 속성이 설정된 경우 아래쪽 및 오른쪽 값 설정은 위쪽 및 왼쪽에 더 높은 우선 순위를 부여해야 합니다.
절대 및 고정 위치 요소의 경우 위쪽, 왼쪽, 아래쪽 및 오른쪽 값이 설정된 경우 여백 속성 작동하지 않습니다절대 및 고정 위치 요소의 경우 위쪽, 왼쪽, 아래쪽 및 오른쪽 값을 설정하면 float 속성도 유효하지 않습니다. float 속성이 설정되거나 절대인 경우 또는 블록 요소에 고정 위치가 설정되어 있으면 수직 정렬 속성이 더 이상 작동하지 않습니다. 글꼴 크기 단위 글꼴 크기를 작성할 때 일반적으로 사용되는 단위는px
pt
em
rem
이 글꼴은 무엇을 의미하나요?
px는 픽셀(pixel)의 약자로, 웹 탐색 과정에서 화면의 해상도에 따라 화면에 나타나는 텍스트와 그림이 변경됩니다. 100px의 경우 800×가 됩니다. 600 해상도에서는 화면 너비의 1/8을 차지하지만 1024×768에서는 약 1/10만 차지합니다. 따라서 글꼴 크기를 정의할 때 단위를 px로 사용하는 경우, 사용자가 표시 해상도를 800에서 1024로 변경하면 사용자가 실제로 보는 텍스트는 "더 작아지게"(자연 길이 단위), 심지어 불분명할 수도 있습니다. , 찾아보기에 영향을 미칩니다.
pt는 포인트(pound)의 약자로 1/72인치 크기의 고정된 길이 측정 단위입니다. 웹에서 텍스트 단위로 pt를 사용하면 화면마다 글꼴 크기가 동일(동일 해상도)되어 조판에 영향을 미칠 수 있지만, 워드에서는 pt를 사용하는 것이 매우 편리합니다. Word를 사용하는 주요 목적은 화면 탐색이 아니라 출력 및 인쇄이기 때문입니다. 엔터티로 인쇄할 때 pt는 자연스러운 길이 단위로 편리하고 실용적입니다. 예를 들어 Word의 일반 문서에서는 "노래 글꼴 9pt"를 사용하고 제목은 "Helvetica 16pt"를 사용합니다. 인쇄할 때는 항상 이 정도 크기여야 합니다.
em: 상대 단위이자 상대 길이 단위입니다. 원래는 문자 M의 너비를 나타내므로 현재는 문자 너비의 배수를 나타냅니다. 0.8em, 1.2em, 2em 등과 같은 백분율과 유사합니다. 일반적으로 1em=16px(브라우저 기본 글꼴 크기 16px), em은 상위 요소의 글꼴 크기를 나타냅니다. 페이지에 있는 상위 요소의 글꼴 크기를 고려하면 확장 가능한 스타일 시트를 만드는 것과 같이 하나의 요소를 조정하여 모든 요소의 크기를 비례적으로 변경할 수 있습니다. ex의 개념과 유사하게 ex는 문자 "x"에 대한 상대적 높이이며 일반적으로 글꼴 크기의 절반입니다.
rem은 CSS의 새로운 기능입니다. Em은 상위 요소를 기준으로 글꼴 크기를 설정하므로 문제가 발생할 수 있습니다. 여러 번 사용하면 예측할 수 없는 오류가 발생할 위험이 있습니다. 그리고 rem은 루트 요소 (r:root)에 상대적입니다. rem을 사용하면 루트 요소의 참조 값만 결정하면 전체 html 페이지의 모든 글꼴을 제어할 수 있습니다.
:checked 선택기 범위
우리는 다음을 알고 있습니다:checked는 선택된 체크박스와 라디오를 선택합니다. 예를 참조하세요
< ; head
