Continguts:

1. Desbordament i retallat
1.1. Desbordament: la propietat 'overflow'
1.2. Retallat: la propietat 'clip'
2. Visibilitat: la propietat 'visibility'
1. Desbordament i retallat
Generalment, el contingut d'una caixa de bloc es troba confinat als límits del contingut de la caixa. En certs casos una caixa pot vessar (patir overflow), la qual cosa significa que el seu contingut es troba en part o totalment fora de la caixa, per ex. es pot donar que:


Sigui on sigui que tingui lloc el desbordament, la propietat overflow especifica si una caixa es retalla i com. La propietat clip especifica la mida i la forma de la regió de retall. El fet d'especificar una regió de retall petita pot originar el retallat de continguts que d'altra manera serien visibles.
1.2. Desbordament: la propietat 'overflow'
La propietat overflow especifica si el contingut d'un element block-level es retalla quan es desborda de la caixa de l'element (la qual actua com a bloc contenidor pel contingut).

Considerem el següent exemple de la cita d'un bloc (BLOCKQUOTE) que és massa gran pel seu bloc contenidor (establert per un DIV). El document font és:
   <DIV CLASS="ext">
      <BLOCKQUOTE>
         <P>Dos cossos s'atrauen amb una força directament 
         proporcional al producte de les seves masses i inversament
         porporcional al quadrat de la distància que els separa.
         <DIV class="atribuit-a">- Isaac Newton</DIV>
      </BLOCKQUOTE>
   </DIV>
el full d'estil que controla les mides i l'estil de les caixes generades:
	DIV.ext { 
                     width : 100px; height: 100px;
                     border: thin solid red;
        }

	BLOCKQUOTE { 
                     width : 125px; height : 100px;
                     margin-top: 50px; margin-left: 50px; 
                     border: thin dashed black
        }

	DIV.atribuit-a { text-align : right; }

com que el valor inicial de overflow és 'visible' aleshores el BLOCKQUOTE es formataria sense retallat, i quedaria una cosa semblant a això:



però si fixem overflow a 'hidden' per a l'element DIV, per altra banda, faria que el BLOCKQUOTE fos retallat pel bloc contenidor:



Mitjançant la propietat overflow també es podria demanar als agents d'usuari que suporten mecanismes visibles d'scroll, que en visualitzessin un perquè els usuaris puguessin tenir accés al contingut retallat.
1.2. Retallat: la propietat 'clip'
Una regió de retall (clipping region) defineix quina porció del contingut presentat d'un element és visible. Per defecte, la regió de retall té la mateixa mida i forma que la caixa o caixes de l'element. No obstant, la regió de retall pot ser modificada per la propietat clip.

La propietat clip s'aplica als elements que tenen la propietat overflow amb un valor diferent de 'visible'. Els ancestres de l'element també poden tenir regions de retall (en cas que la seva propietat overflow no sigui 'visible'); el que es presenta és la intersecció de les diverses regions de retall.

Si la regió de retall excedeix els límits de la finestra del document de l'agent d'usuari el contingut pot ser retallat a aquella finestra per l'entorn operatiu nadiu.

Les següents dues regles:
	P { clip: rect(5px, 10px, 10px, 5px); }
	P { clip: rect(5px, -5px, 10px, 5px); }
crearan regions de retall rectangulars, delimitades per línies discontínues en les següents figures:



Nota. En CSS2 totes les regions de retall són rectangulars. Futures versions de CSS2 permetran regions de retall no rectangulars.
2. Visibilitat: la propietat 'visibility'
La propietat visibility especifica si les caixes generades per un element es presenten o no. Les caixes invisibles encara afecten la disposició de la pàgina (cal inicialitzar la propietat display a 'none' per a suprimir també la generació de caixes).

Aquesta propietat es pot utilitzar en conjunció amb el scripts per a crear efectes dinàmics.

En el següent exemple, el fet de prémer qualsevol dels botons del formulari invoca una funció d'script definida per l'usuari que fa que la caixa corresponent esdevingui visible i les altres s'ocultin. Com que les caixes tenen la mateixa mida i posició, l'efecte és que una reemplaça l'altra. (El codi d'script és en un llenguatge hipotètic. Pot tenir o no efecte en un agent d'usuari capaç d'entendre CSS.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in } //visibility = visible;
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Tria un sospitós:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="sospitos1.jpg">
   <P>Nom: Al Capone</P>
   <P>Residència: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="sospitos2.jpg">
   <P>Nom: Lucky Luciano</P>
   <P>Residència: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.sospitos.org/processar-criminals">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='mostrar("container1");ocultar("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='mostrar("container2");ocultar("container1")'>
</FORM>
</BODY>
</HTML>
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos