CSS知识点2

小鱼儿 2022-04-12 13:44 261阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
        
    
        <style type="text/css">
            body{
                text-align: center;
                font:黑体;
            }
        #color{
            color:blue;
        }
        /*left,right,top,bottom分别表示距离左右上下的位置。height和weight表示高和宽。
            position属性控制以什么方式定位图层，absolute：网页右上角；relative：原始值的位置；static：HTML默认位置*/
        /*上下两个层之间放在一起时，magin层边距将会发生合并，以大的为标准
            两个不同页面内容的边距彼此相邻时，也会发生合并。可以在其中一个内容加边框或空距防止*/
        #div1{
                color: aqua;
                left:100px;
                top:10em;
                width: 300px;
                height: 300px;
                magin:3em;  /*外边距，可以为负值，达到叠加目的*/
                padding:1em 2em 3em 4em;  /*页边距分别为上，右，下，左，不可以为负值*/
                background:url(MySource/smiley.gif) left repeat-y;  /*使用自定义图片修改边距样式*/
                border-style: dashed;  /*边框样式  solid dotted  dashed长方体斑点吧 等*/
                border-color:darkgray; /*边框颜色*/
                border-width:1em;  /*边框宽度*/     
            /*有时层中内容超过初始设定范围时，会自动拉伸层的大小，如果不希望拉伸，设定overflow*/
                overflow: auto; /*auto超出时显示滚动条   scroll超出与否都显示滚动条   hidden都不显示滚动条，会丢掉溢出的*/
                display:block;  /*block块级对象  inline行级对象，好几个inline的对象好像就显示在一行里 inline-block行内框*/
               
        }
            /*盒布局，现在大家一般都不支持欸，(￢︿̫̿￢☆)*/
            .container{
                
                /*开启盒布局*/
                display:box; 
                /*元素的布局方向  vertical 从上到下
                                horizontal 从左到右
                                inline-axis 沿着内联轴  表现为横向编排
                                block-axis 沿着块轴   表现为纵向编排
                                inherit  继承父类中box-orient的值
                */
                box-oriednted:vertical; 
                /*元素的布局顺序  reverse：反向； normal：正向； inherit：继承父类中box-direction的值*/
                box-direction:reverse;
                /*改变元素的位置；谁的值大谁排在后面*/
                box-ordinal-group:2;
                /*弹性空间分配，默认0.0
                例如id1的box-flex设置为1  id2的box-flex设置为2  则id1会得剩余空间的1/3， id2会得到剩余空间的2/3*/
                box-flex:0.0;
                /*元素的对齐方式*/
                /*水平空间分配  center置中  start左  end右  jsutify平均，最左和最有没有空间！！！*/
                box-pack:center;
                /*垂直空间分配  center置中  start上  end下 baseline：基线  strech：和justify差不多*/
                box-align:center;
                /*增强的盒属性*/
                /*阴影效果*/                             /*正右上负左下*/
                 /*分别为阴影类型inset：内阴影，默认外阴影； 阴影水平位移，垂直位移，模糊距离（可选），大小（可选），颜色（可选）*/
                box-shadow:inset 5px 5px 5px 5px #333; 
                /*盒子尺寸的计算方法 border-box 指定的宽度和高度包括content+padding+border
                inherit：和他爸爸一样  padding-box  指定的宽度和高度包括content+padding  
                 content-box  指定的宽度和高度包括content */
                box-sizing: border-box;
                /*内容溢出处理方法*/
                    /*auto超出时显示滚动条   scroll超出与否都显示滚动条   hidden都不显示滚动条，会丢掉溢出的  visible显示在盒外
                    no-conten:不显示内容  no-display不显示元素*/
                overflow-x:auto;
                overflow-y: auto;
            }
            /*增强的用户界面设计*/
            #div2{
                /*允许用户改变尺寸 both：都能改   none：默认，不能改   horizontal:能宽度    vertical:能高度  inherit：像爸爸*/ 
                /*需要和overfolw或overfolw-x，overfolw-y一起使用，且不能设置为visible*/
                resize: both;
                /*外轮廓线*/
                outline: #EA171B;
                /*派生属性*/
                /*轮廓宽度  thin  metium  thick  或者可以直接上数，不允许为负值  inherit*/
                outline-width: medium; 
                /*轮廓颜色   直接颜色值  invert：与背景色相反  inherit*/
                outline-color: aqua;
                /*轮廓与元素边界的距离*/
                outline-offset: -2px;
                /*轮廓的风格
                dashed虚线   dotted点状  none默认没有 solid实线 double双线条  groove3D凹槽  ridge3D凸槽
                inset3D凹边  outset3D凸边  inherit*/
                outline-style: dashed;
                /*伪装appearence  noemal正常默认  icon装成图标  window装成视窗  button装成按钮  menu装成菜单  field装成输入框*/
                appearance:button;
            }
            #div3 a{
                counter-increment: mycounter;  /*定义计数器*/
            }
            #div3 a:before{
                    /* content  normal默认不加  none如果有指定的添加内容设置为空  string：文本  counter：计数器  attr（at） at的属性值
                url（别）外部资源  inherit*/
                content:counter(mycounter);
            }
            #div4 {
                /*多列属性columns  columns:<column-width>||<column-count>  如果缩小窗口，可能列数和宽度都会变化*/
                /*如果只设置column-width，缩小窗口宽度不变，列数变化
                  如果只设置column-count，缩小窗口列数不变，宽度变化*/
                columns:200px 3;
                column-width：200px;  /*auto自动默认   宽度*/
                column-count: 3;   /*auto默认自动    列数*/
                /*列间距column-gap*/
                column-gap: 3em;  /*normal默认值   数字*/
                /*column-rule列分割线  column-rule:[column-rule-width]||[column-rule-style]\\[column-rule-color]*/
                /*也可以分别赋值*/
                column-rule: 1px solid #CA4245;
                /*定义横跨所有列         column-span:1|all   all:横跨所有列  1：只在一列显示*/
                column-span: all;
                
            }
        </style>
    </head>
    
    <body>
        
        《烬余录》像是一个历经沧桑的老人所写，<span id="color">但是当时的张爱玲只有23岁。</span>她对自己的冷酷和自私，有一种抽离
        <div id="div1">
            这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。
        </div>
        
        
        <div class="container">
         <div>你好</div>
            <div>你好啊</div>
            <div>你好啊</div>
        </div>
        <div id="div2">增强的用户界面设计</div>
        <div id="div3">
        <a href="">CSS</a>
            <a href="">CSS</a>
            <a href="">CSS</a>
            <a href="">CSS</a>
        </div>
        <div id="div4">多列布局</div>
    </body>
    </html>