前端学习笔记_css(2)

resize

<textarea><textarea>

该元素在页面的大小是不被固定的，其解决方法：

textarea{
    resize:none;
}

或者

textarea{
    width: 400px;
    height: 200px;
    max-width: 400px;
    min-width:400px;
    max-height: 200px;
    min-height: 200px;
}

opacity与rgba()的区别

<div class="a">opacity</div>  
<div class="b">rgba()</div>   

.a{
    width:400px;
    height:400px;
    background: #000;
    filter:alpha(opacity=50);
    opacity: .8;
} 

.b{
    width:400px;
    height:400px;
    background: rgba(0,0,0,.8);
}   

测验可以看出来， opacity会连同里面的内容一起受到影响，而rgba()只影响div。以上两种方法均能隐藏元素，还有其它的方法么？
当然啦，还有

div{ visibility: hidden; }   //隐藏元素，但还是占据了原来的位置

border-radius

<div class="c"></div>

想要画一个圆，怎么做呢？

.c{
    width: 200px;
    height: 100px;
    border: 1px solid deeppink;
    border-radius:50%;  
}

border-radius还可以这样设置：

border-radius:50px;  
border-radius:50px 0; 
border-radius:50px 50px 50px 0; 

还可以这样来设置：

border-radius:60px 40px 30px 20px / 30px 20px 15px 10px;
border-radius:50% / 0% 0% 100% 100%;

那么多种方式，具体还是要自己去定制。

box-shadow

阴影分为外阴影和内阴影，首先来看看阴影都有哪些参数：

box-shadow:0 0 10px 0 lime inset;  //x-offset  y-offset  阴影模糊度  扩散半径  颜色  阴影类型

inset如果设置了，就是内阴影。
阴影还可叠加：

box-shadow:0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6);

还有一种设置阴影的方法，来看个小例子：

.d{
    background:yellowgreen;
    box-sizing:border-box; 
    border:10px solid #655;
    outline: 15px solid deeppink;  //不占据位置
}

    <div class="d"></div>

盒模型

盒模型我们可以把它看作生活当中的盒子，盒子里装的东西呢就是内容，如果害怕损坏在东西和盒子之间添加一些泡沫，就是padding，盒子的边框有它的厚度颜色，就是border。

盒模型的总长度和总宽度都包含了哪些？
总宽度=内容的宽度+margin+padding+border
总长度=内容的长度+margin+padding+border

CSS3中的盒模型

-webkit-box-sizing:border-box;
box-sizing:border-box;  //不计算padding和border

当然，box-sizing还有其它的值，其效果还是要自己去测试了。