HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

作者：我家小花儿 | 2024-07-15 08:00:33

踩

自己复习前端基础，仅用于记忆，初学者不太适合

示例代码 - HTML


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="base.css">
  <title>框架元素 装饰元素 弹性盒子</title>
</head>
<body>
  <header>
    <h1>frame、decoration element</h1>
    <nav>
      <ul class="navbar">
        <li><a href="#">首页</a></li>
        <li><a href="#">框架元素</a></li>
        <li><a href="#">装饰元素</a></li>
        <li><a href="#">弹性盒子</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div>
      <pre>
        <h2>赋得古原草送别</h2>
        <abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
        <abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
        <abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
        <abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
        <abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
        <abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
        <abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
        <abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>
      </pre>
    </div>
    <aside>
      <pre>
        显然：
            b与strong、em与i、s与del的
            效果相同，只是含义不同；u是
            下划线的装饰作用，mark是标记
            的作用，不建议使用HTML的装饰
            标签，推荐CSS来做相关操作
      </pre>
    </aside>
  </main>
  <footer>&copy; 2023 My Website. All rights reserved.</footer>
</body>
</html>

示例代码 - CSS


* {
    padding: 0;
    margin: 0;
}
 
li, a {
    padding: 1rem;
    text-decoration: none;
    color: black;
    list-style-type: none;
}
 
body {
    display: flex;
    flex-direction: column;
    justify-items: center;
}
 
header {
    text-align: center;
    background-color: #8fb1c7;
    padding-top: 1.5rem;
}
 
.navbar {
    display: flex;
    justify-content: space-around;
}
 
main {
    display: flex;
}
 
div {
    padding: 2rem;
    flex: 3;
    font-size: 18px;
    text-align: center;
    background-color: #72927e;
}
 
aside {
    flex: 2;
    background-color: #735b73;
    padding: 2rem;
    font-size: 18px;
}
 
footer {
    text-align: center;
    background-color: #727c48;
}
 
h2 {
    margin: 2rem;
}

效果

框架元素


<!DOCTYPE html>                                # 说明文档类型是HTML5
<html lang="en">                               # 项目根元素
<head>                                         # 头元素，存储元数据
  <meta charset="UTF-8">                       # 元数据，不为用户所看见
  <link rel="stylesheet" href="base.css">      # 链接元素，指向css、js
  <title> </title>                             # 标题元素 
</head>
<body>                                         # 用户可见元素的主体
  <header>                                     # 头部元素，如标题、导航等最上方内容
    <nav>  </nav>                              # 导航
  </header>
  <main>                                       # 内容主体
    <div>  </div>                              # 块级容器，    
    <aside>   </aside>                         # 侧边栏内容 
  </main>
  <footer></footer>                            # 页脚内容
</body>
</html>

装饰元素


<abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
<abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
<abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
<abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
<abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
<abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
<abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
<abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>

说明：

abbr：缩写元素，鼠标悬停显示title内容

<、> ：分别对应<、>

b、strong：效果是加粗

em、i：效果是斜体

s、del：效果是删除线

u：效果是下划线

mark：效果是标记

弹性盒子

详细介绍

弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)

概念

用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

用法

设置父元素为flex，为一个容器，其直接子元素为项目（item）可控制排版。

基础介绍

父元素属性

flex-direction：row | row-reverse | column | column-reverse;

flex-wrap：nowrap | wrap | wrap-reverse;

flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

align-items：flex-start | flex-end | center | baseline | stretch （单行）

子元素属性

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto

flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值

为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/828391