1、BFC
BFC(Block formatting context)块级格式化上下文。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,也不会受外部元素的影响。
BFC是一种边距重叠的解决方案,比如我们在写代码的时候会发现左右或者上下两个元素都设有边距,但往往出现边距之间取最大值作为两个元素之间的边距,而不是取两者的边距之和。
如何创建BFC ?
(1)float不为none
(2)position设置为absolute,fixed
(3)display设置为table-cell,table-caption,inline-block, flex, inline-flex
(4)overflow设置为除了visible以外的值,即hidden,auto,scroll
(5)body根元素
BFC的应用
(1)清除浮动,BFC可以包含浮动的元素,清除浮动只需要将父元素变成一个BFC即可,常用的方法是给父元素设置overflow:hidden
(2)解决边距重叠,同一BFC下外边距会发生合并,若想避免外边距合并,可以将其放在不同的BFC容器中
(3)阻止元素被浮动元素覆盖,创建自适应两栏布局,左边宽度固定,右边自适应宽度
2、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin
3、box-sizing属性?
用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽
border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
4、CSS选择器有哪些?哪些属性可以继承?
CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、
相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、
属性选择器(a[rel="external"])、伪类选择器(a:hover, li:nth-child)
可继承的属性:font-size, font-family, color
不可继承的样式:border, padding, margin, width, height
优先级(就近原则):!important > [ id > class > tag ]
!important 比内联优先级高
5、CSS3新特性
(1)选择器
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
(2)和动画相关的特性
Transition,Transform和Animation
(3)三个边框属性
border-radius 创建圆角边框
box-shadow 为元素添加阴影
border-image 图片来绘制边框
(4)文字效果
word-wrap 允许文本强制文本进行换行
text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示
text-shadow 可向文本应用阴影
text-decoration CSS3里面开始支持对文字的更深层次的渲染
(5)渐变效果
linear-gradient 线性渐变
radial-gradient 径向渐变
(6)媒体查询,多栏布局
6、HTML5新特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
7、常用居中布局
(1)使用定位
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
(2)使用定位加margin
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
(3)使用定位加translate
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
(4)使用flex布局
.div1 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 500px;
border: 1px solid red;
}
.div2 {
width: 300px;
height: 300px;
border: 1px solid red;
}
8、用纯CSS创建一个三角形
.div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
8、用CSS画圆
background-color: blue;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid red;
10、CSS3字号11/10/9/8px实现方法**
font-size: 12px;
transform: scale(0.91,0.91) ;
//首先自定义字号为12像素,因为浏览器支持的最小就是12像素,之后通过缩放来实现想要的字号:
11px = 11/12=0.9166666666666667
10px = 10/12=0.8333333333333333
9px = 9/12=0.75
8px = 8/12=0.6666666666
9、一个满屏品字布局如何设计
第一种真正的品字:
三块高宽是确定的;
上面那块用margin: 0 auto;居中;
下面两块用float或者inline-block不换行;
用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%,下面的div分别宽50%,然后使用float或者inline使其不换行。
10、三栏布局/圣杯布局/双飞翼布局
(1)绝对定位解决方案
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
1.这是三栏布局的中间部分</div>
<div class="right"></div>
</article>
</section>
(2)flexbox解决方案
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 120px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方案</h1>
1.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
11、为什么要初始化CSS样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
12、常见的兼容性问题
不同浏览器的标签默认的margin和padding不一样。{margin:0;padding:0;}
IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性。
渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“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识别*/
}
设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。hack:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
13、移动端适配解决方案
1、 viewport(scale=1/dpr)
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
device-width等于理想视口的宽度,设置width=device-width就相当于让布局视口等于理想视口。
initial-scale = 理想视口宽度 / 视觉视口宽度,设置initial-scale=1就相当于让视觉视口等于理想视口。
这时,1个CSS像素就等于1个设备独立像素,而且我们也是基于理想视口来进行布局的,所以呈现出来的页面布局在各种设备上都能大致相似。
2、rem+媒体查询
rem是css3新增的一个相对单位。rem为相对HTML根元素的大小,除了IE8及更早的版本外,其他浏览器都支持rem。
阿里早期开源了一个移动端适配解决方案 —— flexible。通过这种方案,我们在页面上统一使用rem布局。
核心代码:
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
上面的代码中,将html节点的font-size设置为页面clientWidth(布局视口)的1/10,即1rem就等于页面布局视口的1/10,这就意味着我们后面使用的rem都是按照页面比例来计算的。
这样我们只需要将设计稿的px转成对应的rem即可。
三、vm/vh
vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。
这种方案和上面的方案解决问题的思路一样。这个是需要将设计稿的px转成对应的vw,当然这种比例关系我们不用手动计算,webpack解析css时有个postcss-px-to-viewport插件,可以实现px到vw的自动转化。
这种方案同样存在上面提到的无法看更多内容的问题。另外,px转换成vw不一定能完全整除,因此有一定的像素差。
14、flex布局
- 什么是flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。目前被所有浏览器所支持。
- flex的几种常见属性
- flex-direction —— 用于指定Flex主轴的方向
row:默认值,表示Flex子项水平方向从左到右进行排列,此时水平方向上轴线为主轴方向
row-reverse:与row相反,水平方向轴线为主轴方向,Flex子项排列为从右向左进行排列
column:表示Flex子项垂直方向上从上到下进行排列,此时垂直方向上轴线为主轴方向
column-reverse:与column相反,垂直方向轴线为主轴方向,Flex子项排列为从下到上进行排列
-
justify-content —— 指定Flex子项在主轴方向上的对齐方式
flex-start:默认值,表示Flex子项与行的起始位置对齐
flex-end:表示flex子项与行的结束位置对齐
center:表示Flex子项与行中间对齐
space-between:表示两端对齐,中间间距相等
space-around:表示间距相等,中间间距是两端间距的二倍 -
align-items:定侧轴上Flex子项的对齐方式
stretch:默认值,当Flex子项未设置高度或者高度值为auto的时候,stretch起作用,将Flex子项的高度设置为行高度
flex-start:表示与侧轴开始位置对齐
flex-end:表示与侧轴结束位置对齐
center:表示侧轴方式上中间对齐baseline:表示基线对齐,项目的第一行文字的基线对齐 -
flex-wrap:用于指定Flex子项是否换行
nowrap:默认值,不换行
wrap:换行,溢出的Flex子项会自动放到下一行
wrap-reverse:表示反方向换行 -
align-content:用于多行情况下,多行的对齐方式
align-content:stretch(默认值)| flex-start | flex-end | center | space-between | space-around -
align-self:指定某Flex子项的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch