CSS-盒子模型

页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位

1、基础样式

text-align     行元素水平方向

text-decoration      控制下划线 none没有 underline有

line-hight    行高，实际位置是文字的大小+上下的空白间距

font-size      设置字体大小

font-weight      设置字体粗细（bold 加粗）

font-family       设置字体样式

letter-spacing        设置中文字体间间距

word-spacing        设置英文单词之间的间距

2、边框颜色

<style>
  div{
    border-color:red blue; 
    border-color:red blue blueviolet;
    border-color:red blue blueviolet green; 
    border-top-color: yellow;
    border-left-color: orange;
    border-bottom-color: green;
    border-right-color: red;
    }
</style>

3、边框粗细

border-width    （同上）

4、边框样式

border-style：solid；实线    dashed 虚线     double 双线

5、边框简写

div{
border-style：1px solid red;
 }

6、外边框

margin：10px；

margin-top：10px；

margin：0px auto； /*居中*/

7、内边框

padding：10px；

list-style=none  去除列表前样式 (点)

8、背景

background-color  设置背景颜色

background-image     设置背景图片

background-position       设置背景图片的位置

background-size    设置背景图片的大小

background-repeat    设置背景图片是否重复

background-attachment  设置背景图片相对浏览器的定位位置

div{
  width: 1000px;
  height: 1000px;
  background-color: #008B8B;
  background-image: url(./timg.jpg);
  background-position: center;
  background-size: 50px 50px;
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background: #008B8B url(./timg.jpg) no-repeat;
}

9、display属性

        display:none;     隐藏元素      隐藏后不占原位

        display:block;    将元素变为块元素

        display:inline;    将元素变为行元素

        display:inline-block;    将元素变为行内块元素

        visibility：hidden；     隐藏后仍占原位

使用inline-block属性后，元素块之间会出现一个间距

方案：将其所在的父元素的font-size设为0，具体的元素字体大小再针对性的设置

10、浮动

     浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

float:left; /*左浮动*/
float:right; /*右浮动*/

      清除浮动

clear:left; /*清除左浮动*/
clear:right; /*清除右浮动*/
clear:both; /*清除浮动*/

     解决浮动塌陷：

         a: 给父类设置固定宽高

         b: 给父级设置一个overflow:hidden

         c: 在浮动下方清除浮动

11、定位

position:relative; 相对定位，不脱离文档流，保留原来的位置

position:absolute; 绝对定位，脱离原来的层，不占原位，别的层就可以上去

position:fixed; 相对浏览器定位

z-index:1; 堆叠顺序 数值越大越靠前

/*相对定位 会保留原来的位置*/
 position: relative;
 left: 150px;
 top: 150px;
/*绝对定位 不保留原来位置*/
 position: absolute;
 left: 150px;
 top: 150px;
/* 固定定位*/
 position: fixed;
 top: 220px;
 right: 10px;
/*堆叠顺序 数值越大越靠前*/
 z-index: 1;

12、css3常见效果

圆角效果：border:radius;

整体透明：opcity 透明度在0~1之间

背景透明只针对背景颜色进行透明

background-color:rgba(x,x,x,x) 透明度在0~1之间

盒子阴影

box-shadow: 3px 3px 9px 3px grey inset;

/*X轴偏移量 Y轴偏移量 阴影模糊程度 阴影扩展半径 阴影颜色 inset内阴影*/

文本阴影 text-shadow