初识前端笔记之三

v-model
① input 和 textarea 元素中使用 v-model 实现双向数据绑定

input 元素：

消息是: {{ message }}

textarea 元素：
{{ message2 }}

二.
当然, 还有用来改变盒模型width范围的一个css3的属性, box-sizing:

当设置为'border-box'时, width = border + padding + content;

当设置为'content-box'时, width = content。

三. float布局

1. 什么是浮动
   浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

2. 浮动的特点

• 对自身的影响

  • float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
  • 浮动元素的位置尽量靠上
  • 尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉

• 对兄弟元素的影响

  • 不影响其他块级元素的位置
  • 影响其他块级元素的文本
  • 上面贴非 float 元素
  • 旁边贴 float 元素或者边框

• 对父级元素的影响

  • 从布局上 “消失”
  • 高度塌陷

3. 浮动引起的高度塌陷

什么是高度塌陷，举个例子吧

    
    



    
       
        float
        我是字
        float
    
    
      
    

效果如下:

图片.png

从图中可以看出，两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
最常用到的解决办法是:
给父元素加一个 after 伪类

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

添加后效果如下:

图片.png

4. 两栏布局

效果如下:

图片.png

上面代码中最重要的是 margin-left: 100px;，这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div。

这就是浮动布局的基本思想。

5. 三栏布局
   左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位

效果如下:

图片.png

因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

真实效果如下:

图片.png