前端html,css温故知新
编辑时间:2021-09-16 作者:金满斗 浏览量:89 来源:原创

给儿子推荐了个学习网站:https://chinese.freecodecamp.org/ 希望他能跟着学一下,同时自己也来跑一遍,一则看看有没有坑二则如果遇到他向我咨询也能较快的解答问题。当然更多的也是系统学习,温故知新。

u标签  标签内的文本自动加下划线

em标签 斜体加强

s标签  删除中划线

rgba()   背景色rgba 代表:r = red 红色 g = green 绿色 b = blue 蓝色   a = alpha 透明度


box-shadow 属性用来给元素添加阴影,该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow 属性的阴影依次由下面这些值描述:

  • offset-x 阴影的水平偏移量;
  • offset-y 阴影的垂直偏移量;
  • blur-radius 模糊半径;
  • spread-radius 阴影扩展半径;
  • color

其中 blur-radius 和 spread-radius 是可选的。

可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。


CSS 里的 opacity 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

text-transform  文字大小写样式设置

定位:absolute 绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则(默认是 position: relative;),浏览器会继续寻找直到默认的 body 标签。

CSS3 引入了 hsl() 做为颜色的描述方式。  3个参数 0-360的色相,饱和度,亮度        这种方式对我们这美学细胞差的人很好,平时相应的只要调饱和度亮度就好

例子:

颜色 HSL
hsl(0, 100%, 50%)
hsl(60, 100%, 50%)
绿 hsl(120, 100%, 50%)
蓝绿 hsl(180, 100%, 50%)
hsl(240, 100%, 50%)
品红 hsl(300, 100%, 50%)

linear-gradient()   线性渐变

例子:第一个参数指定了颜色过渡的方向——它的值是角度,90deg 表示垂直渐变(从左到右),45deg 表示沿对角线渐变(从左下方到右上方)。 其他参数指定了渐变颜色的顺序:

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
使用 CSS Transform scale 属性可以更改元素的大小  
例子,div悬停缩放1.1倍
div:hover{
   transform: scale(1.1);
 }
了解伪元素 ::before 和 ::after。 伪元素可以在所选元素之前或之后添加一些内容


通过伪元素构建心形代码例子


<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content:"" ;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>

<div class="heart"></div>

了解 CSS 的关键帧和动画是如何工作的

如果要给元素添加动画,你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观,@keyframes 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。 为了便于理解,本挑战中我们只会暂时涉及到两个最常用的属性。

animation-name 用来设置动画的名称,也就是我们稍后要在 @keyframes 里用到的名称。

animation-duration 设置动画所花费的时间。

具体再取百度吧。

tabindex 属性还可以指定元素的 tab 键焦点顺序


除了使用 em 或 px 设置文本大小,你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位,但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸(宽度或高度),百分比是相对于父级元素的大小。

四个不同的视窗单位分别是:

  • vw:如 10vw 的意思是视窗宽度的 10%。
  • vh: 如 3vh 的意思是视窗高度的 3%。
  • vmin: 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
  • vmax: 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

下面这个例子是设置 body 标签的宽度为视窗宽度的 30%


flex:

align-items 属性与 justify-content 类似。 回忆一下,justify-content 属性使 flex 子元素沿主轴排列。 行的主轴是水平线,列的主轴是垂直线。

Flex 容器中,与主轴垂直的叫做 cross axis(交叉轴)。 行的交叉轴是垂直的,列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。


flex-shrink 属性定义 flex 子元素的收缩规则   


flex-grow和上面正相反,指的是扩大规则 ,例如两个div ,一个 flex-grow:1;一个flex-grow:3  上面同理


flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前,元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致(px、em、% 等)。 如果值为 auto,则项目的尺寸随内容调整

flex短方法属性:

例如,flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

order 属性告诉 CSS flex 容器里子元素的顺序


flex 子项目的最后一个属性是 align-self。 这个属性允许你调整单个子元素自己的对齐方式,而不会影响到全部子元素

css网格:

用于整体模版布局


grid-template-columns: repeat(3, 1fr);       repeat函数  上面的例子就是3列,每列宽度


 grid-template-areas:
      /* 只修改这一行下面的代码 */
        "header header"
        "advert content"
        "footer footer";
      /* 只修改这一行上面的代码 */
    }

这种布局和hl里的grid布局一样的

repeat 方法带有一个名为自动填充(auto-fill)的功能。 它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

如:

grid-template-columns:repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果是这样:首先,列的宽度会随容器大小改变。其次,只要容器宽度不足以插入一个宽为 60px 的列,当前行的所有列就都会一直拉伸。 注意: 如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行。

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于,当容器的大小大于各网格项之和时,auto-fill 会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而 auto-fit 则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。




来说两句吧