SchoolWeb1--基于课堂教学所汲取的知识点1

SchoolWeb1

导航标签

• nav标签

• div + a 标签（将a设置为行内块元素）

• ul + li + a 标签

网格属性display：grid

display: grid;/* 设置网格布局的列数为4列，其中第一列为200px，其余三列为等宽 */grid-template-columns:200px repeat(3,1fr);            /* 设置网格自动行高，最小值为120px，最大值为自动 */grid-auto-rows: minmax(120px,auto);    /* 设置网格之间的间距为10px 水平间隙和垂直间隙 */grid-gap:10px 10px;     

• grid-columns：n/m表示从第n列线跨到第m列线

• grid-rows：n/m表示从第n行线跨到第m行线

nth-child（n）

此选择器代表选择父类标签中的第n个子元素，并设置其样式，例如

.con:nth-child(5){    /* 选择第5个.con元素 */background: #00f;  /* 设置背景颜色为蓝色 */grid-column:1/5;    /* 设置网格列范围为第1列到第5列 */}

设置CSS样式注意事项

• 优先设置类，id，标签选择器，其次再设计动画效果

• 如果要设置两个块元素在同行内摆放，应将两个块元素分别设置为向左浮动和向右浮动

• 如果想让一个子标签跟随父标签对齐，则需要让子标签中加入属性position：absolute，同时要在父标签中加入属性position：relative使其变成相对定位，才可以使子标签和父标签对齐

对象的显示与隐藏

• display：none表示隐藏该标签内元素，在悬停样式中再使用display：block来显示隐藏的元素

• visibility：hidden表示隐藏元素，visibility：visible表示显示隐藏的元素

• overflow：hidden也可以用来隐藏元素，但需要设置此选择器的height属性为0px才可以使元素隐藏，只需在悬停样式中加入高度的属性就可以使元素显示出来