Selector
의미 설명
E:root
match The HTML 문서의 경우 문서의 루트 요소는 HTML 요소입니다.
E:nth-child(n)
은 상위 요소의 n번째 하위 요소와 일치합니다. 숫자는 1
E:nth-last-child(n)
은 상위 요소의 마지막 n번째 하위 요소와 일치하며, 첫 번째 숫자는 1
입니다.
E:nth-of-type(n)
은 :nth-child()와 유사하지만 동일한 태그를 사용하는 요소만 일치합니다
E :nth-last-of-type(n)
은 :nth-last-child()와 유사하지만 동일한 태그
E를 사용하는 요소에만 일치합니다. last-child
은 상위 요소의 마지막 하위 요소와 일치합니다. nth-last-child(1)
E: first-of-type
상위 요소 아래 동일한 태그를 사용하여 첫 번째 하위 요소와 일치합니다. 이는 nth-of-type(1)
E:last-of-type
과 동일합니다.
상위 요소 아래 동일한 태그를 사용하여 마지막 하위 요소와 일치합니다. 이는 nth-last-of-type(1)
E:only-child
과 동일합니다.
상위 요소 아래의 유일한 하위 요소와 일치합니다. 이는 first-child:last-child 또는:nth-child(1):nth-last-child(1)
E:only -of-type
은 상위 요소 아래에서 동일한 태그를 사용하는 유일한 하위 요소와 일치합니다. 이는 first-of-type: last-of-type 또는 :nth-와 동일합니다. of-type(1): nth-last-of-type(1)
E:empty
은 하위 요소를 포함하지 않는 요소와 일치합니다. 노드도 하위 요소로 간주됩니다
Attributes
의미 설명
Compatible
transition
전환 효과 설정
transform
변형 효과(이동, 크기 조절, 회전, 늘이기 또는 늘이기)
animation
animation effect
box-shadow
그림자 효과
FF3.5 , 사파리 4, 크롬 3
text-shadow
text-shadow
FF 3.5, 오페라 10 4, 크롬 3
border-colors
테두리에 여러 색상 설정
FF3+
boder- image
이미지 테두리
FF 3.5, Safari 4, Chrome 3
text-overflow
텍스트 잘림
IE6+, Safari4, Chrome3, Opera10
단어 줄 바꿈
자동 줄 바꿈
IE6+, FF 3.5, Safari 4, Chrome 3
테두리 -반경
둥근 테두리
FF 3+, Safari 4, Chrome 3
opacity
불투명도
all
box-sizing
컨트롤 박스 모델 구성 모드
FF3+, Opera 10, Safari 4, Chrome 3
개요
외부 테두리
FF3+, 사파리 4, 크롬 3, 오페라 10
배경 크기
지정하지 마세요. 배경 이미지 크기
safari 4, chrome 3, Opera 10
Background-origin
시작 위치 지정 배경 이미지 표시 중
safari 4, chrome 3, FF 3+
background-clip
배경 이미지 자르기를 시작할 위치 지정
사파리 4, chrome 3
rgba
r, g, b 세 가지 색상 채널을 기준으로 색상 값을 설정하고 a
를 통해 투명도를 설정합니다.
safari 4, 크롬 3, FF3, 오페라 10
3. 중앙 레이아웃
가로 중심
인라인 요소: text-align:centertext-align:center
块级元素: margin:0 auto
绝对定位和移动: absolute + transform
绝对定位和负边距: absolute + margin
flex布局: flex + justify-content:center
垂直居中
子元素为单行文本: line-height:height
absolute + transformflex + align-items:centertable: display:table-cell; vertical-align: middle
利用position和top和负margin
水平垂直居中
1. 已知元素宽高:绝对定位+margin:auto:
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
} 2. 已知元素宽高: 绝对定位+负margin
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
} 3. absolute+transform
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
} 4.flex + justify-content + align-items
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>p{
background: green;
width: 200px;
height: 200px;
} 4. 清除浮动有哪些方法, 各有什么优缺点 使用clear属性的空元素 在浮动元素后使用一个空元素如5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用db9da0c8f2980956c6531e0c04ab02d3或1d4f066caf78b94378f889402f3c966c来进行清理。 优点: 简单, 写少量代码, 兼容性也好 缺点: 添加无语义html元素, 不利于代码语义化, 后期维护成本大
使用css的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。 优点: 简单, 代码少, 浏览器支持好 缺点: 不能和position配合使用, 因为超出的尺寸会被隐藏overflow:hidden
使用CSS的:after伪元素 结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个clearfix
블록 수준 요소: margin:0 auto
Absolute 위치 지정 및 이동: 절대 + 변환
절대 위치 지정 및 음수 여백: 절대 + 여백
flex 레이아웃: flex + justify-content:center
세로 중심하위 요소는 한 줄의 텍스트입니다: line-height:height
절대 + 변환flex + align -items:centerdisplay:table-cell; Vertical-align: middle
위치와 상단 및 음수 여백 사용
수평 및 수직 중앙
1 . 알려진 요소 너비 높이: 절대 위치 + 여백: 자동:
.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
} 2. 알려진 요소 너비 및 높이: 절대 위치 + 음수 여백
.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
} 3. 절대+변환 .box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
} 4.flex + justify-content + 항목 정렬 🎜 .box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
} 🎜4. 플로트를 제거하는 방법은 무엇이며, 각 방법의 장단점은 무엇입니까🎜🎜🎜🎜공백을 사용하세요 Clear 속성이 있는 요소를 사용하고 5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3와 같은 부동 요소 요소 뒤에 빈 요소를 사용하고 .clear{clear를 할당합니다. :both;} CSS의 속성을 사용하여 부동 소수점을 지웁니다. 9bd35d0ab1399652577f51221b5af246 또는 9e9608c45e9340a126bcb009bcb97e71를 사용하여 청소할 수도 있습니다. 🎜🎜🎜🎜 장점: 간단함, 적은 양의 코드 작성, 좋은 호환성 단점: 의미가 없는 HTML 요소를 추가하는 것은 코드 의미에 도움이 되지 않으며 나중에 유지 관리 비용이 높습니다.🎜🎜🎜🎜CSS의 오버플로 속성을 사용하여 overflow:hidden; 또는 overflow:auto;는 부동을 지울 수 있습니다. 또한 IE6에서는 컨테이너 너비 설정과 같이 hasLayout을 트리거해야 합니다. 상위 요소의 높이 또는 zoom: 1 설정. 오버플로 속성을 추가한 후 플로팅 요소는 컨테이너 레이어로 돌아가 컨테이너의 높이를 높여 플로팅 요소를 정리하는 효과를 얻습니다. 🎜🎜🎜🎜 장점: 단순하고, 적은 코드, 우수한 브라우저 지원 단점: 초과 크기가 숨겨지기 때문에 위치와 함께 사용할 수 없습니다. 요소 조합: 의사 요소 뒤(이것은 의사 클래스가 아니라 의사 클래스라는 점에 유의하세요) -element(요소 다음의 가장 가까운 요소를 나타냄) 및 현재 주류 브라우저와 완벽하게 호환될 수 있는 IEhack은 hasLayout을 트리거하는 것을 의미합니다. 부동 요소의 컨테이너에 clearfix 클래스를 추가한 다음 이 클래스에 :after 의사 요소를 추가하여 요소 끝에 보이지 않는 블록 요소(Block 요소)를 추가하여 뜨다. CSS 의사 요소를 통해 컨테이너의 내부 요소 끝에 보이지 않는 공백 "020" 또는 점 "."을 추가하고 float를 지우기 위해 Clear 속성을 할당합니다. IE6 및 IE7 브라우저의 경우 haslayout을 트리거하려면clearfix 클래스에 Zoom:1을 추가해야 합니다. 🎜🎜🎜🎜장점: 좋은 브라우저 지원, 이상한 문제가 발생하지 않음(현재: Tengxun, NetEase, Sina 등과 같은 대규모 웹사이트에서 사용됨) 단점: 코드가 많고 두 줄의 코드가 필요합니다. 주류 브라우저는 🎜🎜🎜🎜상위 요소의 높이 설정🎜🎜🎜🎜단순하고 코드가 적으며 익히기 쉬움 단점: 고정 높이 레이아웃에만 적합🎜🎜🎜🎜5. 순수 CSS로 삼각형을 만드는 원리는 뭐예요🎜🎜🎜저도 이전에 삼각형을 작성할 때에는 이유를 알아보지 않고 코드만 외웠는데 면접관이 삼각형을 만드는 원리에 대해 이야기해 달라고 한 건 인터뷰에서였습니다. 방금... 최대한 빨리 돌아왔습니다. 다음으로 당시에 이해한 프로세스를 나열하겠습니다. 🎜🎜1. 우리에게 가장 친숙한 테두리 애플리케이션을 작성합니다. 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜🎜🎜2. 다음으로 경계 값이 증가합니다🎜.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
} 🎜🎜🎜🎜🎜 很容易发现, border渲染并不是正方形, 而是梯形的.
3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
4. 设置透明, 隐藏其中三个三角形
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border 的应用
6. 实现三栏布局有哪些方法, 分别描述一下 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p> 简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p> 这种方案也简单实用, 并且可以将 19c136f7655d60e76c6f77589880575894b3e26ee717c64999d7867364b1b4a3元素放到第一位,使得主要内容优先加载!
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}
</style>
<p class="content">
<p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p> <style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p> 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。
7. css3实现0.5px的细线 <style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<p class="line"></p> 8. link 与 @import 的区别 从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他
9. 开发中为什么要初始化css样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
10. CSS를 최적화하고 성능을 향상시키는 방법은 무엇인가요?
스타일을 별도의 CSS 파일에 작성하고 이를 헤드 요소에서 참조해 보세요. :
콘텐츠 및 스타일 분리, 관리 및 유지 용이
페이지 크기 감소
css 파일을 캐시하고 재사용할 수 있어 유지 관리 비용 절감
@import를 사용하지 마세요
복잡한 선택기 사용을 피하세요. 레벨이 적습니다. , 더 좋습니다 선택기를 사용하는 것이 좋습니다. 3개 수준 이상 중첩하지 않는 것이 가장 좋습니다. 예를 들면 다음과 같습니다.
페이지의 스타일 파일을 간소화하고 사용하지 않는 스타일을 제거합니다.
CSS 상속을 사용하여 코드 양을 줄입니다
피하세요 ! 중요합니다. 다른 선택기를 선택할 수도 있습니다.
권장 관련 튜토리얼: CSS 비디오 튜토리얼
