字体图标盒子布局(如何设计文件盒标签)
字体图标引入
-. 阿里图标网站 www.iconfont.cn
字体图标其实是字体可以按文本方式设置样式
<span class="iconfont icon-bianji"></span><span class="iconfont icon_detail_opinion icon-icon_detail_opinion"></span><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-Dyanjing"></use></svg><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .iconfont.icon_detail_opinion.icon-icon_detail_opinion { font-size: 50px; color: rgb(235, 20, 20); } .iconfont.icon-bianji { font-size: 100px; color: rgb(235, 20, 20); }</style>
盒子布局
<div class="box"></div><style> .box { width: 200px; height: 200px; /* border: chartreuse 10px solid; */ background-color: #999; border: 10px dashed springgreen; background-clip: content-box; padding: 20px; }</style>
强制盒子大小(不受其他因素影响)
box-sizing: border-box;
此时 width 和 heigth 设置的大小 ,就是最终的大小,所有(比如 border 的宽度以及 padding 的值都会向盒子内部扩展,不向外部扩展.此时内容区会变小)
边框 border
width: 200px; (盒子宽度)
border-top: 1px solid #000;; (单独设置每条边框的属性,此为简化写法)
border-top-style:solid ;(上边框样式为实线)
border-right-width:200px ;(右边框宽度为 200px)
border-bottom-color: red;(下边框颜色为红色)
height: 200px;(盒子高度)
background-color: #999;(盒子背景色)
border: 10px solid chartreuse;(边框大小,粗细,颜色)
none 无
hidden 隐藏
dotted 圆点虚线
dashed 横线虚线
solid 实线
double 双实线
groove:根据 color 值,显示 3D 凹槽边框
ridge:根据 color 值,显示 3D 凸槽边框
inset:根据 color 值,显示 3D 凹边边框
outset:根据 color 值,显示 3D 凸边边框
background-clip: content-box;(边框背景裁剪,边框不覆盖背景颜色)
border-top-left-radius: 10px;(radius 为圆角边框; 此为左上角为圆角 10px)
内边距 padding
内边距
.box { padding: 20px 15px 10px 5px; padding: 20px 15px 10px; padding: 20px 10px; padding: 20px;}
四值语法: 设置分别为:上,右,下,左分别设置
三值语法: 中间值表示左右;两边值表示上下(上:20,右 15,下 10,左 15)
双值语法: 第一个为上下,第二个值为左右
单值语法: 设上,右,下,左均为 20px
简化通用方案
样式重置的简化方案
* { padding: 0; margin: 0; box-sizing: border-box;}
常用单位
px,em,rem, vh, vw
绝对单位 px
相对单位
em : em = 当前或父级的字号倍数; 1em = 1 倍的 font-size 的大小 (浏览器的默认大小=16px)
rem: rem = 永远和 html 的 font-size 的字号绑定
vw: 将视口分成 100 分 一个 vw = 1/100
vh: 将视口分成 100 分 一个 vh = 1/100