前端（五）

时间 2019-11-08

标签前端繁體版

原文原文链接

一盒子模型

先来吐槽，学过android的应该知道：控件的宽和高指定了就不会改变，内容和padding共同分配这块区域，margin不属于控件的一部分。然而前端概念就多了：css宽高仅仅是内容区域，盒子的大小是：内容区域+2*padding+2*border+2*margin。标签的大小是:内容区域+2*padding+2*border。(android 好像是按照IE的规则去作的，不过在被前端淘汰了~)css

1.1body也有margin

<body>标签有必要强调一下。不少人觉得<body>标签占据的是整个页面的所有区域，实际上是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是所有区域。
前端

1.2认识weight和height

盒子的宽高！= css中写的宽高，css中写的仅仅是内容的占用区域。android

1.3认识padding

padding有四个方向，因此咱们可以分别描述4个方向的padding。
浏览器

写法一：bash

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;复制代码

写法二：综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是同样的）布局

padding:30px 20px 40px 100px;复制代码

若是写了四个值，则顺序为：上、右、下、左。
若是只写了三个值，则顺序为：上、右、下。??和右同样。
若是只写了两个值，则上、右边、和上同样、和右同样。

1.4认识border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。学习

border是一个大综合属性。好比说：ui

border:1px solid red;
复制代码

就是把4个边框，都设置为1px宽度、线型实线、red颜色。spa

1.5margincode

标准文档流中垂直方向margin有塌陷问题；

margin尽可能不要用在父子之间，最好用在兄弟之间；

margin 0 auto；是让盒子居中，要求有明确的宽度；

二标准文档流的特性

咱们在前边的文章中也说道过一些关于文档流的特性，这里系统概括一下：

不管多少个空格、换行、tab，都会折叠为一个空格。
同行内高低不齐，底部对齐。
行内元素和块级元素的区别。

行内元素：

与其余行内元素并排；

不能设置宽、高。默认的宽高，就是文字的宽高（行内替换元素除外）。

块级元素：

霸占一行，不能与其余任何元素并列；

能接受宽高。若是不设置宽度，那么宽度将默认变为父亲的100%,高度是包裹内容。

三行内元素和块级元素转换

咱们能够经过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素能够转换为行内元素：

一旦，给一个块级元素（好比div）设置：

display: inline;
复制代码

那么，这个标签将当即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div能够和别人并排了。

行内元素转换为块级元素：

一样的道理，一旦给一个行内元素（好比span）设置：

display: block;
复制代码

那么，这个标签将当即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span可以设置宽度、高度
此时这个span必须霸占一行了，别人没法和他并排
若是不设置宽度，将撑满父亲

四浮动

标准流里面的限制很是多，致使不少页面效果没法实现。若是咱们如今就要并排、而且就要设置宽高，那该怎么办呢？视乎根据现有的标准文档流规定无法实现。办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

经过浮动实现（行内元素宽高管用）实现代码：

.box1 {
            width: 200px;
            height: 300px;
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: #00ff00;
            float: left;
        }复制代码

<span class="box1"></span>
<span class="box2"></span>复制代码

经过浮动实现（块级元素在同一行效果）实现代码：

<div class="box1"></div>
<div class="box2"></div>复制代码

接下来总结一下经过浮动脱标后的特性，来更好的使用浮动布局：

浮动的标签在另一个层面进行排列，1浮动2不浮动，1会覆盖2。
浮动的标签自有特性：行内元素宽高管用、块级元素在同一行效果
浮动的元素互相贴靠。一、二、3 。这个时候3先挨着2，若是挨不住，再挨着1。
文字不会被浮动的盒子遮挡住。
收缩性：div浮动，宽度就变成了包裹内容。

小感觉：前端布局和android布局仍是有很大差异的。以前听前端说：都是一像素一像素的调，一块一块的去布局，还不太理解。如今理解了：原来布局全靠加减去算~，没有底部对齐，顶部对齐居中之类的属性。这点不太人性化哦~

学习浮动的第一天起就要知道浮动须要清除。清除浮动方式以下：

方法一：给浮动元素的祖先元素加高度

若是一个元素要浮动，那么它的祖先元素必定要有高度。

有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

方法二：clear:both;

若是祖先高度是0，那么意味着浮动没有被关住，可是不想让后边标签由于管不住而受到影响，就须要在后边标签属性上加上clear:both；clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：强制关闭浮动之间相互影响。这种方法有一个很是大的、致命的问题，它所在的标签，margin属性失效了。

方法三：隔墙法；

上面这个例子中，为了防止第二个div贴靠到第二个div，咱们能够在这两个div中间用一个新的div隔开，而后给这个新的div设置clear: both;属性；同时，既然这个新的div没法设置margin属性，咱们能够给它设置height，以达到margin的效果（曲线救国）。这即是隔墙法

方法四：内墙法；

div{
            background: #0000ff;
        }
        p{
            width: 100px;
            height: 100px;
            background: #FF0000;
            float: left;
        }
        .cl{
            clear: both;
        }复制代码

<div>
    <p></p>
    <div class="cl"></div>
</div>复制代码

方法五overflow:hidden;

overflow:hidden;的本意是清除溢出到盒子外面的文字。可是，前端开发工程师发现了，它能作偏方。以下：

一个父亲不能被本身浮动的儿子，撑出高度。可是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。