常用样式属性

微信小程序开发图解案例教程（附精讲视频）（第3版）PAGE36PAGE2常用样式属性1.display显示（见表2.10）表2.10display显示属性说明flex多栏多列布局，常和flex-direction:row/column一起使用inline-block行内块元素续表属性说明inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似<table>），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似<table>），表格前后带有换行符table-caption作为一个表格标题显示（类似<caption>）table-cell作为一个表格单元格显示（类似<td>和<th>）table-column作为一个单元格列显示（类似<col>）table-column-group作为一个或多个列的分组来显示（类似<colgroup>）table-row 作为一个表格行显示（类似<tr>）table-row-group作为一个或多个行的分组来显示（类似<tbody>）table-header-group作为一个或多个行的分组来显示（类似<thead>）table-footer-group作为一个或多个行的分组来显示（类似<tfoot>）inherit从父元素继承display属性的值2.position定位（见表2.11）表2.11position定位属性说明absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行规定relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的LEFT位置添加20像素fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left"、"top"、"right"及"bottom"属性进行规定。staticinline-flex将对象作为内联块级弹性伸缩盒显示inherit规定应该从父元素继承position属性的值3.float浮动（见表2.12）表2.12float浮动属性说明left元素向左浮动right元素向右浮动none默认值。元素不浮动，并而会显示在其在文本中出现的位置inherit规定应该从父元素继承float属性的值4.background背景（见表2.13）表2.13background背景属性说明background简写属性，作用是将背景属性设置在一个声明中。background:colorpositionsizerepeatoriginclipattachmentimage;background-color指定要使用的背景颜色background-position指定背景图像的位置，如：background-position:centerbackground-size指定背景图片的大小，如：background-size:80px60px;（宽度、高度）background-repeat指定如何重复背景图像，如：repeat,、repeat-x,、repeat-y,、no-repeat,、inheritbackground-origin指定背景图像的定位区域，默认为padding-box，表示背景图像填充框的相对位置border-box背景图像边界框的相对位置content-box背景图像的相对位置的内容框background-clip指定背景图像的绘画区域。属性值为border-box，、padding-box，、content-boxbackground-attachment设置背景图像是否固定或者随着页面的其余部分滚动scroll背景图片随页面的其余部分滚动。这是默认属性fixed背景图像是固定的inherit指定规定background-attachment的设置应该从父元素继承local背景图片随滚动元素滚动background-image指定要使用的一个或多个背景图像，使用url（'URL'）指定图像的URL，其中URL是图像的地址路径5.border边框（见表2.14）表2.14border边框属性说明使用方法border简写属性，用于把针对4个边的属性设置在一个声明中border:5pxsolidred;border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度thin、medium、thick、lengthborder-style设置元素所有边框的样式，或者单独地为各边设置边框样式solid、dashed、dotted、double等border-color设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色border-color:red;6.outline轮廓（见表2.15）表2.15outline轮廓属性说明使用方法outline在一个声明中设置所有的轮廓属性outline:outline-color,outline-style,outline-widthoutline-color设置轮廓的颜色outline-color:redoutline-style设置轮廓的样式solid、dashed、dotted、double等outline-width设置轮廓的宽度thin、medium、thick、length7.text文本（见表2.16）表2.16text文本属性说明属性值color设置文本颜色direction设置文本方向ltr：文本方向从左到右rtl：文本方向从右到左letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值。由浏览器决定right：把文本排列到右边center：把文本排列到中间justify：实现两端对齐文本效果inherit：规定应该从父元素继承text-align属性的值text-decoration向文本添加修饰underline：定义文本下的一条线overline：定义文本上的一条线line-through：定义穿过文本的一条线blink：定义闪烁的文本text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow:h-shadowv-shadowblurcolor;h-shadow：水平阴影的位置，允许负值v-shadow：垂直阴影的位置，允许负值blur：模糊的距离color：阴影的颜色text-transform控制元素中的字母capitalize：文本中的每个单词以大写字母开头uppercase：定义仅有大写字母lowercase：定义仅有小写字母vertical-align设置元素的垂直对齐baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inheritwhite-space设置元素中空白的处理方式normal、pre、nowrap、pre-wrap、pre-line、inheritword-spacing设置字间距normal、length、inherit8.font字体（见表2.17）表2.17font字体属性说明属性值font在一个声明中设置所有字体属性font:font-stylefont-variantfont-weightfont-size/line-heightfont-family（按顺序）font-style指定文本的字体样式normal：默认值。浏览器显示一个标准的字体样式italic：浏览器会显示一个斜体的字体样式oblique：浏览器会显示一个倾斜的字体样式inherit：规定应该从父元素继承字体样式续表属性说明属性值font-variant以小型大写字体或者正常字体显示文本normal：默认值。浏览器会显示一个标准的字体small-caps：浏览器会显示小型大写字母的字体inherit：规定应该从父元素继承font-variant属性的值font-weight指定字体的粗细normal：默认值。定义标准的字符bold：定义粗体字符bolder：定义更粗的字符lighter：定义更细的字符inherit：规定应该从父元素继承字体的粗细font-size指定文本的字体大小smaller：把font-size设置为比父元素更小的尺寸larger：把font-size设置为比父元素更大的尺寸length：把font-size设置为一个固定的值%：把font-size设置为基于父元素的一个百分比值font-family指定文本的字体系列9.margin外边距（见表2.18）表2.18margin外边距属性说明使用方法margin在一个声明中设置所有外边距属性margin:10px5px15px20px;（上外边距，右外边距，下外边距，左外边距）margin-top设置元素的上外边距margin-right设置元素的右外边距margin-bottom设置元素的下外边距margin-left设置元素的左外边距