Base de front-end para consolidar el punto de conocimiento cuatro

68. Describe un archivo CSS "restablecido" y cómo usarlo. ¿Conoce normalize.css? ¿Entiendes la diferencia entre ellos?

Hay muchos estilos de restablecimiento. Cualquier desarrollador de front-end debe tener un archivo CSS de restablecimiento de uso común y saber cómo usarlos. ¿Lo hacen a ciegas o saben por qué lo hacen? La razón es que los diferentes navegadores tienen diferentes estilos predeterminados para algunos elementos. Si no los maneja, habrá riesgos necesarios o ocurrencias más dramáticas en diferentes navegadores.
  Puede utilizar Normalizar en lugar de su archivo de estilo de restablecimiento. No restablece todos los estilos, solo proporciona un conjunto de valores de estilo predeterminados razonables. Puede hacer que muchos navegadores alcancen un nivel coherente y razonable sin alterar otras cosas (como los títulos en negrita).
  En este sentido, es imposible hacer cada reinicio. Tiene más de un restablecimiento y se ocupa de peculiaridades que nunca debe considerar, como elementos de audio HTML inconsistentes o altura de línea inconsistente.

69. ¿Cuáles son los atributos de visualización? ¿Qué se puede hacer?

visualización: los elementos de bloque en línea se convierten en elementos a nivel de bloque
visualización: los elementos de nivel de bloque en línea se convierten
en elementos en línea visualización: el bloque en línea se convierte en elementos en línea

70. ¿Qué propiedades CSS se pueden heredar?

Heredable: tamaño de fuente color de la familia de fuentes, ul li dl dd dt;
no heredable: borde relleno margen ancho alto;

71. ¿Cómo calcular el algoritmo de prioridad CSS?

! important> id> class> tag
! important tiene mayor prioridad que en línea
* Principio de prioridad más cercano, la definición de estilo es la más cercana;
* El último estilo cargado prevalecerá;

72. ¿Cuál es la diferencia entre la etiqueta b y la etiqueta fuerte, la etiqueta i y la etiqueta em?

Este último tiene semántica, mientras que el primero no.

73. ¿Cuáles son los elementos en línea, los elementos a nivel de bloque y el modelo de caja?

1. Elemento en línea

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
span – 常用内联容器,定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

2. Elementos a nivel de bloque

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易,也是css layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容)
noscript – )可选脚本内容(对于不支持script的浏览器显示此内容)
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

3. El modelo de caja CSS consta de cuatro partes:

内容、填充(padding)、边框(border)、外边界(margin)。

74. ¿Qué son los selectores y cuál es la fórmula de cálculo de prioridad? ¡Estilo en línea y! importante ¿qué prioridad es mayor?

#ID> .class> Selector de etiquetas! Important tiene alta prioridad

75. Quiero que el elemento en línea esté a 10px del elemento anterior, ¿puedo agregar margin-top y padding-top?

margin-top, padding-top no es válido

76. ¿Qué es el modelo de caja de CSS?

内容, borde, margen, relleno

77. ¿Cuáles son los atributos de visualización? ¿Qué se puede hacer?

visualización: los elementos de bloque en línea se convierten en elementos a nivel de bloque
visualización: los elementos de nivel de bloque en línea se convierten
en elementos en línea visualización: el bloque en línea se convierte en elementos en línea

78. ¿Qué propiedades CSS se pueden heredar?

Heredable: tamaño de fuente color de la familia de fuentes, ul li dl dd dt;
no heredable: borde relleno margen ancho alto;

79. ¿Cómo calcular el algoritmo de prioridad CSS?

! important> id> class> tag
! important tiene mayor prioridad que en línea

  • Principio de prioridad más cercano, la definición de estilo es la más cercana;
  • Sujeto al último estilo cargado;

80. ¿Cuál es la diferencia entre text-align: center y line-height?

Text-align es una alineación horizontal y la altura de la línea está entre las líneas.

81. ¿Cuáles son las tres capas de las páginas frontales y qué son? ¿Cual es el rol?

Capa de estructura Html capa de
presentación
comportamiento CSS capa js

82. Escriba una tabla y el CSS correspondiente, de modo que las filas impares de la tabla tengan un fondo blanco, las filas pares sean grises y el mouse hacia arriba tenga un fondo amarillo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        body{
    
    margin:0;}
        table{
    
    border:1px solid #ddd;}
        tr:nth-child(odd){
    
    background-color: #fff}
        tr:nth-child(even){
    
    background-color: #666}
        tr:hover{
    
    background-color: yellow}
    </style>
</head>
<body>
    <table>
        <th>表格标题</th>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

Supongo que te gusta

Origin blog.csdn.net/u013034585/article/details/105089363
Recomendado
Clasificación