码迷,mamicode.com
首页 > 其他好文 > 详细

概念知识点

时间:2017-11-09 19:39:36      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:总结

概念知识点

1.盒子模型

技术分享

<head>
<style>
    .fl{
        float:left;
    }
    #box1,#box2{
        width:1210px;
        margin:0 auto;
    }
    #box1{
        height:60px;
        background:powderblue;
    }

    #box2{
        height:300px;
        background:peachpuff;
    }
    .a{
        height:260px;
        width:260px;
        background:greenyellow;
        margin-top:20px;
        margin-left:20px;
    }
    .b {
        height: 260px;
        width: 890px;
        background: palegoldenrod;
        margin-top: 20px;
        margin-left: 20px;
    }</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">
    <div class="a fl"></div>
    <div class="b fl"></div>
</div></body>

2.浮动:浮动不占位置,如果想要按顺序排序,就都要给加浮动。

例如:只给第一个浮动

技术分享

      只给第二个浮动

技术分享

       给两个都加浮动

技术分享

3.块级元素  行内元素

块级元素:无论内容多少,都占一行

行内元素:内容多大就占多大

行内元素要设置固定宽高,就要把行内元素变成块级元素,不然设置大小改变的是字的大小。

把行内元素变块级元素:     display:inline-block;


4.定位

  相对定位    position:relative;

              left:50px;

             top:50px;          

              比原来位置默认相比往右移50px往下移50px

  绝对定位    position:absolute;

              绝对定位是以它的父元素位置作参考发生偏移的,超出文档流,不排队不占位。且应用的时候要给父元素写相对位置(不需要写具体值)

  固定定位    position:fixed;

              即使下拉整个页面,被绝对定位的位置也永远不变

 

要和 top bottom  left  right一起用

定位和浮动不要一起用!(浮动没用)

绝对定位时行内元素可设宽高,行内元素字体大小等容易跟随父元素,如需要得另设置。


概念知识点

标签:总结

原文地址:http://13438273.blog.51cto.com/13428273/1980391

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!