CSS3 盒子模型全面掌握 -cyy

元素居中定义与外边距定义：

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"="keywords"="关键词1，关键词2，关键词3"="description"="网站描述bla bla"title>网站标题</style>
        article{
            border:1px solid #ddd;
        }
        div1px solid red;
            margin30px
            padding50px}
    bodyarticle>
        div>

        html>

边距合并与负值使用：


        body100px50px 0;
            /* 设置负值会溢出 */
            margin-left-20px
            margin-right
            text-aligncenter
        h21px solid blue 上下间距存在合并情况，会取两个边距中最大的那个元素 
            margin-top
            margin-bottom60pxh2>h2>
            aaa
        >

尺寸限制与内边距使用方法：

box-sizing: border-box;

10px
        .div110px solid20px40px
            width300px
            height
        .div2
            box-sizing border-boxdiv class="div1">div1="div2">div2>

元素边框的使用规范：


        .div
            border-stylesolid
            border-top-width
            border-right-width5px
            border-top-colorred
            border-right-colorblue
        p>em
            border-bottom1px solid green="div">divp>this is em>cyy></>

圆角控制的详细使用：


            border-radius20px 30px 40px 10px5px solid red50%><>

轮廓线使用技巧：


        *0padding{
             轮廓线 
            outline10px double #ddd10px solid red
        h1backgroundgreenh1>h1>

可以看到轮廓线和边框线的区别：

轮廓线不占空间，边框线占据空间。


        .no_line 去掉input的轮廓线 noneinput type="text" class="no_line"="text">

元素显示的多种模型控制：


        div>a
            text-decoration none
            displayblock;
            
        
        div>a:hover
            color
            backgroundpink
        ul>liinline-block200pxheight centerline-height1px solid
        ul>li:hover
            cursor pointera href="">htmla>csshrulli>li>

使用visibility控制元素隐藏：


        div:first-of-type display:none;不占空间 */
             display:none; */

             visibility和opacity类似，相当于眼睛看不见，但依然占据空间  visibility:hidden; 
            opacity 0
        div1
    
        div2
    >

display:none;不占空间

visibility和opacity类似，相当于眼睛看不见，但依然占据空间

overflow溢出隐藏：


            overflowauto;

        
        div:nth-of-type(2)hidden
            white-space nowrap
            text-overflow ellipsis
        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] 
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 
    >

fill-available 自动撑满可用空间：

100%500pxlightblue
        p-webkit-fill-available>111>

fit-content根据内容自适应尺寸：

0 autofit-content>

其实我感觉跟display:inline-block;差不多……

max-content & min-content 盒子根据内容尺寸自适应：



        article width:min-content; max-content>

    
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        
            层叠样式表。
        >

CSS3 盒子模型全面掌握 -cyy

相关文章