Modelo de caja
ancho
alto
relleno
borde
margen
ancho :
ancho: valor de longitud | porcentaje |
ancho máximo automático ; ancho
máximo: valor de longitud | porcentaje |
ancho mínimo automático : ancho mínimo
: valor de longitud | porcentaje | auto
Descripción: establece el ancho del contenido de los elementos a nivel de bloque y los elementos de reemplazo
ie6 no admite el ancho / alto máximo y mínimo
La etiqueta del bloque ocupa una línea completa, llena de color de fondo, se puede configurar el ancho y la altura
Altura:
altura: valor de longitud | porcentaje |
altura máxima automática : altura
máxima: valor de longitud | porcentaje |
altura mínima automática : altura mínima
: valor de longitud | porcentaje | automático
Descripción: establece la altura del contenido de los elementos a nivel de bloque y los elementos de reemplazo
Atributos del
borde : ancho del borde ancho del
borde color del borde color del
borde estilo del borde estilo del borde
border-width: thin | medium | thick | Valor de longitud
border-color: color | transparent
establecer border-style, border-color, border-widht para tener el mismo estilo en las cuatro direcciones del borde. 
Abreviatura:
borde: ancho estilo color
border-left: ancho Color de estilo
.one{
border: 10px #e899ee solid;}
.two{
border-top:5px red solid;
border-Left:1epx blue dotted;
border-right:1epx blue dotted;
border-bottom :5px red solid;
}
El valor del atributo de relleno no puede ser negativo
El espacio que ocupa el recuadro en la página web no solo está relacionado con los atributos de ancho y alto, sino también con el relleno.
.one{
width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
width:100%;height:100%;background-color:#ececec;}
Márgenes
margen similar a abreviaturas y relleno
De forma predeterminada, el elemento de nivel de bloque html correspondiente tiene márgenes, y el cuerpo predeterminado es 8px
Por lo general, anula el estilo predeterminado
body,h1,h2,h3,h4,h5,h6,p{
margin:0;}
El valor del margen es automático, que realiza el efecto de visualización del centrado en la dirección horizontal
. El margen es calculado por el navegador
Cálculo de la anchura y la altura de la
caja estándar para el colapso de los márgenes :
además de la estándar, también hay cajas IE
¿Qué página web elegir?
De hecho, si hay una declaración de tipo de documento doctype, use el estándar, de lo contrario el navegador elige la
clasificación del elemento HTML:
elemento a nivel de bloque, ocupa una línea
p div h1 ~ h6 ul li ol dl dt dd, etc.
Elementos en línea (elementos en línea), una línea muestra
span a em, etc.
Los elementos en línea no tienen configuraciones de atributos de ancho y alto
También hay un img especial que es un elemento de bloque en línea de bloque en línea, que se presenta como en línea, pero tiene las características correspondientes de bloque
pantalla: ninguno no se mostrará
¿Es posible configurar el nivel de bloque como un elemento en línea configurando? La respuesta es sí.
Se puede configurar con el atributo de visualización
<head>
.one{font-size:Opx;}
div{dispLay:inline;
font-size:16px;}
</head>
<div class="one">
<div>display </div>
<div>display </div>
<div>display </div>
</div>
paraHay espacios entre los elementos en líneaAdemás de eliminar el salto de línea para resolver el problema, también se puede lograr configurando la propiedad css correspondiente arriba
para resumir
SIGUIENTE:
flotar flotar!
Una palabra del día:
prevalente / de moda reemplazar popular
