1.img与background-image的区别
1)解析机制:img作为html标签解析,在html加载时加载,加载失败会显示撕裂的小图标;background-image作为属性在html加载完毕后再加载,加载失败不作显示。
2)本质区别:img占位,可以作为document对象操作;background-image不可以被操作。img属于内容型,background-image属于样式型。
3)长宽设置:img设置width或者height其中之一时会自适应,同时设置容易变形,background-image必须指定height,不然加载不出来,如果不指定width则会继承父元素的width,通常与-size、-repeat、-position配合使用。
4)SEO:img利于搜索引擎搜索,img标签有一个alt属性可以指定图像的替代文本,有利于SEO,并且在图片加载失败时有利 于阅读。
img标签:alt图像的代替文本;src图像的url。
5)语义准确性:img有明确的语义化要求
2.rgba()和opacity的区别
1)opacity作用于元素及元素中所有的内容(包括文字、图片) ,有继承性
2)rgba()只用于元素的颜色及背景色
3)当opacity属性的值应用于某个元素上时,把这个元素和它内容当作一个整体来看待,即使这个值没有被子元素继承。因此一个元素和它包含的元素都会有与元素背景相同的透明度,哪怕父子元素由不同的opacity的值。
ie低版本不支持opacity,需要写filter,因此为兼容,通常在需要使用opacity时书写如下:
.opacity4 { opacity: 0.4; filter:alpha(opaity=40); }
3.outline和border的区别
1)outline轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可以起到突出元素的作用
2)outline的效果将随元素的focus而自动出现,相应的由blur自动消失,这些都是浏览器的默认行 为,不需要js配合css来控制
3)outline不占据空间,不会像border那样影响元素的尺寸或者位置。
border的使用:按顺序设置如下属性或者inherit(继承父元素的border属性)
- border-width
- border-style
border-style:dotted solid double dashed; (上,右,下,左)
- border-color
outline的使用:按顺序设置如下属性或者inherit(继承父元素的outline属性)
- outline-color
- outline-style
- outline-width
4.css动画
animation与transition:
创建动画序列,需要animation属性或其子属性,属性允许配置动画时间、时长和动画细节。 动画的实际表现由@keyframes规则实现。可以设置多个帧。
keyframes规则:
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector | 必需。动画时长的百分比。 合法的值:
|
transtion也可以实现动画,但强调过渡,是元素的一个或多个属性变化时产生的过渡效果,同一个元素 通过两个不同的途径获取样式,而第二个途径当某种改变发生时(如:hover)才能获取样式,这样就会 产生过渡动画。在更改css属性时控制动画时间,使用transition时对于基于webkit的浏览器需要厂商前缀。只设置两个状态。
transition: <property> <duration> <timing-function> <delay>;
-webkit-transition: <property> <duration> <timing-function> <delay>;
animation和transition大部分属性相同,都是随时间改变元素的属性值,区别是transition需要触发一 个事件才能改变属性;animation不需要触发任何事件随时间改变属性。transition为2帧,从from…… to ,animation可以一帧一帧的。
5.css布局
水平居中布局:
1.块级元素撑满整行,当宽度设置后使用margin:auto即可。
2.text-align:center设置文本对齐方式,对于行内元素,父元素设置text-align:center,子元素display:inline-block。
3.flex布局,使用justify-content: center
4.position:absolute绝对定位,将left:50%
垂直居中布局:
1.上下内边距相等法:padding实现垂直居中【若指定了元素的绝对尺寸,padding不要不用百分比了】
2.父元素高度确定的单行文本使用line-height法
属性line-height设置行高,将行高设置与父元素的高度相等,行高大于字体大小,文字的上下部分会留有相同的空间。
当需要垂直居中图片时,也可以使用line-height。
3.css表格法
vertical-align:middle; 只对行内元素或者是单元格起作用,对块级元素不起作用。
css表格法即将父元素声明为display:table 子元素声明为:display:table-cell。支持内容的动态改变,但是不支持旧版浏览器。
4.绝对定位和负边距法:子元素绝对定位,top left定义为50%后根据子元素的长宽定义margin的大小。(上 右 下 左)
top属性定义了一个定位元素的上外边距(margin)边界与其包含块上边界之间的偏移。
5.绝对定位拉伸法:子元素绝对定位,使用margin:auto 并定义长宽
【4 5 可能出现内容超出容器的情况】
6.flex
display:flex; align-items:center;
7.利用一个空的浮动元素来控制主要内容的位置,这个浮动元素width:100% height:50%,margin-bottom:-(h/2)px h为主要内容的高度,注意设置clear:both来消除浮动、
垂直+水平居中布局:
居中元素的宽高已知:
1.绝对定位top left与margin设置
2.绝对定位与margin:auto;
3.绝对定位top left 用calc计算
居中元素的宽高未知:
1.flex: align-items:center; justify-content:center;
2.transform的translate方式
transform属性用来对元素进行旋转、缩放、倾斜、移动。translate(x,y)定义2D转换,translate3d(x,y,z)定义3D转换。
两栏布局,要求左边固定:
1.float+右边margin-left设置
2.绝对定位,左边absolute或者;fixed,设置宽度,右边margin-left设置。
3.table,父元素display:table,子元素display:table-cell,左边的设置宽度,则右边自适应。
4.flex,父元素display:flex,左边子元素设置宽度,右边设置flex:1来获得剩余宽度,不用获取。
三栏布局:
1.三个元素,左右两边浮动元素float:left right,中间根据两边宽度设置margin
2.父元素相对定位,子元素绝对定位,两边设置left:0 right:0,中间根据宽度设置margin
3.左右float,中间构建BFC,overflow:hidden
4.table,按顺序写,设置宽度,将自适应。
5.圣杯布局 (31条消息) css经典布局——圣杯布局_越努力,越幸运!-CSDN博客_圣杯布局
6.双飞翼布局 (31条消息) css经典布局——双飞翼布局_越努力,越幸运!-CSDN博客_双飞翼布局
!!!注意圣杯和双飞翼的区别!!!在对被遮住的center部分的处理,是设置为relative,调整左右的left right,修改container的padding,还是在center部分添加一个div容纳内容。
flex布局:依赖属性display、position,在设置为flex布局之后,子元素的float、clear和vertical-align的属性将会失效。
容器属性(为父元素设置的):flex-direction 决定主轴方向,默认值为row;flex-wrap;flex-flow;
point:
justify-content:横轴方向上弹性盒子在主轴上的排列
align-items:弹性盒子中的元素在纵轴上的排列方式
align-content:弹性盒子在侧轴上的对齐方式
元素属性(为子元素设置的):order元素顺序,align-self为单个元素覆盖align-items。
水平竖直居中布局的实现:
父元素{ display:flex; justify-content:center; align-items:center; }
6.多端适应
静态布局:绝对宽高,垂直水平居中,设计一个layout在页面宽高调整时出现滚动条,设置min-width等。
流式布局:高度和文字使用px为单位,宽度使用百分比,在屏幕分辨率发生变化时,元素大小变化而布局不发生改变。当屏幕宽度过大的时候,元素宽度会被拉的很长,但文字大小仍未发生变化,不协调。在相对其原始设计而言过大和过小的屏幕上都不能正常显示。
自适应布局:针对不同分辨率范围设计的多个静态布局,但在每个静态布局中元素不随窗口大小变化而发生变化。使用@media媒体查询给不同介质和尺寸的设备切换不同的样式,保证在优秀的相应范围设计下能够给适配范围的设备最好的体验。
响应式布局:自适应布局与流式布局、弹性布局结合,每个分辨率下都会有一个样式,位置和大小都会变化。使用@media媒体查询和网格系统,配合相对布局单位。
注意弹性布局!(flex?)