css基础

边框属性

border左右边框+border上下边框，包括样式、颜色、宽度属性。主要标注border-style样式，如果不设置就是none，在盒子模型里就没有边框
代码如下

.box{ background-color: blue;
    width: 200px;
    height: 200px;
    padding: 50px;
    margin: 50px;
    border : 10px ;
    box-sizing:border-box;
    }

结果如图

盒模型属性

又叫框模型

1. box-sizing：有三个属性：content-box（default），border-box，padding-box(好像不管用)。
   如果box-sizing的属性为border-box，则表示盒子的width属性包含border之内的宽度。代码如下：

.box{ background-color: blue;
    width: 200px;
    height: 200px;
    padding: 50px;
    margin: 50px;
    border : 10px solid;
    box-sizing:border-box;
    }

结果如图

1. clear：设置盒子的左、右边界或者左右边界不允许出现浮动元素，阻止浮动元素堆叠。left、right、both、none
2. display：设置元素盒子的类型
3. float：将元素移动到起包含块的左边界或者右边界，或者另一个浮动元素的边界。left、right、none元素固定
4. height：设置元素盒子的高度
5. width：设置元素的高度
6. margin：设置元素盒子四个外边距宽度的简写属性
7. padding：设置元素盒子四个内边距宽度
8. overflow：设置内容横向和竖向溢出盒子时处理方式。
   overflow-x，overflow-y属性值包括auto浏览器自行处理溢出的内容；
   hidden多余的部分直接剪掉，只显示盒里面的内容；
   scroll，为了让用户看到所有的内容，浏览器会添加滚动机制；
   visible，默认值，不管是否溢出都显示内容；
   no-content如过内容无法全部显示，就直接移除；
   layno-dispaly如果不能全部显示，就隐藏所有内容
9. visibility：设置元素的可见性
   collapse，元素不可见，且在页面布局中不占据空间，表相关元素只能应用到
   hidden，元素不可见，但在页面布局中占据空间
   visible，默认值，元素在页面上可见

布局元素

1. bottom：设置元素下外边距边界与包含块下边界之间的偏移
2. left：设置元素左外边距边界与包含块左边界之间的偏移
3. right：设置元素右外边距边界与包含块右边界之间的偏移
4. top：设置元素上外边距边界与包含块上边界之间的偏移
5. bottom、left、right、top设置偏移量的时候，指的是相对于position属性指定的元素的偏移量，他们是普通的定位元素
6. position：设置元素的定位方法。包括三种属性：
   absolute相对于position值不为static的第一位祖先元素来定位、
   relative相对于普通位置的定位、static默值、fixed相对于浏览器窗口来定位
7. z-index：设置定位元素的堆叠顺序，数字且允许取负值。值越小，在层叠顺序中就越靠后。
8. display：指定元素在页面上的显示方式：
   none元素不可见，且在页面布局中不占空间；
   block盒子显示为段落；
   inline-block盒子显示文本行；
   list-item盒子显示列表项；
   flexbox，弹性盒子布局
9. flexbox包括很多属性

flex-align，flex-direction、flex-order、flex-pack

box-align如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间。包括属性：
start元素沿容器的顶边放置任何空的空间都在其下方显示
end元素沿容器的底边放置任何空的空间都在其上方显示
center多余的空间被平分为两个部分，分别显示在元素的上方和下方
stretch调整元素的高度，以填充可用的空间
box-flex指定元素的可伸缩性，应用于弹性盒容器内的元素，数值
box-pack如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间，包括属性start、end、center、justify
start元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边
end元素从边右界开始放置，任何未分配的空间显示到第一个元素的左边
center多余空间平均分配到第一个元素的左边和最后一个元素的右边
justify多余空间均匀分配到各个元素之间

文本属性

font：属性包括

font-family、font-size、font-color、
font-weight、font-variant

letter-spacing：字母间距
word-spaceing：单词间距
line-height：设置行高
text-align文本对齐
text-indent文本块中首行文本的缩进
text-justify文本对齐方式
text-shadow文本块的阴影效果
text-transform文本块字母大小写
text-decoration添加到文本的修饰