初识前端笔记之三

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

<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>

<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  message: 'Runoob',
  message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

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

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

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

三. float布局

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

对自身的影响
- float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
- 浮动元素的位置尽量靠上
- 尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
- 不影响其他块级元素的位置
- 影响其他块级元素的文本
- 上面贴非 float 元素
- 旁边贴 float 元素或者边框
对父级元素的影响
- 从布局上 “消失”
- 高度塌陷

浮动引起的高度塌陷

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}

.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}
</style>
<body>
    <div class=container>       
        <span class=left>float</span>
        <span>我是字</span>
        <span class=right>float</span>
    </div>
    <div class="container" style="height: 200px;background: blue">      
    </div>
</body>
</html>

效果如下:

图片.png

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

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

添加后效果如下:

图片.png

两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS 布局</title>
</head>
<style>
*{
   margin: 0;
   padding: 0;
}
.container{
   width: 400px;
   height: 200px;
}

.left{
   background-color: yellow; 
   float: left;
   height: 100%;
   width:100px;
}
.right{
   background-color: red; 
   margin-left: 100px;
   height:100%;
}
.container::after{
   content: '';
   display: block;
   visibility: hidden;
   clear: both
}

</style>
<body>
   <div class=container>       
       <div class=left></div>
       <div class=right></div>
   </div>
</body>
</html>

效果如下:

图片.png

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    margin-left: 100px;
    margin-right: 100px;
    height:100%;
}
.container::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}

</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class="middle"></div>
        <div class=right></div>
    </div>
</body>
</html>

效果如下:

图片.png

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

<div class=container>       
        <div class=left></div>
        <div class=right></div>
        <div class="middle"></div>
</div>

真实效果如下:

图片.png