• 一级段项目学习


    1、CSS中margin和padding的区别如下

       1, margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。
    
       2, padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离

    2,iine-height行高

    “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离。在CSS,line-height被用来控制行与行之间的垂直距离。line-height 属性会影响行框的布局。
    在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。所有浏览器都支持 line-height 属性。
     line-height属性的具体定义列表如下:
    
    语法: line-height : normal | <实数> | <长度> | <百分比> | inherit
    
    说明: line-height 属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
    line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
    <!DOCTYPE html>
    <html>
        <head>
            <title>Test</title>
            <style type="text/css" >
                span
                {
                    padding:0px;
                    line-height:1.5;
                }
            </style>
        </head>
        <body>
            <div class="test">
                <div style="background-color:#ccc;">
                    <span style="font-size:3em;background-color:#999;">中文English</span>
                    <span style="font-size:3em;background-color:#999;">English中文</span>
                </div>
            </div>
        </body>
    <html>

    3、向上移动图片,为防图片被隐藏,可以给图片加浮动

    position:relative;     图片位置定位,让图片浮动
    margin: -39px auto;    调整图片的上下距离及作用距离(auto,代表水平居中)

    4、displayd ,这个属性用于定义建立布局时元素生成的显示框类型

    <html>
    <head>
    <style type="text/css">
    p {display: inline}
    div {display: none}
    </style>
    </head>
    <body>
    <p>本例中的样式表把段落元素设置为内联元素。</p>
    <p>而 div 元素不会显示出来!</p>
    <div>div 元素的内容不会显示出来!</div>
    </body>
    </html>
    
    none    此元素不会被显示。
    block    此元素将显示为块级元素,此元素前后会带有换行符。
    inline    默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block   行内块元素。(CSS2.1 新增的值)
    list-item    此元素会作为列表显示。
    run-in    此元素会根据上下文作为块级元素或内联元素显示。
    compact   CSS 中有值 compact,由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker    CSS 中有值 marker,由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table   此元素会作为块级表格显示(类似 <table>),表格前后带换行符。
    inline-table    此元素会作为内联表格显示(类似 <table>),表格前后没换行符。
    table-row-group    此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group    此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group    此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row    此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group   此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column    此元素会作为一个单元格列显示(类似 <col>)
    table-cell   此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption  此元素会作为一个表格标题显示(类似 <caption>)
    inherit   规定应该从父元素继承 display 属性的值
    Javascript
    display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。然而,如果您设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,
    元素的内容将不可见,但元素保持原来的位置和大小。
    <html> <head> <script> functiondisplayResult() { document.getElementById("p1").style.display="none"; } </script> </head> <body> <pid="p1">Thisissometext.</p> <inputtype="button"onclick="displayResult()"value="Donotdisplayparagraph"> </body> </html>
  • 相关阅读:
    JavaScript-4(循环语句)
    JavaScript-3
    JavaScript-2(基本运算)
    JavaScript-1
    HTML基础-3(框架、表单与表格等)
    HTML基础-2(内容容器等)
    HTML基础-1(b,i,u命令等)
    【CSP-S2019模拟】10.07比赛总结
    JZOJ6380. 【NOIP2019模拟2019.10.06】小w与最长路(path)
    【CSP-S2019模拟】10.06比赛总结
  • 原文地址:https://www.cnblogs.com/lxy151/p/7701726.html
Copyright © 2020-2023  润新知