盒模型、字体样式及边框

160 阅读1分钟

list-style-type: none;【去除文本前年的小黑点】

 vertical-align: middle;【图片与前面文本对齐】

 *{margin:0 padding:0}【表示通配符,代表所有的标签】

 margin和padding:两个值:上下 左右; 三个值:上 左右 下; 四个值:上 右 下 左;

 background-image:url()【使用背景图片】

 background-repeat: no-repeat;【图片不平铺】

repeat-x repeat-y position【图片的位置】 

background:#CC0001 url(./image/arrow-down.gif) 250px center no-repeat;

              ↑

颜色 图片路径 位置 格式 

像素值:px或 %

 水平方向:left、center、right 50%与center作用一样 

垂直方向:top、center、bottom 

【盒子模型】是由margin+border+padding+content组成 

padding【会改变div显示的宽高】

 solid【表示实线】

 border和background、font一样,都是复合属性

 border:像素 solid transparent; 

border-left:像素 solid red; 

【右箭头表示方法】 border-top-width:10px 

                                border-top-style:solid 

                                border-top-color:red

top【上】left【左】bottom【下】right【右】 

 none【无边框】 solid【实线边框】 dashed【虚线边框】

 dotted【点状边框】 double【双线边框】 hidden【隐藏】

 transparent【透明色】 

【display移动图片位置】 display:inline-block; 

background:ur(./) center 0px no-repeat;

 .icon4:hocer{background-positiong-y:-24px;}

科外知识【qq截图快捷键Ctil+Alt+A

qq截图+Ctil+Alt+A 按住Ctrl+C取色】