Python学习 Day 041 - css 盒模型

主要内容

1.盒模型
2.浮动

1.盒模型

(1)盒模型的属性

width :内容的宽度
height :内容的宽度
padding :内边距,边框到内容的距离
border :边框,就是指的盒子的宽度
margin :外边距,盒子边框到附近最近盒子的距离

    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height:200px;
            padding:50px;
            background-color:red;
            border: 1px solid yellow;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box">倚天屠龙记</div>
</body>

盒模型代码

(2)盒模型的计算

如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变
通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离

(3)padding(内边距)

padding：就是内边距的意思，它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

padding的设置

    <title>Title</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*四个方向都有值*/
            /*padding: 30px;*/
            /*两个值:上下 左右*/
            /*padding: 20px 30px;*/
            /*三个值:上 左右 下*/
            /*padding: 30px 20px 40px ;*/
            /*四个值:上 右 下 左 顺时针*/
            /*padding: 20px 30px 40px 50px;*/
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>

padding的设置

(4)border(盒子边框)

    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color:yellow;
            /*border: 1px solid red;*/
            /*根据方向来设置属性*/
            /*border-left: 5px solid darkred;*/
            /*border-right: 5px dotted darkblue;*/
            /*border-top: 8px double darkcyan;*/
            /*border-bottom: 4px solid darkgreen;*/
            /*根据三要素*/
            /*设置顺序是逆时针*/
            border-width: 2px 5px 8px 10px;
            border-style:solid double dashed dotted;
            border-color:red blue cyan dodgerblue;
        }
    </style>

</head>
<body>
<!--三要素 粗细 线性样式 颜色-->
<div class="box"></div>

border设置

    <title>Title</title>
    <style>
        .sanjiao{
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-bottom:50px solid green;
            border-right:50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="sanjiao"></div>
</body>

三角形的制作

(5)margin

定义:外边距一个盒子到另一个盒子的距离,前提条件:标准文档流下

水平方向上:不会出现任何问题

    <title>Title</title>
    <style>
        .top{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
            margin-right: 30px;
        }
        .header{
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color:yellow;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <span class="top"></span><span class="header"></span>

水平方向设置不会有问题

垂直方向上: 会出现塌陷问题,我们以后再布局页面的时候设置一个方向,而不要设置两个方向

    <title>Title</title>
    <style>
        .top{
              width: 200px;
            height: 200px;
            background-color: red;
            /*margin-bottom: 50px;*/
        }
         .header{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin-top: 150px;
        }
    </style>
</head>
<body>
<!--此时两个盒子的垂直方向margin出现"塌陷问题"
   如何避免 只要设置一个方向
    margin  描述的是兄弟标签 的之间的距离
    padding 描述的父子标签
-->
    <div  class="top"></div>
    <div class="header"></div>
</body>

垂直方向的塌陷问题的解决

(6)margin和padding的使用

(7)标准文档流下让盒子居中

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;
            color: #fff;
        }
        /*将所有a标签设置为没有下划线*/
        a{
            font-size: 14px;
            color: #b0b0b0;
            text-decoration: none;
        }
        #top{
            width: 100%;
            background: #000;
            height: 40px;
            line-height: 40px;
        }
        .container{
            width:1226px;
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            margin: auto;
        }
        #top a:hover{
            color: #fff;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="container">
        <div class="top-l">
            <!--div标签是块级标签 独占一行,span是行内标签 一行内显示-->
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="#" target="_self">loT</a>
            <span class="sep">|</span>
        </div>
    </div>
</div>
<div>
    <div class="container"></div>
</div>
</body>

盒子居中

2.浮动

(1)标准文档流下的微观现象

(2)浮动的好处

    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:red;
            /*display: inline-block;*/
            float:left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
            /*display: inline-block;*/
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div><div class="box2"></div>
</body>

浮动的好处-实现元素的并排

(3)浮动的现象

脱离标准文档流
字围效果
如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高
贴边现象

(3)浮动带来的问题

如果父盒子没有设置高度,子盒子都设置浮动,(脱标了,不在文档上占位置) 撑不起父盒子的高度

清除浮动的方法

给父盒子设置固定的高度

    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*1.给父盒子设置高度*/
            height: 40px;

        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        /*.clearfix{*/
            /*clear: both;*/
        }
    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
</div>
<div class="header"></div>

给父盒子设置固定gaodu

内墙法:

在最后一个浮动元素的后面添加一个空的块级的标签,给这个标签设置类名clearfix

    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*1.给父盒子设置高度*/
            /*height: 40px;*/

        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
</div>
<div class="header"></div>

内墙法

伪元素清除法

.clearfix{
    content:'.';
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

overflow:hidden

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

Python学习 Day 041 - css 盒模型

猜你喜欢