前端课程-盒模型浮动及清除浮动 041

一 .盒模型概念 :

　　属性:

　　　　width 内容的宽度

　　　　height 内容的高度

　　　　margin 外边距一个盒子到另一个盒子的距离

　　　　　　前提条件是 :标准文档流下

　　　　　　奇技淫巧 margin 垂直方向塌陷问题水平方向上不会出现问题

　　　　　　避免方式 : 只设置一个方向

　　　　　　非标准文档流下:

　　　　　　　　不管水平还是垂直方向 , 都不会出现任何问题

　　　　　　margin 描述的是兄弟标签7

　　　　padding 内边距内容到边框之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: darkgoldenrod;
            /*一个值代表四个方向都是这个值*/
            /*padding: 30px;*/
            /*两个值  先上下 后左右*/
            /*padding: 20px 30px;*/
            /*三个值  上 左右 下 顺时针*/
            /*padding: 30px 20px 40px;*/
            /*四个值 上 右 下 左 顺时针方向*/
            /*padding: 20px 30px 40px 50px;*/
            /*该写法 与上述写法一样*/
            padding-top : 20px;
            padding-bottom : 30px;
            padding-left : 40px;
            padding-right : 50px;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

View Code

　　　　border 1px solid blue 盒子的边框

　　　　　　三要素线条粗细, 线条样式(实线虚线双线点划线), 线条颜色.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: darkgoldenrod;
            /*根据方向来设置属性*/
            border-left: 1px solid darkred;
            border-right: 5px dotted darkblue;
            border-top: 10px double darkslateblue;
            border-bottom: 1px dashed red;
            /*根据三要素*/
            /*线条粗细*/
            /*border- 5px 10px 1px;*/
            /*边框类型 实线 双划线 虚线 点画线*/
            /*border-style: solid double dashed dotted;*/
            /*根据颜色选择*/
            /*border-color: red blue green yellow;*/
        }
    </style>
</head>
<body>
    <!--三要素  粗细 线型样式 颜色-->
    <div class="box">alex</div>
</body>
</html>

View Code

　　　　需求做一个302*302的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*第一种方法*/
        .box{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 1px solid red;
            background-color: darkslateblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

盒模型的计算

　　如果保证盒子模型不变加padding 就要对盒模型宽或高减保证盒子模型不变即保证数据加和起来还是原来的数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 50px;
            background-color: red;
            border: 1px solid blue;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <!--在标准文档流下 :块级标签和行内-->
    <div class="box">alex</div>
    <div class="box">alex</div>
</body>
</html>

　　通过padding 能调整字内容的位置 padding能将内容进行移位对于padding来说通常描述的就是父子之间的距离

　　margin : 外边距的意思. 表示边框到最近盒子的距离

　　　　在水平方向不会有任何问题两个行内的块对接可能会产生中间有一条缝隙现象将两个块级标签排到一行就行了中间不要留任何空格就没有了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            /*块级元素和行内元素的互换 display属性 即显示模式*/
            /*将top类的行内元素轻质转换成行内元素的块元素
            这样既可以给这个span设置宽度和高度(块的属性)
            又可以和别人并排(行内元素的属性)*/
            display:inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 30px;
        }
        .header{
            display:inline-block;
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <span class="top"></span><span class="header"></span>
</body>
</html>

View Code

　　　　但是垂直之间会有塌陷现象:垂直之间塌陷的原则是以两盒子最大的外边距为准。

　　　　　　塌陷产生的条件: 两个块级标签垂直排布并且上边的向下margin 下边的向上margin两个标签的margin有交合(交互重合不知道这样描述对不对)时才会有塌陷现象如果没有交互即同向上或同向下或者上边的向上下边的向下都没有影响.

　　　　margin 描述的是兄弟标签之间的距离即块级标签的距离

　　　　padding 描述的是父子标签

　　做一个三角形图标: 利用线宽交合在一起产生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle{
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-bottom: 40px solid green;
            border-right: 40px solid transparent;

        }

    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

View Code

　　结果如图:

标准文档流:宏观的讲:web页面和ps等设计软件有本质区别 web的制作是一个流从上而下 ,像织毛衣 . 即标准文档流而设计软件想在哪里画东西就在哪里画东西.

　　微观现象:

　　　　1 .空白折叠现象 : 多个空格会被合并成一个空格显示到浏览器页面中

　　　　2 .高矮不齐底边对齐主要是指文字和图片并列因高度不同产生的现象.

　　　　3 .自定换行

版心设置设置一个块级标签封装行内标签并有序排列?:

浮动: 实现元素并排

　　float 默认none效果

　　现象 : 脱标(脱离标准文件流)

　　收缩效果 (块级元素隐式的转换成行内)

　　字围效果

　　如果标签一旦浮动就不区分行内标签还是块级标签都可以任意设置宽高

　　贴边现象如果父元素有足够的空间那么前后之间的块级标签相互紧紧依靠着

　　　　　　如果空间不足最右边的会靠着与它相隔的那个标签如果相隔的那个没有足够的空间给它靠会继续往边靠直到靠到最左边的父类边为止

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

　　浮动不会给父盒子一个高度那么浮动子元素不会填充父盒子高度,那么此时第二个父盒子就会跑到第一个位置上影响页面布局虽然浮动能实现页面元素并排的效果但是还是带来了页面布局的极大混乱所以要清除浮动

　　清除方法:

　　　　1 . 给父盒子设置高度

　　　　2 .内墙法

　　　　　　在浮动的元素后面添加一个空的块级标签并且设置该标签的属性 clear:both 重置所有元素设置.

　　　　3 .伪元素清除法

　　　　给浮动的父辈盒子加

　　　　　　.clearfix{

　　　　　　　　　　clear:both;

　　　　　　　　　　content:'.';

　　　　　　　　　　display:block;

　　　　　　　　　　visibility:hidden;

　　　　　　　　　　heght:0;}

　　　　4 .overflow:hidden

　　　　　　BFC:

浮动带来的好处:

　　对于布局非常有用 flask()

　　压盖现象,不用浮动做压盖要浮动一起浮动 , 有浮动清除浮动

　　想压盖用定位

前端课程-盒模型 浮动及清除浮动 041

前端课程-盒模型浮动及清除浮动 041