.
Elementy wbudowane
Domyślnie elementy śródliniowe nie zaczynają się w nowej linii ani nie zajmują całej szerokości rzutni. W rzeczywistości właściwości szerokości i wysokości nie mają zastosowania. W przeciwieństwie do elementów blokowych, elementy wbudowane nie zakłócają przepływu dokumentu.
Elementy śródliniowe mogą zawierać inne elementy i dane śródliniowe, ale nie elementy blokowe. Na przykład element akapitu może zawierać element wyróżnienia — ale nie element nagłówka.
Jeśli właściwości dopełnienia, obramowania i marginesu zostaną zastosowane pionowo, inne pola śródliniowe nie będą wypychane z pola wokół elementu. Jeśli jednak właściwości dopełnienia, obramowania i marginesu zostaną zastosowane poziomo, inne elementy śródliniowe zostaną odsunięte od ramki wokół elementu.
Wbudowane elementy poziomu obejmują , , , , , , , , , , , , , i — między innymi.
Oto pomocna ilustracja kluczowych różnic między elementami wbudowanymi i blokowymi. Ten przykład przy użyciu Bootstrap CSS wyświetla przycisk wbudowany i przycisk na poziomie bloku.
Źródło obrazu
Przykłady modelu pudełkowego CSS Przyjrzyjmy się teraz modelowi pudełkowemu CSS w akcji, korzystając z tych przykładów modelu pudełkowego CSS. Każdy przykład skupia się na określonej warstwie pudełka, przesuwając się od środka na zewnątrz. Zaczniemy od obszaru zawartości.
Przykład obszaru zawartości
Najbardziej wewnętrzny prostokąt, zwany obszarem zawartości, może zawierać tekst lub inne elementy wizualne.
Jego wymiary to szerokość i wysokość zawartości. Gdy są określone, atrybuty width i height określają krawędź zawartości lub obwód pola zawartości. Często szerokość i wysokość nie są określone, więc renderowana zawartość określa krawędź zawartości. Innymi słowy, obszar zawartości jest tylko tak szeroki i tak szeroki, jak to konieczne, aby pomieścić zawartość, która może być tylko jednym słowem. Jeśli element jest elementem blokowym, krawędź treści można również ustawić za pomocą minimalna szerokość , maksymalna szerokość , minimalna wysokość oraz maksymalna wysokość nieruchomości.
Spójrzmy na przykład standardowego modelu pudełkowego CSS.
W standardowym modelu pudełkowym CSS określone są atrybuty wysokości i szerokości. To określa rozmiar obszaru zawartości. Jeśli określono również właściwości dopełnienia, obramowania i marginesu, należy je dodać do szerokości i wysokości, aby obliczyć całkowity rozmiar elementu.
Załóżmy, że określasz szerokość treści na 400 pikseli i dodajesz dopełnienie 30 pikseli, obramowanie 10 pikseli i margines 10 pikseli. Wtedy całkowita szerokość pudełka wynosi 500. Otrzymasz tę sumę, dodając szerokość treści, padding-left i padding-right, border-left i border-right oraz margin-left i margin-right (400 + 30 + 30 + 10 + 10 + 10 + 10). Całkowita wysokość pudełka wynosi 250. Uzyskujesz to, dodając content-height, padding-top i padding-bottom, border-top i border-bottom oraz margin-top i margin-bottom (150 + 30 + 30 + 10 + 10 + 10 + 10).
Oto CSS:
Aquí está el código HTML:
<p>In a standard CSS box model, the height and width attribute is specified. This determines the size of the content area. If the padding, border, and margin properties are also specified, then they will be added to the width and height to calculate the total size of the element.</p>
<div>This text makes up the content layer of the box. Since I've added 30px padding, 10px border, and 10px margin, the total width of the box is 500. You get that by adding the content-width, padding-left and padding-right, border-left and border-right, and margin-left and margin-right (400 + 30 + 30 + 10 + 10 + 10 + 10). The total height of the box is 250. You get that by adding the content-height, padding-top and padding-bottom, border-top and border-bottom, and margin-top and margin-bottom (150 + 30 + 30 + 10 + 10 + 10 + 10). </div>
Aquí está el resultado:
Fuente de imagen
Como puede llevar mucho tiempo resumir el borde, el relleno y el margen para calcular el tamaño real del cuadro, puede utilizar un modelo de cuadro alternativo. Para "habilitar" este modelo, use la propiedad de tamaño de cuadro y configúrelo en "cuadro de borde". Esto permite que el navegador represente el campo (incluido todo menos el margen) al tamaño que establezca. Usaremos este modelo en el siguiente ejemplo.
ejemplo de relleno El relleno es el espacio entre el borde y el contenido de un elemento. El relleno es un elemento importante en el diseño web, ya que ayuda a que el contenido sea más visible y legible.
Puede definir el relleno de un elemento con las siguientes propiedades: forro superior , alineando , relleno-izquierda , objeto-ley o negado la propiedad relleno .
Si desea agregar la misma cantidad de relleno en los cuatro lados del área de contenido, puede establecer una propiedad truncada de relleno con un valor. Si desea establecer diferentes cantidades de relleno, puede utilizar el método largo. Usemos ambos métodos en el siguiente ejemplo.
Aquí está el código HTML:
<p>In the alternative CSS box model, a defined width or height attribute will determine not only the size of the contetn area but the size of the border, padding, and content areas of a box. If specified, thte margin will still have to be added to calculate the total size of the element. </p>
<div id="shorthand">Since I've set the box-sizing property to "border-box," the total width of the element will be 320px (the set width + margin-left and margin-right). Since the height of the div has not been explicitly defined, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box. In other words, its the height of the rendered text.
Aquí está el CSS:
Aquí está el resultado:
Fuente de imagen
Un ejemplo de fronteras La propiedad de borde nos permite agregar y diseñar una línea alrededor del área de relleno del contenido. El grosor, el color y el estilo de esta línea se pueden especificar con ancho del borde , Color del marco y estilo de borde propiedades o puede usar una abreviatura borde una propiedad para definir los tres. Los valores de estilo de borde incluyen sólido, punteado, discontinuo, doble, ranurado, lomo y ninguno.
Las dimensiones del área del borde son el ancho del cuadro del borde y la altura del cuadro del borde. Cuando se especifican, los atributos de ancho y alto determinan la circunferencia del área del borde. Si la propiedad de tamaño de cuadro se establece en border-box, también puede definir el tamaño del borde con min-width, max-width, min-height y max-height.
Usemos las propiedades max-width y min-height en el siguiente ejemplo. También usaremos tantas propiedades y valores como sea posible para mostrar la versatilidad del área límite.
Aquí está el CSS:
Aquí está el código HTML:
<p>In this CSS box model, a defined max-width constrains the content width of the heading and a defined min-height constrains the box height so that it;s taller than the rendered text.</p>
<blockquote>Using CSS, I can style each side of the border area of this blockquote to be unique. The border-right, border-left, border-top, and border-bottom properties are all defined with three values: the first defines its width, the second its style, and the third its color.
Aquí está el resultado:
Fuente de imagen
ejemplo de margen El margen es el espacio vacío que separa un elemento de sus vecinos y la capa más externa del modelo de caja CSS. Sus dimensiones son el ancho del cuadro de margen y la altura del cuadro de margen.
Su tamaño puede ser determinado por las siguientes propiedades: el margen izquierdo , margen a la derecha , margen superior , margen inferior propiedades o abreviatura margen propiedad.
Si se usa una propiedad corta y solo se define un valor, se aplica a todos los lados del elemento. Si se definen dos valores, el primer valor representa los márgenes superior e inferior, y el segundo representa los márgenes derecho e izquierdo. Si se definen tres valores, el primer valor representa el margen superior, el segundo representa el margen izquierdo y derecho y el cuarto representa el margen inferior. Si se definen cuatro valores, representan los lados superior, derecho, inferior e izquierdo, respectivamente.
Antes de profundizar en el ejemplo, es posible que se dé cuenta de que los márgenes y el relleno parecen similares. Si no está seguro de cuál es la opción correcta para un elemento o diseño en particular, considere las siguientes diferencias clave entre el margen CSS y el relleno:
El margen es el espacio fuera del área del borde y el relleno es el espacio dentro del área del borde. Los fondos de los márgenes siempre son transparentes, mientras que el fondo del área de relleno del campo está determinado por la propiedad de fondo del elemento. Los márgenes aumentados aumentan el espacio entre un elemento y los elementos adyacentes. El mayor relleno aumenta el tamaño del elemento. En CSS, los márgenes adyacentes de dos o más cuadros se pueden combinar para formar un margen "colapsado". Mientras que las áreas de los márgenes pueden curvarse verticalmente, las áreas de relleno no lo hacen. Por ejemplo, considere un modelo de caja CSS con un margen colapsado.
Digamos que un encabezado y un párrafo están apilados uno encima del otro. El margen inferior del encabezado es de 60 píxeles y el margen superior del párrafo es de 40 píxeles. Para especificar un margen vertical entre el encabezado y el párrafo, puede tener la tentación de agregar ambos márgenes para un margen total de 100 píxeles. Se vería algo como esto:
Fuente de imagen
Sin embargo, el margen vertical real sería de solo 60 píxeles. ¿Por qué? Porque ambos márgenes se curvan verticalmente. Así es como se vería realmente en el frente:
Fuente de imagen
Usando el modelo de campo CSS para su sitio El modelo de caja CSS es una de las bases del desarrollo de sitios web. Comprender este modelo le permitirá alinear mejor los elementos con otros elementos y crear diseños más complejos.
Navegación entre publicaciones Ir a Tienda
