CSS学习笔记2 | 青训营

用户33135440013
59 阅读5分钟

Display显示

隐藏

1.h1.hidden {visibility:hidden;}：仍占布局空间

2.h1.hidden {display:none;}：不占空间

块和内联

li {display:inline;}：把列表项显示为==内联（行内）元素==，列表变为同一行中显示

span {display:block;}：把span元素作为==块元素==

{display:inline-block} -- 显示为==内联块元素==，表现为同行显示并可修改宽高内外边距等属性

PS：块级元素 vs 行内元素 vs 行内块级元素

div是块级元素，会占据一行，而span为行内元素

  • 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；
  • 块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效；
  • 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；
  • 行内块级元素又同时拥有块级元素和行内元素的特点。

块级元素可容纳块级元素和行内元素

Position定位

position属性的5个值：static、relative、fixed、absolute、sticky

1.static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

2.fixed 定位

元素的位置相对于浏览器窗口是固定位置。需要紧跟设置top、right等属性表示其固定的坐标位置。

Fixed定位使元素的位置与文档流无关，因此不占据空间，和其他元素重叠。

3.relative 定位

相对定位元素的定位是相对其正常位置。需要紧跟设置top、right等属性，用正负表示偏离位置。

4.absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；需要紧跟设置top、right等属性表示其固定的坐标位置。

5.sticky 定位

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

Safari 需要使用 position: -webkit- prefix

重叠元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

image.png

更改光标

<span style="cursor:auto">auto</span>

所有的CSS定位属性：参见网页所有的CSS定位属性

Overflow

格式：overflow: 值

overflow 属性只工作于指定高度的块元素上。

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

对齐

1.居中对齐：

1）元素

用margin: auto;。注意要与width属性一起用才有效果。如：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

2）文本

用text-align: center;

3）图片

使用 margin: auto; 并==将它放到 块 元素中==。如：

img {
    display: block;
    margin: auto;
    width: 40%;
}

2.左右对齐

1）使用定位方式

使用position: absolute;结合right: 0px等实现

当使用 position 来对齐元素时, 通常 <body>元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

2）使用 float 方式

如float: right;，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用定义 "clearfix(清除浮动)" 类来解决该问题，在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {
    overflow: auto;
}

image.png 3.垂直居中

1）使用padding:

在头部顶部使用 padding；如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

2）使用 line-height：

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

3）使用 position 和 transform

transform: translate(-50%, -50%);实现

组合选择

1.后代选择器

选取某元素的所有后代元素。如div p选择所有

元素中的

元素

2.子元素选择器 >

只能选择作为某元素==直接/一级子元素==的元素。如div>p选择了

元素中所有直接子元素

3.相邻兄弟选择器 +

可选择紧接在第一个元素后的元素，且二者有相同父元素。如div+p选取了所有位于

元素后的第一个

元素

4.后续兄弟选择器 ~

选取所有指定元素之后的相邻兄弟元素。如div~p选取了所有

元素之后的所有相邻兄弟元素

例子：CSS 组合选择符 | 菜鸟教程 (runoob.com)

总结

今天学到了css Display显示、Position定位、Overflow、对齐和组合选择相关模块的知识，对于css的架构有了进一步理解，受益匪浅！

avatar
文章
阅读
粉丝