css引入方法:link与import方法区别
差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom(document object model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
img属性alt和title的区别
alt=""图片加载失败时显示的文本
title=""鼠标移入时显示的文本
字体大小单位em和rem的区别
em是父元素字体大小的倍数
rem是根元素html字体大小的倍数
可以取负值的属性
top
bottom
left
right
margin
text-indent
background-position
z-index
body设置min-width属性
body{
min-width: 1240px;防止左右拖拽滚动条右侧无板块颜色问题
}
BFC块级格式化上下文,是一个独特的渲染区域
BFC布局规则
一、内部的Box会在垂直方向,一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
三、每个元素的margin box的左边, 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时,浮动元素也参与计算
触发BFC的条件
html本身就是BFC
float不为none
position为absolute和fixed
overflow不为visible
display:inline-block/flex/inline-flex/table-cell/table-caption
css3新增的属性
边框倒角border-radius、
禁止用户更改元素尺寸resize:none;、
多背景图background:url(),url(),url();
及其他以后在加上..
***浏览器前缀
-webkit-:谷歌google chrome和Safari浏览器
-moz-:火狐mozilla firefox
-o-:欧朋Opera
-ms-:IE浏览器
例如:
-webkit-transition:
background:-webkit-linear-gradient();