CSS_(12.23)作业_Flex盒模式 - html/css笔记

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > CSS_(12.23)作业_Flex盒模式

博主信息

博文 12

粉丝 0

访问量 10276

专题推荐

更多>

第一种 Flex盒模式属性

CSS样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局属性</title>
    <style>
        /*公共样式*/
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            /*添加一个轮廓线*/
            outline: 1px dashed red;
        }
        .container{
            border: 1px dashed;
            /*盒子加了padding，border;必须设置box-sizing，防止盒子变大*/
            box-sizing: border-box;
            background-color: #55a532;
        }
        .item{
            width: 200px;
            height: 50px;
            border: 1px dashed;
            background-color: #795da3;
        }
        .container {
            /*转为flex弹性盒子*/
            display: flex;
            /*1、flex-direaction 容器主轴方向*/
            /*flex-direction: column;*/
            flex-direction: row; //默认
            /*2、flex-wrap 是否可多行显示*/
            /*flex-wrap: wrap;*/
            flex-wrap: nowrap; //默认
            /*3. flex-flow: 主轴和换行的简写*/
            /*flex-flow: row nowrap;*/
            /*4、设置容器中的项目在主轴上的对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: center;*/
            /*可以分配主轴上剩余空间*/
            /*二端对齐*/
            justify-content: space-between;
            /*分散对齐*/
            /*justify-content: space-around;*/
            /*平均对齐*/
            /*justify-content: space-evenly;*/
            /*5. 项目在交叉轴上的排列方式*/
            height: 200px;
            /*align-items: flex-start;*/
            align-items: flex-end;
            /*align-items: center;*/
            /*6. align-content: 设置项目在多行容器交叉轴上的对齐方式*/
            align-content: space-between;
            /*align-content: space-around;*/
            /*align-content: space-evenly;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">A</span>
        <span class="item">B</span>
        <span class="item">C</span>
        <span class="item">D</span>
        <span class="item">E</span>
        <span class="item">F</span>
        <span class="item">G</span>
        <span class="item">H</span>
        <span class="item">I</span>
    </div>
</body>
</html>

12.20作业布局的一点心得体会

css说实话从来没有认真的深入了解过，每次涉及到页面的样式调整，遇到什么问题就百度一堆页面，也没有总结没有思考。比如说左右浮动，就用float，加颜色就是用color，文本框实现圆角显示也是百度。总之没有做到精细化处理，页面效果也只是大致看看，兼容性更不要提。
12月20的作业看似非常简单，就是页头的布局和样式调整，但是却用到浮动+元素的定位。没有认真思考过CSS，一时半会也是难以实现效果。
为难过才思考，思考过才有疑问，昨晚Peter Zhu老师的从无到有的页面实现，看似行云流水，确实历年来的经验积累，冰冻三日非一日之寒。从页面的元素构建、CSS样式实现到PHPStorm的工具软件快捷键的灵活运用，足见其平常的知识积累非常全面。
学习看的不是结果，重点是结果之前的努力过程，外行看笑话，内行看门道，愿以后的学习也能将页面元素作为音符，phpstorm作为钢琴，css作业音谱，弹奏出悦耳的琴声。

批改老师：

天蓬老师

批改状态：合格

老师批语：过奖了... 能写这么顺, 原因很简单, 写得太多了... 如果想彻底掌握一个知识点, 就得代码写到吐, 当然你们暂时不必这样, 因为这是我的工作.... 任何一门技术, 成为一个行业, 一定有自己的潜规则, 不能小看, 从现在起, 重视css, 还得来.... 作业中没有手写部分, 这并不符合要求, 本来是要退回的, 考虑到总结写的都是肺腑之言, 就放你一马, 下次一定要看清要求, 补上手写部分...