zoukankan      html  css  js  c++  java
  • 02-CSS基础与进阶-day6_2018-09-05-20-18-21

    盒模型
    width
    height
    border
    padding
    margin

    浏览器会给元素一个默认样式,一般我们会重置浏览器默认样式
    * {padding: 0; margin: 0}

    注意 1 行内元素没有上下外边距 也没有上内边距
    2 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌陷)
    3 对于两个嵌套关系的块元素,假如父亲没有上内边距和边框,
    则父亲的上外边距和儿子的上外边距发生合并
    解决方案 1 给父亲加overflow:hidden 2 给父亲加上内边距或上边框
    盒子尺寸

    01居中.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           div {
                  width: 300px;
                  height: 300px;
                  border: 1px solid #ccc;
                  text-align: center; /*文字水平居中*/
                  margin: 10px auto; /* 盒子居中*/
           }
    
           section {
                 width: 400px;
                 height: 400px;
                 border: 1px solid red;
           }
    
           section img {
                width: 200px;
                height: 210px;
                margin-left: 100px;
                margin-top: 95px;
           }
    
           aside {
                  width: 400px;
                  height: 400px;
                  border: 1px solid pink;
                  background: #fff url(xd.jpg) no-repeat;
               background-size: 200px 210px;
               /* 背景图更改位置 用background-position*/
               background-position: 100px  95px; 
           }
        </style>
    </head>
    <body>
        <div>文字水平居中</div>    
        <section>
            <!--插入图片水平居中 图片也是一个盒子 用margin或padding设置-->
            <img src="xd.jpg" alt="">
        </section>
        <aside>
            
        </aside>
    </body>
    </html>
  • 相关阅读:
    BSGS模板(互质与不互质) 洛谷P4195、P3846
    整除分块(数论分块)
    洛谷P3327 [SDOI2015]约数个数和——莫比乌斯反演
    模块二
    模块
    二分法 匿名函数
    3.26作业
    函数的递归调用
    yield表达式 三元表达式
    3.25作业
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11048389.html
Copyright © 2011-2022 走看看