zoukankan      html  css  js  c++  java
  • 一级段项目学习

    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>
  • 相关阅读:
    ubuntu安装jdk的两种方法
    LeetCode 606. Construct String from Binary Tree (建立一个二叉树的string)
    LeetCode 617. Merge Two Binary Tree (合并两个二叉树)
    LeetCode 476. Number Complement (数的补数)
    LeetCode 575. Distribute Candies (发糖果)
    LeetCode 461. Hamming Distance (汉明距离)
    LeetCode 405. Convert a Number to Hexadecimal (把一个数转化为16进制)
    LeetCode 594. Longest Harmonious Subsequence (最长的协调子序列)
    LeetCode 371. Sum of Two Integers (两数之和)
    LeetCode 342. Power of Four (4的次方)
  • 原文地址:https://www.cnblogs.com/lxy151/p/7701726.html
Copyright © 2011-2022 走看看