复习之CSS（二）——字体、背景、列表样式及盒子模型

水深无声 2022-05-12 13:56 94阅读 0赞

## 盒子模型 ##

![在这里插入图片描述][70]

## 字体样式 ##

font-family: "微软雅黑","宋体",sans-serif;
                /*绝对单位|相对单位 通常使用相对单位px受显示器分辨率影响 em相对父元素的多少倍 180%和1.8em*/
                font-size: 20px;
                text-indent: 2em;/*行距*/
                line-height: 30px;/*行高 可以使用em 百分比 这和文本大小有关*/
                word-spacing: 2px;/*单词间距*/
                letter-spacing: 2px;/*字母间距*/
                text-transform: none;/*首字母大小写*/
                text-decoration: underline;/*文本的样式装饰 underline下划线 overline上划线 line—through 中划线（删除线）*/
                color:red;
                /*#080 ==#008800*/
                font-weight: bold;/*文本粗细 加粗*/
                font-style: italic;/*斜体*/
                font-variant: small-caps;/*小型大写字母*/
                text-align: center;/*文本对齐方式 只对块级元素div p等有效，span ，img等无效  justify实现两端对齐文本效果*/

![在这里插入图片描述][70 1]

## 背景 ##

width: 100px;
                height: 100px;
                background-color: #FF2F2F;/*背景颜色 transparent 透明色*/
                background-image: url("");/*背景图片*/
                background-position: 20px,20px;/*背景起始位置*/
                background-attachment: scroll;/*背景图像是否固定或者随着页面的其余部分滚动*/
                background-repeat: no-repeat;/*设置背景图像是否重复及如何重复*/
                background: #50074d;/*简写属性，作为是将背景属性设置在一个声明中*/
                padding: 2px;/*n内边距*/
                margin: 2px;/*外边距*/
                border: 20px solid blue;/*边框*/

### 行内元素、块级元素 ###

![在这里插入图片描述][70 2]

### 列表样式 ###

list-style-type: square;/*列表项的标记样式*/
                list-style-image: url("");/*图片列表项的标记样式 */
                list-style-position: inside;/*多行时候图标使用是否占用文本位置*/

### 继承关系 ###

![在这里插入图片描述][70 3]

## 居中设置 ##

*  行内样式居中

.jv{
                vertical-align: middle;
                text-align: center;
    
            }

*  块级中元素样式居中  
    display两个元素都设置 然后vertical-align: middle;垂直居中才生效

div{
                height: 200px;
                width: 100%;
                border:1px #FF2F2F solid;
                display: table;
            }
            div h2{
                vertical-align: middle;
                display: table-cell;
                text-align: center;
            }

[70]: /images/20220504/9caa0e4265974eec85fe67466fcc003e.png
[70 1]: /images/20220504/a69c73be2baf41a1902b19da20e03c52.png
[70 2]: /images/20220504/a728546f5525444bac1fc648c9c53d9d.png
[70 3]: /images/20220504/adfece0f9e304ed487cf6e2a9f978677.png