이 글은 제가 공부하면서 정리한 몇 가지 지식 사항입니다. 이 글을 읽어보시면 도움이 되실 것 같습니다. 꼼꼼히 읽어보시고 공부나 면접에 도움이 되셨으면 좋겠습니다.
상자 모델은 웹 페이지에 있는 요소의 실제 위치입니다. 두 가지 유형이 있습니다: 표준 상자 모델 및 IE 상자 모델
표준(W3C) 상자 모델: content+padding+ 테두리+테두리 여백
너비와 높이는 콘텐츠의 너비와 높이를 나타냅니다.
낮은 버전 IE 박스 모델: 콘텐츠(콘텐츠+패딩+테두리) + 테두리 여백,
너비와 높이는 너비와 높이를 나타냅니다. 콘텐츠 높이+패딩+테두리 부분
주제 추천: 2020 CSS 인터뷰 질문 요약(최신)
질문의 확장:
CSS 이 두 모델을 어떻게 설정하나요?
box-sizing : content-box box-sizing : border-box复制代码
JS에서 상자 모델의 해당 너비와 높이를 설정하는 방법은 무엇입니까?
dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置复制代码
예시 질문(박스 모델을 기반으로 여백 겹침을 설명)?
이 예는 부모와 자식 여백의 겹침과 형제 요소의 여백 겹침입니다
<style> html *{ padding: 0; margin: 0; } #sec{ background: #f00; overflow: hidden; //创建了一个BFC,块级格式化上下文 } .child{ height: 100px; margin-top: 10px; background: yellow; } </style> <section id="sec"> <article class="child"></article> </section>复制代码
BFC(여백 겹침 솔루션)?
요소 상자 모델의 구문 분석 모드를 제어하는 데 사용되며 기본값은 content-box입니다.
context-box: W3C의 표준 상자 모델, 요소의 높이/너비 속성 설정은 콘텐츠의 높이/너비를 나타냅니다. part
border -box: IE의 전통적인 박스 모델입니다. 요소의 높이/너비 속성 설정은 콘텐츠의 높이/너비 + 테두리 + 패딩 부분을 의미합니다.
(W3C CSS 2.1 사양의 개념입니다. 요소가 콘텐츠를 배치하는 방법은 물론 다른 요소와의 관계 및 상호 작용을 결정하는 독립적인 컨테이너입니다.)
페이지는 많은 상자로 구성됩니다. 요소 및 표시 속성에 따라 이 상자의 유형이 결정됩니다.
다양한 유형의 Box는 다양한 Formatting Context(문서 렌더링 방법을 결정하는 컨테이너)에 참여하므로 Box 내부 요소는 다양한 방식으로 렌더링됩니다. 즉, BFC 내부 요소와 외부 요소는 영향을 미치지 않습니다. 서로.
BFC는 내부 블록박스 배치 방식을 규정하고 있습니다.
위치 지정 방식:
BFC는 다음 조건 중 하나가 충족될 때 트리거될 수 있습니다.
BFC에 대한 자세한 소개는 내 기사 BFC란 무엇인가요?를 참조하세요. 무슨 소용이 있나요?
CSS 선택자:
1. ID 선택자(# myid)
2. 클래스 선택자(.myclassname)
3. 태그(요소) 선택자(p, h1, p)
4 . h1 + p)
5. 하위 선택자(ul > li)
6. 하위 선택자(li a)
7. 와일드카드 선택자( * )
8. ])
9. 의사 클래스 선택자(a:hover, li:nth-child)
의사 요소 선택자, 그룹 선택자.
상속:
상속 가능한 스타일: 글꼴 크기, 글꼴 계열, 색상, ul, li, dl, dt, dd;
상속 불가능한 스타일: 테두리, 패딩, 여백, 너비, 높이
우선순위 (근접성 원칙): !important > [ id > class > tag ]
!important는 인라인 우선순위보다 높습니다
우선순위 알고리즘 계산
우선순위 근접 원칙, 가장 최근에 정의된 스타일
!important>id >class>tagimportant는 인라인보다 우선순위가 높습니다元素选择符的权值:元素标签(派生选择器):1,class选择符:10,id选择符:100,内联样式权值最大,为1000
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
:before在元素之前添加内容,也可以用来做清除浮动
:after在元素之后添加内容
水平居中p:
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;复制代码
水平垂直居中一个浮动元素(position定位)
第一种:未知元素宽高
<p class="outer"> <span>我想居中显示</span> </p> <style> .outer{ width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; top:50%; left:50%; transform:translate(-50%,-50%); } </style>复制代码
第二种:已知元素宽高的
<p class="outer"> <span>我想居中显示</span> </p> <style> .outer{ width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; width:150px; height:50px; top:50%; left:50%; margin:-25px 0px 0px -75px; } </style>复制代码
如何垂直居中一个img(display : table-cell 或者 position定位)
<p class="outer"> <img src="nz.jpg" alt=""> </p> <style> .outer{ width: 300px; height: 300px; border: 1px solid #cccccc; display: table-cell; text-align: center; vertical-align: middle; } img{ width: 150px; height: 150px; } </style>复制代码
绝对定位的p水平垂直居中:
border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0;复制代码
还有更加优雅的居中方式就是用 flex布局,点击查看我的文章 掌握flex布局,这篇文章就够了
更多的居中问题,点击查看我的文章 p居中的几种方法
值 | 描述 |
---|---|
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
none | 此元素不会被显示(隐藏)。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
table | 此元素会作为块级表格来显示(类似table),表格前后带有换行符 |
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。(老IE不支持) 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性,粘性定位 sticky,它主要用在对 scroll 事件的监听上;
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:
#one { position: sticky; top: 10px; }复制代码
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。
更多关于 sticky 的介绍,请点击查看 粘性定位介绍
:not(p)
选择每个非p的元素; p:empty
选择每个没有任何子级的p元素(包括文本节点)p{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色 border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。 }复制代码
p{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; //规定背景图的尺寸 background-origin:content-box;//规定背景图的定位区域 } 多背景 body{ background-image:url(img_flwr.gif),url(img_tree.gif); }复制代码
background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
更多 CSS3 和 HTML5的新特性,请点击 CSS3 和 HTML5 新特性一览
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。
更多关于 flex 布局,请点击查看我的文章 你真的了解 flex 布局吗?
首先,需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;复制代码
第一种真正的品字:
第二种全屏的品字布局:
上面的p设置成100%,下面的p分别宽50%,然后使用float或者inline使其不换行。
*{margin:0;padding:0;}
来统一;
display:inline;
将其转化为行内属性。渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。{ background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码
a:link {} a:visited {} a:hover {} a:active {}复制代码
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox에서는 이벤트 개체에 pageX 및 pageY 속성이 있지만 x, y 속성은 없습니다.
Solution: (조건부 설명) 단점은 IE 브라우저에서 추가 HTTP 요청이 추가될 수 있다는 점입니다.
1에 대한 몇 가지 해결 방법을 적어보세요. 디스플레이의 부동 사용으로 인한 이중 여백 BUG
2. 3픽셀 문제는 float: dislpay:inline -3px
3을 사용하여 발생합니다. 클릭 후 하이퍼링크 호버가 실패합니다. 호버 활성 링크를 사용하세요. 즉, Z-색인 문제입니다.
5.Png 투명을 사용하여 js 코드 변경
6. 최소 높이!중요한 솔루션'
7. 선택은 iframe 중첩을 사용하여
8에서 다룹니다. 약 1px의 너비 컨테이너(IE6의 기본 줄 높이로 인해 over:hidden, Zoom: 0.08 line-height:1px 사용)
9 IE 6은 !important
15를 지원하지 않습니다. CSS 스타일? 브라우저 호환성 문제로 인해 일부 태그에 대해 브라우저마다 기본값이 다릅니다. CSS가 초기화되지 않으면 브라우저 간 페이지 표시 차이가 자주 발생합니다. 물론 초기화 스타일은 SEO에 어느 정도 영향을 주겠지만, 케이크를 먹고도 먹을 수는 없지만 최소한의 영향으로 초기화하도록 노력하세요.
어느 요소에 속하든 먼저 조상 요소 중에서 가장 가까운 위치 값이 정적이지 않은 요소를 찾은 다음 판단해야 합니다.
이 요소가 인라인 요소인 경우 포함 블록은 세 번째 요소입니다. 이 요소를 포함할 수 있는 생성된 첫 번째 및 마지막 인라인 상자의 패딩 상자(여백 및 테두리를 제외한 영역) 그렇지 않으면 이 조상 요소의 패딩 상자로 구성됩니다.1. 정적(기본값)/상대적: 간단히 말하면 상위 요소의 콘텐츠 상자입니다(즉, 패딩 부분 제거)
2. 절대값으로 배치된 가장 가까운 요소를 찾습니다. 상대 위쪽
3. 고정됨: 포함 블록은 항상 루트 요소(html/body)이고 루트 요소는 또한 초기 포함 블록입니다
17. ? 브라우저마다 차이점은 무엇입니까?
요소의 </p>visibility<h3>
속성이 </h3>collapse<p>
값으로 설정되면 일반 요소의 동작은 <code><strong>visibility</strong>
属性被设置成 <strong>collapse</strong>
值后,对于一般的元素,它的表现跟 <strong>hidden</strong>
是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟 <strong>display: none</strong>
一样,也就是说,它们占用的空间也会释放。
在谷歌浏览器里,使用 <strong>collapse</strong>
值和使用 <strong>hidden</strong>
值没有什么区别。
在火狐浏览器、Opera和IE11里,使用 <strong>collapse</strong>
hidden
<h3>display: none</h3>
과 동일하게 동작합니다. 즉, 그들이 차지하는 공간도 해제될 것입니다. Google Chrome에서는 </strong>collapse</p>
값을 사용하는 것과 <p>hidden<strong>
값을 사용하는 것에는 차이가 없습니다.
<p>collapse</p>
값을 사용하면 문자 그대로의 의미와 동일한 효과가 있습니다. 즉, 테이블 행이 사라지고 그 아래 행이 해당 위치를 채웁니다. 18. 표시:없음과 표시 여부:숨김의 차이점은 무엇인가요? visibility:hideen 해당 요소를 숨기고 문서 레이아웃에서 원래 공간을 계속 유지(다시 그리기) )
CSS display:none 속성을 사용한 후에는 HTML 요소(객체)의 너비, 높이 및 기타 속성 값이 "손실"되고 visible:hidden 속성을 사용한 후에는 HTML 요소(객체) )은 시각적으로만 사라지고(완전히 투명하게), 그것이 차지하는 공간적 위치는 그대로 유지됩니다.
🎜19. 위치, 표시, 오버플로, 플로트 기능이 서로 겹쳐지면 어떻게 될까요? 🎜🎜display 속성은 요소가 생성해야 하는 상자 유형을 지정하고, position 속성은 요소의 위치 지정 유형을 지정합니다. float 속성은 요소가 부동하는 방향을 정의하는 레이아웃 방법입니다. 🎜우선 순위 메커니즘과 유사: 위치: 절대/고정이 가장 높은 우선 순위를 가집니다. 이 경우 부동 소수점은 작동하지 않으며 표시 값을 조정해야 합니다. 부동소수점이나 절대값으로 배치된 요소는 블록 요소나 테이블만 될 수 있습니다. 🎜🎜20. 플로트는 왜 나타나나요? 플로트는 언제 지워야 하나요? 수레를 제거하는 방법은 무엇입니까? 장점과 단점은 무엇입니까? 어느 것이 최고라고 생각하시나요? 왜? 🎜🎜🎜플로팅 이유: 🎜🎜🎜플로팅 요소가 자신을 포함하는 테두리에 닿거나 플로팅 요소의 테두리에 유지됩니다. CSS 사양에서 플로팅 위치 지정은 일반 페이지 흐름에 속하지 않고 독립적으로 위치 지정되므로 문서 흐름의 블록 상자는 플로팅 상자가 존재하지 않는 것처럼 동작합니다. 부동 요소는 문서 흐름의 블록 상자 위에 떠 있습니다. 🎜关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。
浮动带来的问题:
清除浮动的方式:
1、父级p定义height
原理:父级p手动定义height,就解决了父级p无法自动获取到高度的问题
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级p不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2、结尾处加空 p 标签 clear:both
原理:添加一个空p,利用css提高的clear:both清除浮动,让父级p能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空p,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级 p 定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级p定义伪类 :after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码
(1) 在子元素后添加一个空p p{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符,在父容器的尾部自动创建一个子元素
.clearfix:after { content: "\0020";display: block;height: 0;clear: both; } .clearfix { zoom: 1; }复制代码
"clearfix"
是父容器的class名称,"content:"020";"
是在父容器的结尾处放一个空白符,
"height:
0;"
是让这个这个空白字符不显示出来,"display:
block; clear: both;"
是确保这个空白字符是非浮动的独立区块。:after
选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"
就行了.
在重合元素外包裹一层容器,并触发该容器生成一个BFC。例子:
<p class="aside"></p> <p class="text"> <p class="main"></p> </p> <!--下面是css代码--> .aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个p,通过改变此p的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。 }复制代码
自动变成display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码
@media only screen and (max-device-width:480px) { /css样式/}复制代码
预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
其它 CSS 预处理器语言:
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-moz-border-radius: 5px; border-radius: 5px; }复制代码
CSS选择器的解析是从右向左解析的,为了避免对所有元素进行遍历。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中,为float的盒子指定margin时,左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法,而现代浏览器同时支持这两种表示法。另外,在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
p{ font-size:10px; -webkit-transform:scale(0.8);//0.8是缩放比例 } 复制代码
-webkit-font-smoothing 在 window 系统下没有起作用,但是在 IOS 设备上起作用 -webkit-font-smoothing:antialiased 是最佳的,灰度平滑。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
행 상자의 배열은 사이에 있는 공백(캐리지 리턴 공백) 등에 의해 영향을 받습니다. 공백도 문자이기 때문에 이러한 공백에도 스타일이 적용되고 공간을 차지하므로 문자 크기가 다음과 같은 경우 간격이 발생합니다. 0으로 설정하면 공백이 없습니다.
해결책:
외부 p는 position:relative를 사용합니다. 적응형 높이 요구 사항이 있는 p는 위치: 절대, 상단: 100px, 하단: 0
페이지 로딩은 위에서 아래로 진행됩니다. 물론 스타일이 먼저 로딩됩니다.
body 태그 뒤에 작성됩니다. 브라우저는 HTML 문서를 한 줄씩 파싱하기 때문에 마지막에 작성된 스타일 시트(개요 또는 스타일 태그에 작성된)를 파싱하면 브라우저가 이전 렌더링을 중지하고 로드 및 파싱을 기다리게 됩니다. . 스타일 시트가 다시 렌더링된 후 Windows IE에서 FOUC 현상이 발생할 수 있습니다(예: 스타일 오류로 인한 페이지 깜박임 문제)
변수는 스크롤할 때 스크롤 막대가 나타납니다.
매개변수가 auto인 경우 하위 요소의 콘텐츠가 상위 요소보다 크면 스크롤 막대가 나타납니다.
매개변수가 표시되면 오버플로 콘텐츠가 상위 요소 외부에 나타납니다.
매개변수가 숨겨지면 오버플로가 숨겨집니다.
CSS Sprites 작은 그림 배경 공유 기술. 여러 개의 작은 그림을 하나의 큰 그림으로 결합합니다. 그런 다음 CSS 배경 이미지, 배경 반복 및 배경 위치 조합을 사용하여 배경 위치를 지정합니다. CSS 스프라이트를 사용하면 웹페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. CSS 스프라이트는 이미지 바이트를 줄일 수 있습니다.
장점:
1. 웹 페이지 요청을 줄이고 페이지 성능을 크게 향상시킵니다.
2. 이미지 이름 지정 시 웹 디자이너의 문제를 해결합니다. . 스타일 변경이 쉽고 유지 관리가 쉽습니다.
단점:1. 사진을 병합할 때 충분한 공간을 확보해야 하며, 와이드스크린 및 고해상도 화면에서는 배경이 깨지기 쉽습니다. 2. 스타일 생성기 )
3. 유지 관리가 번거롭습니다. 배경의 작은 변화로 인해 전체 이미지에 영향을 미쳐 바이트 및 CSS 변경이 증가할 수 있습니다.
46. CSS 의사 클래스와 의사 요소의 차이점은 무엇인가요?
첫 번째 답변:의사 클래스: :focus, :hover, :active의사 요소: :before, :after
의사 클래스는 본질적으로 일반 CSS 선택기의 단점을 보완하기 위한 것입니다.
의사 요소는 본질적으로 콘텐츠가 포함된 가상 컨테이너를 생성합니다.
CSS3의 의사 클래스와 의사 요소의 구문은 다릅니다.
동시에 여러 의사 클래스를 사용할 수 있습니다.
두 번째 답변:Pseudo-class: 요소의 의사 클래스 선택은 요소의 현재 특성이 아닌 현재 요소의 상태를 기반으로 합니다. 요소의 ID, 클래스, 속성 및 기타 정적 기호입니다. 상태는 동적으로 변경되므로 요소가 특정 상태에 도달하면 상태가 변경되면 의사 클래스 스타일을 얻을 수 있지만 이 스타일은 손실됩니다. 그 기능은 클래스와 다소 비슷하다고 볼 수 있지만, 문서 외부의 추상화에 기반을 두고 있기 때문에 의사 클래스라고 부른다.
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
:first-line :first-letter :before :after复制代码
外部样式表,引入一个外部css文件
内部样式表,将css代码放在
标签内部内联样式,将css样式直接定义在 HTML 元素内部
最基本的:设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:设置宽高为 0,设置透明度为 0,设置 z-index 位置在 -1000
答案:解决各浏览器对 CSS 解释不同所采取的,区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。
块级元素( block )特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的)。
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案: 、 、
相关文章 为何img、input等内联元素可以设置宽高
外边距重叠就是 margin-collapse。
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
垂直方向:line-height
水平方向:letter-spacing (letter-spacing 属性增加或减少字符间的空白)
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
px和em都是长度单位,区别是:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
不同的浏览器对一些元素有不同的默认样式,如果不处理,在不同的浏览器下会存在必要的风险。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
不能。它只能移动x,y轴的位置。translate3d可以。
1. CSS3는 둥근 모서리(테두리 반경), 그림자(상자 그림자),
2. 텍스트에 특수 효과 추가(텍스트 그림자), 선형 그라디언트(그라데이션), 회전(변형)
3 .Transform:rotate(9deg) scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg); // 회전, 크기 조절, 위치 맞추기
4 더 많은 CSS 선택기와 여러 배경 rgba를 추가했습니다.
5. CSS3에 도입된 유일한 의사 요소는 ::selection.6. 미디어 쿼리, 다중 열 레이아웃7. border-image58 xhtml과 html의 차이점은 무엇인가요? 차이점 : HTML은 기본적인 웹 페이지 디자인 언어이고, XHTML은 XML을 기반으로 한 마크업 언어입니다. XHTML은 주요 브라우저, 휴대폰 및 PDA와 호환되며 브라우저는 웹 페이지를 빠르고 정확하게 컴파일할 수 있습니다.
작성 습관:
(1) XHTML 태그는 소문자여야 합니다.(2) XHTML 태그는 쌍이어야 합니다.(3) XHTML 태그 순서는 정확해야 합니다.(4) 모든 XHTML 속성은 Double이어야 합니다. 따옴표를 사용해야 합니다. (5) Target="_blank"는 XHTML에서 허용되지 않습니다. (6) XHTML 문서에는 루트 요소가 있어야 합니다. (7) XHTML 요소는 올바르게 중첩되어야 합니다. 59. 프런트엔드 페이지의 세 가지 레이어는 무엇인가요? 구조 레이어 HTML 프레젠테이션 레이어 CSS 동작 레이어 js60. CSS의 기본 문 구조는 무엇인가요?Selector {속성 1: 값 1; 속성 2: 값 2;…}61. HTML4와 비교할 때 HTML5에서는 어떤 요소가 버려지나요? 버려진 요소는 다음과 같습니다: ·frame·frameset·noframe·applet·big·center·basefront62. Link와 @import 사용의 차이점은 무엇입니까? 답변: 인라인, 내장, 외부 링크, 가져오기 (1) 링크는 CSS를 로드하는 것 외에도 RSS를 정의하고 관계 연결 속성 및 기타 기능을 정의하는 데 사용할 수 있습니다. 스타일 변경은 CSS에서 제공되며 CSS를 로드하는 데만 사용할 수 있습니다. (2) 페이지가 로드되면 링크가 표시됩니다. 동시에 로드되며 @import에서 참조하는 CSS는 로드 후 페이지를 다시 로드할 때까지 기다립니다. (3) 가져오기는 CSS2.1에서 제안되며 CSS2.1 이하의 브라우저는 이를 지원하지 않습니다. IE5 이상에서만 인식되며 링크는 XHTML 태그이므로 호환성 문제는 없습니다. 63. 브라우저 커널에 대한 이해를 소개합니다주로 렌더링 엔진(레이아웃 엔지니어 또는 렌더링 엔진)과 JS 엔진의 두 부분으로 나뉩니다. (1) 렌더링 엔진: 웹 페이지의 콘텐츠(HTML, XML, 이미지 등)를 가져오고, 정보를 구성(CSS 추가 등)하고, 웹 페이지의 표시 방법을 계산하는 역할을 담당합니다. , 모니터나 프린터로 출력합니다. 브라우저 커널에 따라 웹페이지에 대한 문법적 해석이 다르므로 렌더링 효과도 달라집니다. 인터넷을 편집하고 표시해야 하는 모든 웹 브라우저, 전자 메일 클라이언트 및 기타 응용 프로그램에는 커널이 필요합니다. (2) JS 엔진: JavaScript를 구문 분석하고 실행하여 웹 페이지에 동적 효과를 얻습니다. 처음에는 렌더링 엔진과 JS가 명확하게 구분되지 않았습니다. 나중에 JS 엔진은 점점 더 독립적이었으며 커널은 엔진만 렌더링하는 경향이 있었습니다. 64. 일반적인 브라우저 커널 계산은 무엇입니까?Trident 커널: IE, MaxThon, TT, The World, 360, Sogou 브라우저 등 [MSHTML이라고도 함]
Gecko 커널: Netscape6 이상, FF, MozillaSuite/SeaMonkey 등
Presto 커널: Opera7 이상. [Opera 커널은 원래: Presto, 현재: Blink;]
Webkit 커널: Safari, Chrome 등 [Chrome: Blink(WebKit의 포크)]
EdgeHTML Core: Microsoft Edge. [이 커널은 실제로 MSHTML 포크에서 나온 것이며 거의 모든 IE 비공개 기능이 삭제되었습니다.]
65. WEB 표준 및 W3C에 대한 이해 및 지식태그 폐쇄, 태그 소문자, 중첩 없음, 검색 로봇 개선 검색 확률, 사용 외부 링크 CSS 및 JS 스크립트, 구조적 동작과 성능의 분리, 더 빠른 파일 다운로드 및 페이지 속도, 더 많은 사용자가 콘텐츠에 액세스할 수 있고, 더 넓은 범위의 장치에서 콘텐츠에 액세스할 수 있으며, 코드가 적고 구성 요소가 유지 관리 및 수정이 쉽습니다. . 페이지 내용을 변경할 필요가 없으며, 내용을 복사하지 않고 인쇄 버전을 제공하고, 웹사이트의 유용성을 향상시킵니다. 66. HTML5에서는 왜 DTD(문서 유형 정의)가 필요하지 않습니까? HTML5는 SGML이나 XHTML을 사용하지 않는 새로운 것이므로 DTD를 참조할 필요가 없습니다. HTML5의 경우 다음 문서 유형 코드만 배치하면 브라우저가 이를 인식할 수 있습니다. HTML5 문서67. 넣지 않아도 HTML5가 계속 작동하나요? 아니요, 브라우저는 HTML 문서로 인식하지 못하며 HTML5 태그가 제대로 작동하지 않습니다.68 HTML5의 데이터 목록이 무엇인가요? HTML5의 Datalist 요소는 아래 그림과 같이 텍스트 상자 자동 완성 기능을 제공하는 데 도움이 됩니다. 69 CSS에서 열 레이아웃의 용도는 무엇입니까? CSS 열 레이아웃은 텍스트를 여러 열로 분할하는 데 도움이 됩니다. 예를 들어 다음 잡지 뉴스를 큰 텍스트로 생각해 보세요. 그러나 열 사이에 테두리를 사용하여 3개의 열로 나누어야 합니다. 여기서는 HTML5 열 레이아웃이 도움이 됩니다.배경 위치 설정:center;
글꼴 로고 만들기는 무엇을 의미하나요? 기울임꼴(사선), 해당 형식이 없으면 기울임꼴 글꼴을 사용하세요
상속: 속성이 특정 태그에 적용된 후 해당 태그의 하위 태그에도 속성이 적용되어야 합니다. 이 동작을 상속이라고 합니다. 그러나 모든 속성이 상속되는 것은 아닙니다. 예를 들어 텍스트 스타일은 일반적으로 상속되지만 상자 이미지의 너비와 높이는 일반적으로 상속되지 않습니다. 즉, 상속되어야 할 것은 모두 상속되고 상속되지 않아야 할 것은 상속되지 않습니다.
재사용: 스타일 파일은 여러 페이지에서 사용할 수 있으며 이는 일부 일반적인 스타일을 재구성하는 데 매우 유용합니다.
답변: 인력, 분업, 동기화가 관련됩니다
(1) 초기 팀에서는 글로벌 스타일, 코딩 모드 등을 결정해야 합니다.
(2) 글쓰기 습관은 일관되어야 합니다
(3) 스타일 작성자를 표시하고, 각 모듈을 시간에 맞춰 표시합니다(핵심 스타일이 호출되는 위치 표시)
(4) 페이지를 표시하세요
(5) CSS와 html은 별도의 폴더에 병렬로 저장되며, 이름은 통일되어야 합니다
(6) Js는 폴더에 저장되며, 이름은 JS 기능을 기반으로 합니다
(7) 이미지는 통합된 .png 형식 파일로 사용되며 향후 관리를 용이하게 하기 위해 가능한 한 많이 통합되어야 합니다.
Word-break:break-all;
선언은 문서의 맨 앞, 태그 앞에 있습니다.
HTML 태그가 아니며 페이지에서 어떤 HTML 버전이 사용되는지 웹 브라우저에 알리(선언)하는 데 사용됩니다.
인라인 요소:
(1) 인라인 요소는 줄바꿈되지 않습니다.
(2) 인라인 요소의 크기는 조정할 수 없습니다.
(3) 인라인 요소의 크기는 콘텐츠에 따라 결정됩니다.
블록 요소 :
(1) 블록 요소는 독립적인 라인을 형성합니다
(2) 블록 요소의 크기를 조정할 수 있습니다
(3) 블록 요소의 너비가 설정되지 않은 경우 너비는 상위 요소의 너비에 맞춰집니다
라인 요소:
span, img, a, label, input, abbr(약어), em(강조), big, cite(인용), i(이탤릭체) ), q(짧은 따옴표), textarea, select(드롭다운 목록), small, sub, sup, Strong, u(밑줄), 버튼(기본 표시: inline-block)
브라우저 표시에서 볼 수 있듯이 결과적으로 인접한 인라인 요소는 줄바꿈되지 않으며 너비는 콘텐츠의 너비와 패딩의 네 방향에 유효합니다(span 태그에서 볼 수 있듯이 인라인 비대체 요소의 경우에는 그렇지 않습니다). 줄 높이에 영향을 미치고 상위 요소는 확장되지 않습니다. 반면 대체 요소의 경우 상위 요소가 확장됩니다. 여백은 가로 방향으로만 유효합니다(세로 여백은 인라인 대체 요소(예: img)에 유효합니다. 요소), 그러나 인라인 비대체 요소에는 해당되지 않음), 너비 및 높이 속성은 설정할 수 없습니다. 인라인 블록 요소는 너비 및 높이 속성을 설정할 수 있다는 점을 제외하면 인라인 요소와 동일하게 동작합니다.
블록 요소:
p, p, h1~h6, ul, ol, dl, li, dd, table, hr, blockquote, address, table, menu, pre, HTML5 새 헤더, 섹션, Aside,
브라우저 표시 결과를 보면 블록 수준 요소가 새 행을 열고(너비 속성이 설정되어 있어도 단독 행을 차지함) 너비를 채우려고 하는 것을 볼 수 있습니다. 가능한 한 상위 요소를 설정할 수 있습니다. 테이블 요소 브라우저의 기본 표시 속성은 테이블입니다.
(1) 해당 레이블에 해당하는 상위 요소를 찾고 text-align: center를 상위 요소로 설정합니다.
(2) 요소를 블록 요소로 변환하고 설정합니다. margin: 0 auto, (블록 요소여야 하며 너비가 있어야 함)
Bold:
CSS: font-weight:bold
HTML: ,< ;strong> ;
italic:
CSS: 글꼴 스타일: 기울임체 | 경사, 글꼴 스타일: 일반(일반 글꼴)
HTML: < 이미지의 기본 수직 정렬은 기준선이고 기준선의 위치는 글꼴과 관련됩니다. 따라서 이미지 하단
의 간격이 2픽셀일 수도 있고 4픽셀 이상이 될 수도 있습니다. 다른 글꼴 크기도 이 간격의 크기에 영향을 미칩니다.解决办法:
最优的解决办是定义vertical-align,注:定义vertical-align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0
(1)转化成(行级)块元素
display : block复制代码
(2)浮动,浮动后的元素默认可以转化为块元素(可以随意设置宽高属性)
float : left;复制代码
(3)给 img 定义 vertical-align(消除底部边距)
img{ border: 0; vertical-align: bottom; }复制代码
(4)将其父容器的font-size 设为 0;
(5)给父标签设置与图片相同的高度
父级的宽度不够,导致元素无法并排显示;
行内样式、内部样式(写一个style)、外部样式
padding margin复制代码
padding : 0; margin : 0;复制代码
word-spacing : 单词
letter-spacing : 字母、中文
text-decoration : underline | overline | line-through
list-style:none; background-image:url()复制代码
宽度(width)
颜色(color)
线形(solid,dashed,dotted,)实线,虚线,点画线
diaplay:block | inline-block
title :鼠标放入时提示的文字,
alt : 图片路径出错时,提示文字
<meta charset="UTF-8">
相关教程推荐:CSS视频教程
위 내용은 2019 CSS 클래식 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!