盒模型

作者: 爱新觉罗狗子 | 来源:发表于2016-11-23 20:30 被阅读0次

CSS面试题
CSS面试题
CSS盒模型和BFC
前端第四天
前端面试之浏览器/HTML/CSS问题
前端面试之浏览器/HTML/CSS问题
盒模型
CSS
css问题
两种Box Model(盒模型)的理解、区别以及注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*标签名先择器*/
        /*div{
            width: 100px;
            height: 100px;
            background: yellow;
        }*/
        /*id 选择器*/
        #q{
            width: 100px;
            height: 100px;
            background: green;
        }
        /*class 选择器*/
        .w{
            width: 200px;
            height: 200px;
            background: blue;
        }
        /*群组选择器*/
        #laba, .xiao{
            width: 200px;
            height: 200px;
            background: yellow;
        }
        /*后代选择器,包括子级以及再子级*/
        .father div{
            width: 200px;
            height: 100px;
            background: red;
        }
        /*组合选择器*/
        /*既是p标签同时class又为div1，两个条件都满足*/
        p.div1{
            width: 100px;
            height: 100px;
            background: pink;
        }
/* 选择器的优先级 id选择器 > class选择器 > 标签名选择器 */
/* display：显示 */
/* inline：行标签。强行将所定义的标签改为行标签。*/
/* block：块标签。 强行将所定义的标签改为块标签。*/
/* inline-block：在一行显示，默认是内容撑开宽高的，但是可以设置宽高*/
/* 原理是BFC */
/* BFC 是一个单独布局的小单位 */
/* 如何把元素变为BFC，display:inline-block; */
/* 把容器变成BFC */
overflow: hidden;

-margin , padding , border 的讲解
-行标签不能设置总的margin (border,padding都可以)
-用border画一个三角形

    </style>
</head>
<body>

<!-- 相对路径 -->
<img src="img/woman.png" alt="">
<!-- 绝对路径 -->
<img src="http://ossweb-img.qq.com/upload/adw/image/201607/1467668438201324627new.jpg" alt="">
    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- id选择器在当前页面中，只存在唯一一个id值。 -->
    <div id="q">4</div>

    <hr>

    <div class="w">4</div>
    <div class="w">3</div>
    <div>2</div>
    <div>1</div>

    <hr>

    <div id="laba">吹喇叭</div>
    <div>吹呀吹呀吹喇叭</div>
    <div class="xiao">吹箫</div>
    <div class="xiao">吹粗粗的萧</div>

    <hr>

    <div class="father">
        <div>左右手</div>
        <span>慢动作</span>
    </div>

    <div>
        <div class="div1">1</div>
        <p class="div1">2</p>
    </div>



</body>
</html>