htmlke课后总结2

*盒模型
width
height
margin：外边距
padding：内边距

border : 1px solid red; 设置长宽相同的1px红色实线
border-top 上
border-right 右
border-bottom 下
border-left 左

width:100px;
height:80px;
         
         border-bottom:2px solid red;   /*px和颜色中间的是改变线条形状，一般多用solid 实线*/
         border-top:2px double black ;
         border-right:2px dotted green ;
         border-left:2px dashed   yellow ;
         padding: 20px 50px 10px;
         margin: 100px auto 200px;;

效果

外边框与内边框使用几乎相同
margin(外边距：盒子之间的距离)
margin-top
margin-right
margin-bottom
margin-left

padding(内边距：盒子边缘与内容之间的距离)

padding:10px；四个方向一样
padding:20px 10px；上下 / 左右
padding: 10px 20px 30px;上 / 左右 / 下
padding: 10px 20px 30px 40px;上右下左

下拉菜单
行内元素display
如input/a/span
a/span等行内元素不能设置宽高
块级元素block
如div/ul/li/ol/p/from/table
display：none/bloxk/inline

*{
            padding: 0;
            margin: 0;
        }
 li{
            list-style: none;
        }
          a{
            text-decoration: none;
            }
            /*置空*/
  .nav{
            font-size: 0px;
        }
        .nav>li{/*编辑<li>*/
            display: inline-block;
            vertical-align: top;
            width: 100px;
            height: 30px;
            font-size: 16px;
             background: #ccc;/*背景色*/
            text-align: center;
            line-height: 30px;
        }
        /*下拉菜单的格式编写*/
        .nav li:hover .subNav{
            display: block;
        }
        .subNav{
            display: none;
            border:1px solid lightblue;
        }
        .subNav li:hover{
            color:#fff; /*选中显示的颜色*/
            background-color: lightblue;
        }

body：

 <ul class="nav">
        <li>
            <a href="">首页</a>   
            <ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
        <li>
            <a href="">新闻</a>  
            <ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
        <li>
            <a href="">地图</a>  
            <ul class="subNav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
    </ul>

效果

文档流：
普通流：排满
浮动流:可在同一层随意定位
float 包裹性，向上性，不重叠
定位：压在普通流上方，例如普通流在一楼，定位流即是二楼
position ：fixed 固定定位
position：relative 相对定位：相对于该元素普通流应该在的位置进行相对定位但是原本位置不能有其他元素，否则会造成定位为错乱。
position:absolute 绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没有定位属性，相对与body 去定位。

 body{
            background-color: #bbb;
/*背景色*/
        }
/*菜单栏设置*/
        .headerwrap{
            width: 100%;/*定义菜单栏随网页缩放而缩放*/
            position: fixed;
            top: 0;
            background-color: #fff;/*菜单栏背景色*/
        }
        .header{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        /*图案位置*/
        .logo{
            width: 150px;/*只需定义图标宽度，如果长宽都定义会按定义的图形大小进行缩放而失真*/
        }
        .nav{
            float: right;/*靠右*/
        }
        .nav li{
            float: left;/*定义位置*/
            margin-right: 20px;/*边距间隔*/
            line-height: 80px;/*居中 和高度一致*/
        }
        h1{
            float: left;
        }
        .nav li a{/*可设置超链接字体的各种形式，比如字体，颜色，大小等超链接必须重新设置定义*/
            color: #000;/*设置字体颜色*/
        }
        .goTop{/*定义右侧小浮标*/
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            color: blue;
            position: fixed;
            right: 0;
            top: 300px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;/*鼠标变手*cursor是用于鼠标滑过后的变化，改变后边的单词即可改变*/
        }
        .goTop:hover{
            background-color: blue;/*背景色*/
            color: #fff;/*改变字颜色*/
                 }
        }
        .rela{/*对于所在自身相对定位，会保留自身原来的位置*/
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0px;
            background-color: red;
        }
        .abso{
            width: 450px;
            height: 279px;
            position: relative;
            margin: 0 auto 400px;
            border: 1px solid red;
            overflow: hidden;/*溢出处理*/
        }
        .abso:hover p{
            bottom: 0;
        }
        .abso p{
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: -50px;/*为正即是显示在框上的像素*/
            background-color: rgba(0,0,255,0.5);
            opacity: 0.5; 
            /* 不透明度 ，越小越透明*/
            transition: 1s;/*过渡时间*/
        }

body

    <div class="headerwrap">
        <div class="header">
            <h1>
                <img class="logo" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
            </h1>
            <ul class="nav">
                <li>
                    <a href="">百度首页</a>
                </li>
                <li>
                    <a href="">消息</a>
                </li>
                <li>
                    <a href="">日历</a>
                </li>
                <li>
                    <a href="">设置</a>
                </li>
                <li>
                    <a href="">用户名</a>
                </li>
            </ul>
        </div>
    </div>
    <div style="position:relative;height: ; margin-top:80px;">
        <div class="rela"></div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
            <li>777</li>
            <li>888</li>
            <li>999</li>
            <li>000</li>
            <li>147</li>
            <li>258</li>
            <li>369</li>
            <li>159</li>
            <li>357</li>
        </ul>
    </div>
    <div class="abso">
        <img src="imgs/news.jpg" alt="">
        <p>上滑显示</p>
    </div>
    <div class="goTop">^</div>/*右侧小图标*/

效果