css 总结

Bertha 。 2022-12-11 07:43 17阅读 0赞

入门部分

*  # CSS元素分类 #
 *  ## 块级元素 ##
 *  常用的块级元素有:
 *      <div> 、 <p> <h1>-<h6> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <address> <blockquote>(这是引用标签) <form>
 *  块级元素的特点:
 *      a. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。即块级元素都是自己占用一行。
        b. 元素的高度、宽度、行高以及到顶和底边的距离都可设置
        c. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
 *  设置display:block 可将元素显示为块级元素。如下代码就是将内联元素a转换为 块级元素，从而使a元素具有和块级元素特点。  
    `例: a{display:block;}`
 *  ## 内联元素 ##
 *  常用的内联元素:
 *      <a> <b> <span> <br> <i> <em> <strong> <label> <q>
 *  内联元素的特点
 *      a. 和其它元素都在一行上。即自己不独占一行
            b. 元素的高度、宽度以及到顶部和底部的距离不可设置
            c. 元素的宽度就是它包含的文字或图片的宽度，不可改变
 *  内联元素可以通过 display:inline 将块级元素转为内联元素。从而使块级元素具有内联元素的特点。
 *      例子:
            div{
                display:inline;
            }
            
            <div> 我会从块级元素变成内联元素 </div>
    
    ## 内联块级元素 ##
 *  常用的内联块级元素有: `<img> <input>`
 *  内联块级元素的特点:
 *      a. 和其它元素在一行上
            b. 元素的高度、宽度、行高以及到顶部和底部的距离都可以设置
 *  代码 `display:inline-block` 就是将于元素设置为内联块级元素