Python-CSS高级 题目

一、简答
1、完整总结display三种基础显示方式的显示方式与嵌套规则
    /* inline */
    /*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/
    /*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/
    /*3.content由文本内容撑开*/
    /*4.inline标签只嵌套inline标签*/

    /* inline-block */
    /*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
    /*2.支持所有css样式*/
    /*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
    /*4.inline-block标签不建议嵌套任意标签*/

    /* block */
    /*1.异行显示, 不管自身区域多大, 都会独占一行*/
    /*2.支持所有css样式*/
    /*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/
    /*4.block可以嵌套任意标签*/

2、解释overflow属性的功能，总结都可以赋值哪些属性值，并做简单解释
    /*overflow: 处理内容超出盒子显示区域*/
    overflow: auto | scroll | hidden
    /*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
    /*scroll: 一直采用滚动方式显示*/
    /*hidden: 隐藏超出盒子显示范围的内容*/

3、什么是浮动布局，通过什么实现可以完成浮动布局，浮动布局有哪些特性
    /*float: 浮动布局, 改变BFC的参照方位*/ 脱离文档流
    /*为什么要使用: 使用它, 块级盒子就会同行显示*/

    float: left | right;  左 | 右 浮动
    /*left: BFC参照方向从左向右*/
    /*right: BFC参照方向从右向左*/

    /*浮动的区域有父级的width决定*/

4、为什么要清浮动？并列举四种常用的清浮动方式
浮动问题: 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题
清浮动: 解决上面的问题, 通过使父级获取一个合适的高度, 这样子级就不会和父级的兄弟布局发生重叠

clear: left | right | both
① 设置父级的死高度
② 通过兄弟设置 clear: both
③ 设置父级overflow属性
.sup {
    overflow: hidden;
}
④ 通过父级:after伪类
.sup:after {
    content: "";
    display: block;
    clear: both;
}

5、控制盒子的显隐都有哪些方式，并对每种操作做简单解释
    display: none;
    在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时

    opacity: 0;
    在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时
    ```

6、如何实现相对定位，总结相对定位的特点，并简述使用场景
    参考系: 自身原有位置   会相对文件中的控件。
        position: relative;  => 打开了四个定位方位
        1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
        2.left = -right | top = -bottom
        3.布局后不影响自身原有位置
        4.不脱离文档流

7、如何实现相对定位，总结绝对定位的特点，并简述使用场景
    参考系: 最近的定位父级  会相对整个页面而定。
    position: absolute;  => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.父级必须自己设置宽高
    3.完全脱离文档流

8、如何实现相对定位，总结固定定位的特点，并简述使用场景
    参考系: 页面窗口   相对浏览器窗口定位，设置的top/left属性，是相对于浏览器窗口的位置。
    position: fixed;  => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.相对于页面窗口是静止的
    3.完全脱离文档流

9、解释z-index属性的使用
    1. 数值越大,越靠近你
    2. 只能作用于定位过的元素
    3. 自定义的模态框示例

10、谈谈你对流式布局思想的看法，流式布局都有哪些体现方式(或实现方法)
    流式布局思想
        # 尽可能不去使用固定属性值
        # 通过父级来获取相应的属性值
    1. 百分比
    2. vw | vh => max-width(height) | min-width(height)
    3. em | rem

11、代码实现一个简单的悬浮标题展开列表项，移走标题收起列表项的菜单栏
        .header-nav {
            float: left;
            margin-left: 10px;
            line-height: 100px;
        }
        .nav-li{
            /*background: red;*/
            float: left;
            font: normal 14px/100px 'Helvetica Neue';
            padding: 0 10px;

        }
        .nav-li a {
            display: block;
            height: 100px;

        }
        .nav-li:hover a{
            color: #FF6700;
        }
        .nav-detail {
            width: 100vw;
            min-width: 1226px;
            height: 0px;
            background: white;
            position: absolute;
            left: 0;
            top: 100px;
            overflow: hidden;
            z-index: 3333;
            /*display: none;*/
            /*margin: 0 auto;*/
            box-shadow: 0 1px 5px 0 #e8e7e3;
            transition:.6s ease;

        }
        .nav-li:hover .nav-detail{
            border-top: 1px solid #b0b0b0;
            display: block;
            height: 200px;

        }
        .nav-detail:hover a {
            display: block;
        }
        .nav-detail-wrap {
            width: 1226px;
            height: 260px;
            margin: 0 auto;

        }
        .nav-detail-wrap .goods {
            width: 204px;
            float: left;
            text-align: center;
            /*margin: 0 auto;*/
            position: relative;
        }

            <ul class="header-nav">
                <li class="nav-li"><a href="">小米手机</a>
                    <div class="nav-detail">
                        <ul class="nav-detail-wrap">
                            <li class="goods">
                                <p class="tag">新品</p>
                                <div class="nav-detail-img"></div>
                                <p class="goods-name">小米MIX3</p>
                                <p class="goods-price">3299起</p>
                            </li>
                         </ul>
                    </div>
                </li>
            </ul>

12、总结常用标签的reset操作
    html, body {
        width: 100%;
        height: 100%;
    }

    body, h1, h2, h3, h4, h5, h6, ul, p{
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    a{
        color: black;
        text-decoration: none;
    }
    img, input, button {
        vertical-align: middle;
    }
    .clearfix:after {
        content: '';
        clear: both;
        display: block;
    }

13、解释什么是过渡，并用代码简单实现一个横向柱状图，鼠标悬浮柱状图宽度向左变宽的案例
    我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
<style type="text/css">
      .sup {
         width: 800px;
         height: 50px;

         margin: 0 auto;
      }
      .sub {
         width: 50px;
         height: 50px;

         /*整体设置: 注意点 第一个时间为过渡时间, 第二个为延迟时间,可以省略, 运动曲线和运动属性可以省略,位置也不做要求*/
         /*transition: .1s 1s all ease;*/
         transition: .7s ease-in-out;
         /*display: none;*/
         /*opacity: 0;*/
      }
      .sup:hover .sub {
         /*margin-left: auto;*/
         /*display: block;*/
         /*opacity: 1;*/
         margin-left: calc(100% - 50px);
      }
      /*结论:*/
      /*1.尽量悬浮静止的盒子, 控制运动的盒子*/
      /*2.不能确定区间范围的属性值, 不会产生动画效果*/
      /*display 不能做动画  | opacity可以做动画*/
   </style>
</head>
<body>
   <div class="sup">
      <div class="sub"></div>
   </div>

14、简述盒子阴影每个属性值的含义，一个盒子可以拥有多个阴影吗？如何实现
    /*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
        box-shadow: 0 0 10px 10px black;

    /*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
    box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

15、列举:before伪类实现边框的核心代码
 /*自身需要定位*/
    .box {
        position: relative;
    }
    /*伪类通过定位来完成图层的布局*/
    .box:before {
       content: "";
        /*完成布局*/
       position: absolute;
        top: 10px;
        left: 0;
        /*构建图层*/
       width: 1px;
       height: 100px;

    }

16、总结形变属性与属性值，如何实现同时旋转720deg、y轴上偏移100px、x轴缩放2倍、y轴缩小2倍
    /*1.形变参考点: 三轴交界点*/
        transform-origin: x轴坐标 y轴坐标;

        /*2.旋转 rotate deg*/
        transform: rotate(720deg);

        /*偏移 translate px*/
        transform: translateX(200px) translateY(200px);

        /*缩放 scale 无单位*/
        transform: scale(x轴比例, y轴比例)
            /*transform: scaleX(3) scaleY(0.5);*/

        /*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
        /*形变不改变盒子布局, 只拿形变做动画*/

17、简述什么是盒模型，它的组成部分是什么
    使用盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容
    盒子的四个组成部分:
        margin + border + padding + content(width x height)

18、简单总结一下动画的实现方式
    transition:
        一个在执行的过程中声明关键帧的动画，可以一旦元素的属性发生变化就可以形成一个动画，
        然后transition-property，transition-duration，transition-timing-function，transition-delay来设置动画的属性

    animation:
        通过@keyframes 来设置关键帧，在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。
        animation-name，animation-duration，animation-timing-function，animation-delay，
        animation-iteration-count，animation-direction来设置动画的属性

19、简单总结一下表格及表格各操作含义
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
<table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
</table>

20、代码实现两段文本在一200x200的盒子中垂直水平居中
<div class="sup">
        <p>第一行文本</p>
        <div>第二行文本</div>
    </div>

    .sup {
        /*实现多行文本垂直居中 =>
        针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
        display: table-cell;
        vertical-align: middle;
    }

二、代码
完成小米网站主页的编写