Tabla de contenido
Seis formas de posicionamiento de posición.
El método de centrar elementos arriba, abajo, izquierda y derecha
Dos columnas. El santo grial, el diseño de doble ala
Elementos vacíos comunes a nivel de bloque, a nivel de línea
La diferencia entre src y href
La diferencia entre enlace e @import
Nuevas funciones de HTML5 y CSS3
modelo de caja
En nuestra página HTML, cada elemento se puede considerar como un cuadro, y este cuadro consta de cuatro partes: área de contenido (contenido), margen interior (relleno), área de borde (borde) y área de borde exterior ( margen )
Modelo de caja estándar (navegadores que no son IE)
tamaño de cuadro: cuadro de contenido; el ancho total de un bloque (el ancho de la página) = ancho + margen (izquierdo y derecho) + relleno (izquierdo y derecho) + borde (izquierdo y derecho)
Modelo de caja extraña (navegador IE)
box-sizing: border-box; ancho total de un bloque = ancho + margen (izquierdo y derecho) (es decir, el ancho ya incluye los valores de relleno y borde)
modelo de caja js
| elemento.offsetParent _ |
Obtiene el elemento principal más cercano con posicionamiento |
| elemento.desplazamientoIzquierda _ |
La distancia relativa al lado izquierdo del elemento padre |
| elemento.offsetWidth _ |
Obtenga el ancho ocupado por el elemento en sí, incluido el contenido, el borde y el relleno |
| elemento.offsetHeight _ |
Obtenga la altura ocupada por el elemento en sí, incluido el contenido, el borde y el paddind |
| elemento.clientTop¶ _ |
Obtiene el tamaño del borde superior del elemento. |
| elemento.clientLeft _ |
Obtiene el tamaño del borde izquierdo del elemento. |
| elemento.clientWidth _ |
El elemento obtenido incluye relleno y el ancho del contenido, sin bordes |
| elemento.clientHeight _ |
El elemento obtenido contiene relleno, la altura del contenido, sin borde. |
| ventana.innerWidth | Obtenga el ancho y la altura del área habilitada del navegador |
Cómo obtener y establecer el ancho y alto del contenido de la caja
ES DECIR: dom.currentStyle.width/height
No-IE: window.getComputedStyle(dom).width/height
var obj = document.getElementById("box");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // 非IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
BFC
¿Qué es BFC?
BFC significa " 块级格式化上下文". BFC es un entorno de diseño independiente, que protege los elementos internos de las influencias externas y no afecta a los externos. BFC es un método de diseño CSS
Cómo activar BFC
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flexAplicación de BFC
1 se puede utilizar para el diseño adaptable
Usando este principio de BFC, se puede realizar un diseño de dos columnas, con ancho fijo a la izquierda y autoadaptación a la derecha. No se afectarán entre sí, incluso si las alturas no son iguales.
Agregue flotante al cuadro de la izquierda, agregue desbordamiento: oculto al cuadro de la derecha; conviértalo en un BFC, puede eliminar la influencia del cuadro izquierdo externo en él debido a la flotación
2 pueden limpiar el flotador
Cuando un elemento secundario en un elemento principal está configurado para flotar, la altura del elemento principal no está configurada. En este momento, el elemento secundario está fuera del flujo del documento y el elemento principal no puede percibir la altura del elemento secundario. haciendo que el elemento padre colapse.
En este momento, agregar overflow: hidden / auto al elemento principal y convertirlo en BFC puede resolver este problema.
3 Resolver superposición de margen vertical
Agregue un elemento vacío en el medio, configure el desbordamiento del elemento: oculto
claro flotador
¿Por qué limpiar el flotador?
Clear float es principalmente para resolver el problema de que la altura interna del elemento principal es 0 debido a la flotación del elemento secundario
método para borrar el flotador
1. Método de etiqueta adicional: para quién borrar el flotador, agregue una etiqueta en blanco adicional después
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}2. El padre agrega el método de desbordamiento:
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}3. Use el pseudo-elemento after para borrar el flotante:
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}4. Use los pseudoelementos dobles antes y después para borrar el flotante: el uso es el mismo que el anterior
Seis formas de posicionamiento de posición.
| estático | Sin posicionamiento, se puede utilizar para cancelar el posicionamiento anterior |
| relativo | Posicionamiento relativo, relativo a su propia alineación, el elemento no se cae de la etiqueta y sigue ocupando un lugar |
| absoluto | Posicionamiento absoluto, hijo y padre, posicionamiento según el elemento padre con posicionamiento, si no hay elemento padre buscarlo desde el superior hasta el cuerpo Off-label no ocupa espacio |
| fijado | Posicionamiento fijo, siempre para posicionamiento corporal, off-label no ocupa espacio |
| tu heredas | Heredar el posicionamiento del elemento principal |
| pegajoso | Posicionamiento pegajoso, efecto techo, se adhiere automáticamente a la cabeza cuando toca la cabeza, y el posicionamiento no es válido si no toca la cabeza |
El método de centrar elementos arriba, abajo, izquierda y derecha
1 Hijo y padre, el elemento hijo establece arriba y a la izquierda al 50 %, y luego puede usar fusionar arriba/a la izquierda al -50 % cada uno, o puede usar transfrom para cambiar sus propios ejes x e y en -50 %
2 Usar diseño elástico flexible
3 Después de separar al hijo del padre, configure el desplazamiento de la parte superior/izquierda/inferior/derecha del elemento secundario en 0 y luego configure el margen en automático
diseño flexible
Concepto básico de flexión
En 2009, W3C propuso una nueva solución: el diseño flexible, que puede implementar varios diseños de página de una manera simple, completa y receptiva. Actualmente es compatible con todos los navegadores, lo que significa que ahora es seguro usar esta función.
Los elementos que adoptan el diseño Flex se denominan contenedor Flex (contenedor flexible), o "contenedor" para abreviar. Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, denominados elementos flexibles (elemento flexible), denominados "elementos"
Después de configurar el diseño Flex, los atributos y del elemento secundario floatno serán válidosclear,positionvertical-align
Habilitar diseño flexible
display:flexpropiedades del contenedor flexible
| dirección de flexión |
determina la orientación del eje principal (es decir, la dirección en la que se organizan los elementos
|
| envoltura flexible |
Establecer si el artículo se envuelve
|
| flujo flexible |
es una forma abreviada de flex-directionatributo y atributo, y el valor predeterminado esflex-wraprow nowrap |
| justificar-contenido |
Define la alineación de los elementos en el eje principal
|
| alinear elementos |
定义项目在侧轴上如何对齐 一根侧轴的情况下
|
| align-content |
定义了多根侧轴线的对齐方式。
|
flex项目的属性
| order | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 |
| flex-shrink | 定义了项目的缩小比例 默认为1，即如果空间不足，该项目将缩小 设置为0，项目不会缩小 |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间 |
| flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto |
两栏。圣杯，双飞翼布局
两栏布局
- 左边浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素影响
三栏布局
- 圣杯布局和双飞翼布局两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
圣杯布局来源于文章In Search of the Holy Grail，
而双飞翼布局来源于淘宝UED。
虽然两者的实现方法略有差异，
不过都遵循了以下要点：
* 两侧宽度固定，中间宽度自适应
* 中间部分在DOM结构上优先，以便先行渲染
* 允许三列中的任意一列成为最高列
* 只需要使用一个额外的<div >外层 标签
圣杯布局
1 主体部分是由主体container包裹的center,left,right三列，其中center定义在最前面
2 主体设置 padding-left: 200px; padding-right: 150px; 为左右两列预留出相应的空间
3 随后分别为三列设置宽度与浮动，同时对footer设置清除浮动
4 使用负外边距，将left放置到之前预留出的位置上
5 使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置
6 右侧同样
优点：
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载
1 双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2 将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间
3 将right通过margin-left放置到预留位置
4 左侧同样
总结
圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构
而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小
常见的块级、行级、空元素
- 行内元素有：span a b i select strong
- 块级元素有：div p h1-h6 ul table from ul ol li dl dt dd…
- 空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>
css Hack
在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。用来兼容IE
条件Hack
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->只有在IE可以被解析，其他浏览器都是当做注释
属性Hack
*color:#f00; / * For IE7 * /
_color:#ff0; /* For IE6 */ }IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线”
选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */比如IE6能识别 *html .class{}
IE7能识别*+html .class{}
写CSS hack需要遵循以下三条原则：
- 有效： 能够通过 Web 标准的验证
- 只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
- 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉
滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。
src与href的区别
href 是指向网络资源所在位置，建立和当前元素之间的链接，用于超链接。
src是指向外部资源的位置
在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内
link与@import区别
页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：
- link是 标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
- link方式的样式的权重 高于@import的权重；
HTML5与CSS3的新特性
css3
| 常规选择器 | :last-child 选择元素最后一个孩子 :first-child 选择元素第一个孩子 :nth-child(1) 按照第几个孩子给它设置样式 :disabled 属性选择器 选择每个禁用的dom元素 |
| 伪类选择器 | a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上 |
| 伪元素选择器 | ::before {} 选择器在被选元素的前面插入内容和定义css ::after {} 选择器在被选元素的后面插入内容和定义css :first-letter 选择该元素内容的首字母 :first-line 选择该元素内容的首行 |
| 背景 | background-size：规定背景图片的尺寸 background-origin：规定背景图片的定位区域 |
| 边框 | border-radius： 圆角 box-shadow / text-shadow： 阴影 border-image： 边框图片 |
| 文本效果 | text-shadow 向文本添加阴影 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 |
| 渐变效果 | background-image: linear-gradient(线性渐变) background-image: radial-gradient(径向渐变 |
| 变形 | transform:rotate 旋转 transform:scale 缩放 transform:translate 位移 |
| 过渡 | transition : 过度的地方(color/width等) ，时间(1s/.5s) , 状态( linear / ease 等) |
| 动画 | @keyframes 定义动画名称及动画的行为 animation 设置动画相关值 animation-name: fadeIn 调用动画 |
HTML5
| 语义化标签 |
header 定义了文档的头部区域 footer 定义了文档的尾部区域 nav 定义文档的导航 section 定义文档中的结构标签 article 定义页面独立的内容区域 aside 定义页面的侧边栏内容 |
| 表单类型增强 |
color 主要用于选取颜色 date 从一个日期选择器选择一个日期 email 包含 e-mail 地址的输入域 month 选择一个月份 search 用于搜索域 url URL 地址的输入域 |
| 新增的表单属性 |
placehoder 简短的提示信息 min 和 max 设置元素最小值与最大值 required 是一个 boolean 属性。要求填写的输入域不能为空 |
| html5 新事件 |
onresize 当调整窗口大小时触发 ondrag 当拖动元素时触发 onscroll 当滚动元素滚动元素的滚动条时触发 onerror 当错误发生时触发 onmousewheel 当转动鼠标滚轮时触发 |
| 音频视频标签 |
audio 音频标签 video 视频标签 |
| 本地存储 | localStorage 永久存储，除非手动删除或代码删除 sessionStorage 关闭当前会话删除 |
浏览器兼容
不同的浏览器，浏览器的内核是不同的，所以各个浏览器对网页的解析存在一定的差异
浏览器的内核分为两种，渲染引擎，js引擎，所以，兼容问题一般是指css兼容 js兼容
css的兼容
问题： 不同浏览器的标签默认的margin和padding不同
解决方案：
1 通配符 * 设置内外边距为0
2 全局引入一个官方的样式重置表
问题：css3的新属性不兼容
解决方案：加浏览器的前缀来解决低版本浏览器不兼容问题
| -moz- | 火狐浏览器 |
| -webkit- | 谷歌浏览器 / 苹果浏览器等使用Webkit引擎的浏览器 |
| -o- | 欧朋浏览器 |
| -ms- | IE浏览器 |
都有什么css3不兼容
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
问题：块属性标签flot后，又有横行的margin情况下，IE 浏览器margin加倍的问题
解决方案：使用 display:inline 将这个块转换为行内元素
问题：. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度
解决方案：
- 给超出高度的标签设置overflow:hidden;
- 或者设置行高line-height 小于你设置的高度。
问题：IE浏览器div最小宽度和高度的问题
解决方案：
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
问题：超链接访问过后hover样式就不出现的问题
解决方案：将四个伪类选择器按照固定的顺序排列使用
a:link {} // 未访问前
a:visited {} // 访问之后
a:hover {} // 鼠标划过
a:active {} // 点击不松开的时候问题：图片默认有间距，使用通配符也无法清除
解决方案：
1 给所有图片设置flot-left
2 因为是写代码时不在一行，默认羽有个文字间距，用一个div包裹，设置 font-size：0 即可
浏览器css兼容的常用方法：css Hack
JS的兼容
问题：事件绑定的不同
IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){ },false);
解决方案：使用 if 判断当前浏览器或者 try catch
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器，ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
或
var x = document.getElementById("myBtn");
try {
x.addEventListener("click", myFunction);
} catch(x.attachEvent){
x.attachEvent("onclick", myFunction)
}问题：event事件对象问题
火狐不支持不传递形参，直接接受event为事件对象
解决方案：在事件里做一个 || 来兼容
document.onclick=function(ev){ //谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
}
document.onclick=function(){ //谷歌和IE支持，火狐不支持；
var e=event;
}
document.onclick=function(ev){ //兼容写法；
var e=ev||window.event;
}
Problema: problema event.target (objeto fuente del evento)
IE: eventosrcElement
Navegadores estándar: event.target
Solución: juzgue el navegador actual por si o prueba o expresión ternaria
event = event.srcElement?event.srcElement:event.target;Problema: Los valores de estilo no interlineal de los elementos obtenidos son diferentes, es decir, no se establece el ancho y el alto del cuadro cuyo ancho y alto se expanden automáticamente
IE: navegador estándar dom.currentStyle['width'] :window.getComputedStyle(obj, null)['width']
Solución: juzgar el navegador actual por si o probar
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
return obj.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(obj, null)[attr];
}
}
Problema: evitar el burbujeo de eventos y el comportamiento predeterminado
w3c evita el burbujeo e.stopPropagation() evita el comportamiento predeterminado e.preventDefault()
IE evita el burbujeo e.cancelBubble=true evita el comportamiento predeterminado e.returnValue=false
Solución: juzgar el navegador actual por si o probar
//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
Problema: compatibilidad con ajax
IE: ActiveXObject
Otro: xmlHttpReuest
Solución: juzgar el navegador actual por si o probar
var oAjax = null;
if(window.XMLHttpRequest){
// 标准浏览器
oAjax = new XMLHttpRequest();
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}