la prioridad de estilos CSS
Alta -----------------> Baja
atributo de contenido CSS
y por lo general el atributo de contenido: antes y: después de selectores de pseudo elemento utilizado en conjunción con, para insertar el contenido generado
| propiedad | significado |
|---|---|
| :antes de | Inserte la parte delantera |
| :después | Después se inserta |
Ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
h1:before{
content: "Hello";
}
h2:after{
content: url("https://www.w3school.com.cn/i/html5_new_note.png");
}
</style>
</head>
<body>
<h1>World</h1>
<h2>HTML</h2>
</body>
</html>
resultado
Uso de la propiedad de desbordamiento
| valor | significado |
|---|---|
| visible | El valor por defecto |
| auto | Si el contenido se recorta automáticamente agregar barras de desplazamiento |
| oculto | Se cortará automáticamente el exceso de contenido, y el contenido recortado no es visible |
| Desplazarse | Ha sido creado para mostrar una barra de desplazamiento |
<p class="abc" style="width:200px;height:50px ;overflow:visible">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:auto">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:hidden">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:scroll">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<hr>
resultados:
propiedades de la pantalla
Como elemento de pantalla se utiliza para mostrar conjunto
- Este valor se utiliza para hacer ninguno de los elementos esconder, usados típicamente para pre-hechos, visualización dinámica
- Este valor se muestra como elemento de bloque a nivel de bloque, el elemento antes y después del salto de línea será ,, su anchura y altura puede estar previsto en la parte inferior derecha y la izquierda margen interior y exterior
- Este valor se muestra elemento en línea en línea, ningún salto de línea antes y después del elemento no se puede establecer de altura y anchura de los márgenes interiores y exteriores
- El valor de fila inline-block se considera para estar dentro de los elementos de bloque, que tienen ambos el valor de los valores de bloque, anchura y atributos altura puede ser propiedades de deformación permanente, mientras se mantiene la característica no es un valor en línea de avance de línea
- hereda heredan del elemento padre de la configuración de pantalla
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
span.inline_box{
border: solid 1px #1fa8b4;
display: inline-block;
width: 100px;
text-align: center;
}
.inline{
display: inline;
}
</style>
</head>
<body>
<p style="display: none" id="demo">大家好。。。。。</p>
<button onclick="document.getElementById('demo').style.display=''">显示</button>
<button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
<p><span style="display: block">hello</span> word</p>
<div class="inline">hello </div>
<div class="inline">world</div>
<br>
<span class="inline_box"> HTML</span>
<span class="inline_box"> CSS</span>
<span class="inline_box"> JQuery</span>
</body>
</html>
resultados:
