css基础

边框属性

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

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

结果如图

盒模型属性

又叫框模型

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; }

结果如图

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

布局元素

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