這些是我自己在學習過程中總結的一些知識點,這篇文章我將以面試題的形式分享給大家,希望對大家有所幫助,本文篇幅較長,您若認真看完,並且反覆閱讀,我相信對您的學習或者是面試,都會有一定幫助,同時希望大家批評指正!
盒子模型就是元素在網頁中的實際佔位,有兩種:標準盒子模型和IE盒子模型
# 標準(W3C)盒子模型:內容content 填入padding 邊框border 邊界margin
寬高指的是content 的寬高
# 低版本IE盒子模型:內容(content padding border) 邊界margin,
寬高指的是content padding border 部分的寬高
#問題的拓展:##CSS 如何設定這兩種模型?
box-sizing : content-box
box-sizing : border-box复制代码
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>复制代码
2. box-sizing屬性?
context-box:W3C的標準盒子模型
,設定元素的height/width 屬性指的是content 部分的高/寬border-box:IE 傳統盒子模型。
設定元素的 height/width 屬性指的是 content border padding 部分的高/寬3. 對 BFC 規範(區塊層級格式化上下文:block formatting context)的理解?
一個頁面是由很多個Box 組成的,元素的類型和display 屬性,決定了這個Box 的類型。
不同類型的Box,會參與不同的Formatting Context(決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
BFC 規定了內部的 Block Box 如何佈局。定位方案:
內部的 Box 會在垂直方向上一個接一個地放置。#根元素,即html
4. CSS選擇器有哪些?哪些屬性可以繼承? CSS優先權演算法如何計算?
CSS選擇符:1. id選擇器( # myid)
2. 類別選擇器(.myclassname)
3. 標籤(元素)選擇器(p, h1, p)
4. 相鄰選擇器(h1 p)
5. 子選擇器(ul >li)
6. 後代選擇器(li a)
7.通配符選擇器( * )
#8. 屬性選擇器(a[rel = "external"])
9. 偽類選擇器(a:hover, li:nth-child)
偽元素選擇器、分組選擇器。
繼承性:可繼承的樣式:font-size, font-family, color,ul,li,dl,dt,dd;
不可繼承的樣式:border, padding, margin, width, height
優先權(就近原則):!important > [ id > class > tag ]
!important 比內嵌優先級高優先權就近原則,同權重情況下樣式定義最近者為準
!important>id > ;class>tag
important比內聯優先權高
元素选择符的权值:元素标签(派生选择器):1,class选择符:10,id选择符:100,内联样式权值最大,为1000
p:first-of-type 选择属于其父元素的首个 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:last-of-type 选择属于其父元素的最后 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-of-type 选择属于其父元素唯一的 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
: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下,event物件有pageX,pageY屬性,但是沒有x,y屬性。
解決方法:(條件註解)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
1. 雙邊距BUG float引起的使用display
2. 3像素問題使用float引起的使用dislpay:inline -3px
3. 超連結hover 點擊後失效使用正確的書寫順序link visited hover active
4. Ie z-index問題為父級添加position:relative
5. Png 透明使用js程式碼改
6. Min-height 最小高度!Important 解決'
7.select 在ie6下遮蓋使用iframe嵌套
8. 為什麼沒有辦法定義1px左右的寬度容器(IE6預設的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支援!important
#因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒有對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
無論屬於哪一種,都要先找到其祖先元素中最近的position 值不為static 的元素,然後再判斷:
如果都找不到,則為 initial containing block。
補充:
1. static(預設的)/relative:簡單說就是它的父元素的內容框(即去掉padding的部分)
2. absolute : 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body),根元素也是initial containing block
當一個元素的<strong>visibility</strong>
屬性被設定成<strong>collapse</strong>
值後,對於一般的元素,它的表現跟<strong>hidden</strong>
是一樣的。但例外的是,如果這個元素是table相關的元素,例如table行,table group,table列,table column group,它的表現卻跟<strong>display: none</strong>
一樣,也就是說,它們佔用的空間也會釋放。
在Google瀏覽器裡,使用 <strong>collapse</strong>
值和使用 <strong>hidden</strong>
值沒有什麼不同。
在火狐瀏覽器、Opera和IE11裡,使用<strong>collapse</strong>
值的效果就如它的字面意思:table的行會消失,它的下面一行會補充它的位置。
display : none 隱藏對應的元素,在文件佈局中不再指派空間(回流重繪)
visibility:hideen 隱藏對應的元素,在文件佈局中仍保留原來的空間(重繪)
使用CSS display:none 屬性後,HTML 元素(物件)的寬度、高度等各種屬性值都會「遺失」;而使用visibility:hidden 屬性後,HTML元素(物件)只是視覺上看不見(完全透明),而它所佔據的空間位置仍然存在。
display 屬性規定元素應該產生的框的類型;position屬性規定元素的定位類型;float屬性是一種佈局方式,定義元素在哪個方向浮動。
類似於優先權機制:position:absolute/fixed優先權最高,有他們在時,float不起作用,display值需要調整。 float 或absolute定位的元素,只能是區塊元素或表格。
出現浮動的原因:
浮動元素碰到包含它的邊框或浮動元素的邊框停留。在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使用position: absolute; top: 100px; bottom: 0; left: 0
頁面載入自上而下 當然是先載入樣式。
寫在body 標籤後由於瀏覽器以逐行方式對HTML文檔進行解析,當解析到寫在尾部的樣式表(外聯或寫在style 標籤)會導致瀏覽器停止之前的渲染,等待加載且解析樣式表完成之後重新渲染,在windows的IE下可能會出現FOUC 現象(即樣式失效導致的頁面閃爍問題)
參數是scroll 時候,必會出現捲軸。
參數是 auto 時候,子元素內容大於父元素時出現捲軸。
參數是 visible 時候,溢出的內容出現在父元素之外。
參數是 hidden 時候,溢出隱藏。
CSS Sprites小圖片背景分享技術。它把一堆小的圖片整合到一張大的圖片上。接著利用CSS的 background-image,background- repeat,background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求,從而大大的提高頁面的效能;CSS Sprites能減少圖片的位元組。
優勢:
1.很好的減少網頁的請求,大大提高頁面的效能;
2.減少圖片的位元組;
3.解決了網頁設計師在圖片命名上的困擾;
4.更換風格方便,維護方便。
劣勢:
1.圖片合併時需預留足夠空間,寬螢幕、高解析度的螢幕下易出現背景斷裂;
2.開發較麻煩,測量繁瑣;(可使用樣式生成器)
3.維護麻煩,背景少許改動有可能影響整張圖片,使得字節增加還要改動css。
第一種回答:
偽類別: :focus、:hover、:active
偽元素::before、:after
偽類本質上是為了彌補常規CSS選擇器的不足,以便獲取到更多資訊;
偽元素本質上是創建了一個有內容的虛擬容器;
CSS3中偽類和偽元素的語法不同;
可以同時使用多個偽類,而只能同時使用一個偽元素;
第二種回答:
偽類別:偽類別選擇元素基於的是目前元素處於的狀態,或者說元素目前所具有的特性,而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的,所以當一個元素達到一個特定狀態時,它可能會得到一個偽類的樣式;當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。
:first-child :link: :visitive :hover :active :focus :lang
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
:first-line :first-letter :before :after复制代码
外部样式表,引入一个外部css文件
内部样式表,将css代码放在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内部
内联样式,将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元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案:d5fd7aea971a85678ba271703566ebfd 、a1f02c36ba31691bcfe87b2722de723b 、bb9345e55eb71822850ff156dfde57c8 、4750256ae76b6b9d804861d8f69e79d3。
相关文章 为何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實作圓角(border-radius),陰影(box-shadow),
2. 對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增加了更多的CSS選擇器多背景rgba
5. 在CSS3中唯一引入的偽元素是::selection.
6.媒體查詢,多欄佈局
7. border-image
功能上的差異:HTML是一種基本的WEB網頁設計語言;XHTML是基於XML的置標語言,XHTML可相容於各大瀏覽器、手機以及PDA,瀏覽器也能快速正確地編譯網頁。
書寫習慣上:
##(1) XHTML 所在標籤都必須小寫(2) XHTML 標籤必須成雙成對(3) XHTML 標籤順序必須正確(4) XHTML 所有屬性都必須使用雙引號(5) 不XHTML 允許使用target=”_blank”(6) XHTML 文件必須擁有根元素。 (7) XHTML 元素必須正確地巢狀。 59. 前端頁有哪三層構成,分別是什麼?結構層Html 表示層CSS 行為層js60. css的基本語句構成是? 選取器{屬性1:值1;屬性2:值2;……}61. 與HTML4 比較,HTML5 廢棄了哪些元素? 廢棄的元素包括:· frame· frameset· noframe· applet#· big· center· basefront62. CSS引入的方式有哪些?使用Link和@import有什麼差別? 答案:內聯,內嵌,外鏈,導入(1)link 屬於XHTML 標籤,除了載入CSS 外,還能用來定義RSS,定義rel 連接屬性等作用,無相容性,支援使用javascript改變樣式;而@import是CSS提供的,只能用於載入CSS,不支援使用javascript 改變樣式;(2)當頁面載入的時,link 會同時加載,而@import 引用的CSS會等到頁面加載完再加載;(3)import是CSS2.1 提出的,CSS2.1以下瀏覽器不支持,只在IE5以上才能被識別,而link是XHTML標籤,無相容問題。 63. 介紹你對瀏覽器核心的理解主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和 JS 引擎。 (1)渲染引擎:負責取得網頁的內容(HTML、XML、圖片等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然後輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶以及其他它所需要編輯、顯示網路的應用程式都需要核心。 (2)JS引擎則:解析和執行JavaScript 來實現網頁的動態效果;#最開始渲染引擎和JS 並沒有區分的很明確,後來JS引擎越來越獨立,核心就傾向於只渲染引擎。 64. 常見的瀏覽器核心有哪計算些?
Trident核心:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。 [又稱MSHTML]
Gecko核心:Netscape6以上版本,FF,MozillaSuite/SeaMonkey等。
Presto核心:Opera7以上。 [Opera核心原為:Presto,現為:Blink;]
Webkit核心:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
EdgeHTML核心:Microsoft Edge。 [此核心其實是從MSHTML fork而來,刪掉了幾乎所有的IE私有特性]
65. 對WEB標準以及W3C的理解與認識標籤閉合、標籤小寫、不亂嵌套、提高搜尋機器人搜尋幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的程式碼和元件,容易維護、改版方便,不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性;66. 為什麼HTML5裡面我們不需要DTD(Document Type Definition文件類型定義)? HTML5沒有使用SGML或XHTML,他是全新的東西,所以你不需要參考DTD,對於HTML5,你只需放置下面的文件類型代碼告訴瀏覽器識別這是HTML5文件67. 如果我不放入,HTML5還會工作麼? 不會,瀏覽器將無法識別他是HTML文檔,同時HTML5的標籤將無法正常運作68. HTML5 中的 datalist 是什麼? HTML5中的Datalist元素有助於提供文字方塊自動完成特性,如下圖所示:69. CSS中使用列佈局是什麼? CSS列佈局幫助你分割文字變為列,例如考慮下面的雜誌新聞在一個大的文本中,但是我們需要在他們之間使用邊界劃分為3列,這裡HTML5的列佈局就有所幫助了
設定background-position:center;
讓一種字體標識為斜體(oblique),如果沒有這種格式,就使用italic字體
繼承:在一個屬性套用到一個特定標籤之後,該標籤的子標籤也應該套用該屬性。這一行為稱為繼承。但並不是所有的屬性都會被繼承。如文字樣式一般都繼承,盒圖的寬高一般不 繼承,總之該繼承的都會繼承,不該繼承的都不繼承。
重複使用:一個樣式文件,可以多個頁面使用,這對於一些公共樣式的重構是很有用的。
答案:牽涉到人手、分工、同步
(1) 先期團隊必須確定好全域樣式,編碼模式等
(2) 寫習慣必須一致
(3) 標註樣式編寫人,各模組都及時標註(標註關鍵樣式調用的地方)
(4) 頁面進行標註
(5) Css與html分資料夾並行存放,命名都要統一
(6) Js分資料夾存放,命名以此JS功能為準英文翻譯
(7) 圖片採用整合的.png格式檔案使用,盡量整合在一起,方便將來的管理。
Word-break:break-all;
1a309583e26acea4f04ca31122d8c535 宣告位於文件中的最前面的位置,處於 100db36a723c770d327fc0aef2ce13b1 標籤之前。
它不是一個 HTML 標籤,它是用來告知(宣告) Web 瀏覽器頁面使用了哪個 HTML 版本
行內元素:
(1)行內元素不換行
(2)行內元素不可以設定大小
( 3)行內元素大小由內容決定
區塊元素:
(1)區塊元素獨立成行
(2)區塊元素可以設定大小
(3)區塊元素如果不設定寬度,寬度會自適應其父級的寬度
行元素:
span、img、a、lable、input、abbr(縮寫)、em(強調)、big、cite(引用)、i(斜體)、q(短引用)、textarea、select(下拉清單)、small、sub、sup,strong、u(底線)、button(預設display:inline-block)
從瀏覽器的顯示結果可以看出,相鄰的行內元素不換行,寬度即為內容的寬度、padding的4個方向都有效(從span標籤可以看出,對於行內非替換元素,不會影響其行高,不會撐開父元素;而對於替換元素,則會撐開父元素)、margin只有水平方向有效(其中垂直方向的margin對行內替換元素(例如img元素)有效,對行內非替換元素無效)、不可以設定width和height屬性。行內區塊元素表現其實和行內元素一樣,只是其可以設定width和height屬性。
區塊元素:
p、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、 table、menu、pre,HTML5新增的header、section、aside、footer等
從瀏覽器的顯示結果可以看出,區塊級元素新開啟一行(即使設定了width屬性也是獨佔一行)、盡可能撐滿父級元素的寬度,可以設定width和height屬性;table元素瀏覽器預設的display屬性為table。
(1) 找到對應其標籤的父級,給其父級設定text-align : center;
(2) 將元素轉換成區塊元素,設定margin : 0 auto,(必須是區塊元素,而且有寬度)
#加粗:
CSS:font- weight : bold
HTML : a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a,8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0
#斜體:
CSS : font-style : italic | oblique,font-style : normal(正常的字體)
HTML : 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6 ,907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338
Google中這樣是解釋的:
圖片底部的空隙實際上涉及行內元素的佈局模型,圖片預設的垂直對齊方式是基線,而基線的位置是與字體相關的。所以在某些時候,圖片底部的空隙可能是 2px,有時可能是 4px 或更多。不同的 font-size 應該也會影響到這個空隙的大小。
解决办法:
最优的解决办是定义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中文網其他相關文章!