특별 추천2.CSS 선택자는 무엇인가요? 어떤 것이 상속될 수 있나요?id 선택기(#myid)
3. CSS 우선순위는 어떻게 계산하나요?
transition-property:width transition-duration:1s transition-timing-function:linear transition-delay:2s
animation :애니메이션 이름, 한 사이클에 소요된 시간, 구름 곡선(기본값 이즈), 애니메이션 지연(기본값 0), 애니메이션 재생 횟수(기본값 1), 애니메이션 역방향 재생 여부(기본값 일반) , 애니메이션 일시 중지 여부(기본 실행)</ code></ul><p><code>animation:动画名称，一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)transform: 使用于2D或3D转换的元素 transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);
选择器
阴影
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外，设置inset就是从外往里)
border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式
border-radius: n1 n2 n3 n4; /* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */
box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片
word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)overflow: hidden; white-space: nowrap; text-overflow:ellipsis;
overflow:hiden; text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本 display:-webkit-box; //将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数 -webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式
text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色Shape Transform
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}box-shadow: 수평 그림자 위치 수직 그림자 위치 흐림 거리 그림자 크기 그림자 색상 그림자 시작 방향(기본값은 내부에서 외부로, 삽입 설정은 외부에서 내부로 설정됨)🎜🎜🎜Border image🎜🎜🎜border-image: 이미지 경로를 설정하고, 테두리 배경 이미지 분할 방법, 개체 설정 또는 검색 테두리 두께를 설정하거나 개체의 테두리 배경 이미지를 검색하여 바깥쪽으로 확장하고 테두리 이미지의 타일링 방법을 설정합니다.🎜🎜🎜border rounded Corners🎜🎜 .wrapper{
position:relative;
overflow:hidden;
}box-reflect: 방향 [위-위|아래-아래|오른쪽-오른쪽|왼쪽-왼쪽], 오프셋, 마스크 이미지🎜🎜🎜text🎜🎜🎜🎜 line breakword-break:normal(기본적으로 브라우저 기본 줄 바꿈 규칙에 사용됨) | break-all(단어 내에서 줄 바꿈 허용) keep-all(반자 공백 또는 하이픈에서만 줄 바꿈 가능) </ code>🎜🎜줄임표 초과🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.clearfix{
zoom:1;
}
.clear:after{
content:&#39;.&#39;;
height:0;
clear:both;
display:block;
visibility:hidden;
}</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜여러 줄 줄임표 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;"><p class="md-warp">
<span class="md-main"></span>
</p>
.md-warp{
width: 400px;
height: 300px;
max-width: 100%;
border: 1px solid #000;
}
.md-main{
display: block;
width: 100px;
height: 100px;
background: #f00;
}</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜Text-shadow🎜🎜🎜<code>text-shadow: 가로 그림자 세로 그림자 흐림 그림자 색상🎜🎜🎜color🎜 🎜🎜rgba(rgb 색상 값, a는 투명도)🎜🎜🎜그라디언트 🎜🎜🎜선형 및 방사형 그라디언트🎜filter: 滤镜效果(透明度)
弹性布局就是flex布局
-栅格布局
栅格化布局。就是grid
一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间
移动端
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
} .wrapper{
position:relative;
overflow:hidden;
}webkit-over-flow-scrolling:touch;清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示
.clear{clear:both}.clearfix{
zoom:1;
}
.clear:after{
content:'.';
height:0;
clear:both;
display:block;
visibility:hidden;
}margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距
外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者
示例：
<p class="md-warp">
<span class="md-main"></span>
</p>
.md-warp{
width: 400px;
height: 300px;
max-width: 100%;
border: 1px solid #000;
}
.md-main{
display: block;
width: 100px;
height: 100px;
background: #f00;
}水平居中
.md-main{
margin: 0 auto
}.md-wrap{
position:relative;
}
.md-main{
position:absolute;
left:50%;
margin-left:-50px
}有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate
.md-warp{
position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}直接使用text-align:center即可
垂直居中
和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可
优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签
.md-warp{
position: relative;
}
.md-main{
position: absolute;
/* 核心 */
top: 50%;
margin-top: -50px;
}不确定高度的时候
.md-warp{
position: relative;
}
.md-main{
position: absolute;
top: 50%;
// 注意此时md-main不设置height为100px
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}需要满足两个条件：
p{
width: 400px;
height: 300px;
border: 1px solid #000;
}
span{
line-height: 300px;
}视窗单位的解决办法
让元素在视窗中居中，使用vh实现
.md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}Flexbox的解决方案
完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto
.md-wrap{
display:flex
}
.md-main{
display:auto
}Flexbox的实现文本的水平垂直居中同样很简单
.md-warp{
display:flex;
}
.md-main{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}绝对垂直居中
.md-wrap{
position: relative;
}
.md-main{
position:absolute;
top:0'
right:0
bottom:0;
left:0;
margin:auto;
}最好不要使用绝对定位，因为他对整体的布局影响相当的大
相关教程推荐：CSS视频教程
위 내용은 CSS 면접 질문(참고)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
