html表格的编译

最新推荐文章于 2021-01-28 05:17:01 发布

原创最新推荐文章于 2021-01-28 05:17:01 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

html表格

选择器：类选择器
通过给标签元素起一个classname类名的方式在编写样式。

                              d选择器
              给元素期一个id名用来获取该元素设置样式的时候使用
              一个元素可以同时有id名和类名。

                 标签选择器
           可以获取当前html文件中所以的标签。
兄弟div ：只要设置一个div的bottom下外边距就可以因为两个兄
           弟的下外边距和上外边距取大值去布局，谁大听谁的。

父子div：当父子div的时候，设置子div的margin-top时会把父级div扯下来
设置时回去寻找父标签的border
解决方法设置父标签的border

内边距：内边距是真实存在的距离，会改变盒子的大小，不影响布局效果
                    宽度=内容的宽度+内边距的宽度+边框的宽度
                    高度=内容的高度+内边距的高度+边框的高度
外边框：body{
               /*body默认有一个外边距
               默认是8px*/
               margin: 0px;
           }
           div{
               width: 100px;
               height: 100px;
               background-color: #006400；
           }
           /*外边距影响页面布局*/
           .div1{
               /*设置居中*/
               margin-left: auto;
               margin-right: auto;
           /*设置左右居中
           参数1：上下外边距
           参数2：左右外边距
           * */
                margin: 10px auto;
                /*设置外边距方法
                 按上右下左顺序去编写*/
               margin: 10px 20px 30px 40px;
           }
       </style>

文字换行：<style type="text/css">
           .div1{
               width: 100px;
               height: 100px;
               background-color: red;
               /*左右居中*/
               margin: 50px auto;
               /*自动换行*/
               word-break: break-word;
           }
           .div2{
               width: 100px;
               height: 100px;
               background-color: chartreuse;
               margin: 30px auto;
               /*到达长度系统强制换行*/
               word-break: break-all;
           }
       </style>
   </head>
   <body>
       
       <div class="div1">adssdsadsdsafdfsfsfdfsffsffssfsdfsdfsdfsdfsdadasdsadadsadssfsf</div>
       <div class="div2">