enfoque CSS
- modelo de caja
- flotador
- localizar
modelo de caja
- marco
- acolchado
- margen
marco
border: border-width || border-style || border-color
div{
width:200px;
height:200px;
border-width:1px;
border-color:red;
border-style:none /solid/dashed(虚线)/dotted(点线)
border:1px red solid;
//上边框
border-top: 1px green dotted;
//左边框
border-left: 1px green solid;
}
<div>
</div>
//修改input的边框
input{
border:0;
border-bottom: 1px red dashed;
}
<input type="text">
Formar un borde de línea delgada
table,td{
border-collapse:collapse;//合并相邻边框
}
acolchado
padding: 0px 18px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
acolchado se suavizó con una altura y anchura de la caja.
1. Solicitar la caja 200 200
2. Sin embargo el relleno se ablandará cuadro
3. Entonces, ¿cómo asegurarse de que la caja 200 200 que?
4. Una sustracción
Box se centra horizontalmente
文本 行内元素 行内块元素 都可以通过 text-align:center
margin: 0 auto; //上下为0 ， 左右居中
margin-left:auto;
margin-right:auto; //auto 表示 自动充满
//注意 必须是块元素，且有宽度
Interior y márgenes exteriores claramente
* {
padding: 0;
margin: 0;
}
fusión margen
当两个块都分别 设置里 margin-bottom ， margin-top， 则两个块的间距不叠加，以最大的为准。
elementos anidados de fuera problema colapso vertical de
1. 增加border-top 或者padding-top
2. overflow:hidden
acolchado caso no afecta al tamaño de la caja
当盒子没有指明宽度
Las esquinas redondeadas (CSS3)
border-radius:50%;
border-radius: 10px 0
Shadow Box (CSS3)
box-shadow: h-shadow v-shadow blur spread color
transition : all 1s //动画
flotador
Experiencia flotante
Standard corrientes: elemento de bloque en una línea separada, de arriba a la abertura de descarga inferior.
Float: se cambia la etiqueta nivel de elemento
<style>
.up{
width:200px;
height:200px;
float:left;
}
.down{
width:300px;
height:300px;
float:left;
}
</style>
<div class = "up"> </div>
<div class = "down"> </div>
La mayor importancia de flotar, de manera que se pueden colocar horizontal div. de forma cómoda
propiedades flotantes
1, el flotador del flujo estándar, no ocupa la posición (hermanos de impacto detrás de diseño)
2. contenedor principal variable no puede pasar el relleno y el borde
3. un float: left; fila predeterminado convertidor de pantalla dentro de la característica de bloque
Versión del proceso y el diseño del corazón
Corazón edición (región visible)
proceso de disposición:
1. Determinar el tamaño de la parte de núcleo
2. Determinar bloque de línea
3 determina la disposición html
Precauciones de proyectos
li{
list-style:none;
}
claro flotador
-
¿Por flotado claro?
Cuando el padre no es la altura, y el flotador hijo, la altura del padre es 0; el objetivo es dejar claro el padre del flotador rodeado de niños
-
método de flotado transparente
a. el derecho adicional etiquetado
.father{
width:300px;
background-color:pink;
border: 1px solid red;
}
.big{
height:200px;
width:400px;
background-color:green;
float:left;
}
.small{
height:200px;
width:400px;
background-color:green;
float:left;
}
.footer{
width:300px;
background-color:yellow;
}
.clear{
clear:both; //left,right 或者 both
}
<div class="father">
<div class="big"> </div>
<div class="small"> </div>
<div class="clear"> </div> //额外标签法清除浮动
</div>
<div class="footer"> </div>
b. la propiedad de desbordamiento de etiqueta padre aumento
.father{
width:300px;
background-color:pink;
border: 1px solid red;
overflow:hidden; //hidden auto scroll
}
c. Claro flotador pseudo-elemento
.clearfix:after{ //正常浏览器清楚浮动
content:"";
display:block;
height:0;
clear:both;
visability:hidden;
}
.clearfix{ //ie6 ie7清除浮动
*zoom:1;
}
<div class="father clearfix">
<div class="big"> </div>
<div class="small"> </div>
</div>
d doble método de desminado pseudo-elemento
.clearfix:before,.clearfix:after{
content:""; //伪元素必备属性
display:table; //css3中的属性
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
localizar
background-position //背景定位
-
¿Por qué la orientación estudio?
Suspensión, y puede estar en cualquier lugar de composición tipográfica,
-
propiedad
Modo de posicionamiento y los bordes de offset
Arriba y abajo
abslute relativa estática fija;
static 定位： 默认；唯一的作用：取消定位 relative 定位：以自己的位置为基础，进行移动；但是原理的位置继续占有 Absolute 绝对定位 不占位置， （若父亲没有定位）以当前屏幕的位置为基准。（若父亲有定位），则以最近的父辈为基准。
Zijuefuxiang
通常的最佳实践就是：子是绝对位置，父亲是相对位置。
dos cuestiones
浮动不是完全 调标，因为字体不会被遮盖住，需要使用定位。
Posicionamiento de Caja centrada
加了定位或者浮动的盒子，margin auto就失效了
.center{
position:absolute;
left:50%;
margin-left: -100px;
}
posicionamiento fijo
在浏览器窗体中，不受父亲约束
conversión de modo en la posicionado fijamente
当盒子有浮动或者定位（absolute fixed），其显示模式会转换为行内块
nivel laminado (z-index)
只有定位盒子，才有该属性
resumen
