01、常用样式

1.1、background背景

设置元素背景的样式 background，更好的衬托内容。

.dbackg {
    background: no-repeat url(/res/qq-128.png), red;
    background-color: rgb(76, 16, 189);
    background-image: url(../res/bimg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 40px;
    background-size: 100px 200px;
    background-size: cover;
    background-position: center top;
    height: 40px;
}

1.2、font文字样式

针对文字 font 的样式属性，都支持默认继承。

.fsum {
    color: red;
    color: #ff0000;
    color: rgb(255, 0, 0);
    color: rgba(255, 0, 0, 1);
    font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei","微软雅黑",STXihei,"华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
    font-size: 20px;
    font-style: oblique;
    font-style: italic;
    font-weight: 600;
    font-weight: bold;
}

用@font-face 加载网络字体。

@font-face {
    font-family: "myFont";
    src: url("myFont.ttf");
}
html {
    font-family: "myFont", "Bitstream Vera Serif", serif;
}

1.3、text文本样式

针对文本布局、装饰的样式类属性，基本都支持默认继承。

属性	描述	值/备注
text-align	文本水平对齐，对所有行内内容有效，不限文本	left、center、right、justify
text-indent	段落首行缩进	尺寸px、em，text-indent: 2em;
text-decoration	文本装饰线样式，下面几个属性的简写	text-decoration: underline overline blue dashed 1px;
text-decoration-line	设置文本的装饰线，如a元素的下划线	🔸 underline：下划线；overline：上划线； 🔸 line-through：中划线 🔸 none：无，可用于去掉a标签的默认下划线
text-decoration-style	装饰线线的样式	波浪线wavy，实线solid，虚线dashed，双实线double，点线dotted
text-decoration-color	装饰线颜色
*-thickness	装饰线粗细	text-decoration-thickness: 3px;
text-shadow	文本阴影特效，4个值：水平偏移，垂直偏移，模糊半径，阴影颜色	可设置多组值，叠加生效
text-transform	控制文本的大小写	🔸 capitalize： /ˈkæpɪtəlaɪz/ 大写字母开头。 🔸 uppercase：全大写字母；lowercase：全小写字母。
writing-mode	文本内容排列方向，水平、垂直	writing-mode: vertical-lr;文字垂直排列
letter-spacing	增加或减少字符间的空白（字符间距）	letter-spacing:-3px;
word-spacing	单词间距	word-spacing: 1cm;
text-overflow	处理溢出的内容，配合 overflow 和 white-space显示超长文本为省略号...	ellipsis 显示为省略号...；clip 裁剪
white-space	元素中空白的处理	nowrap，强制空白符合并、不换行（一行内显示完，除非<br>)
overflow-wrap、word-break、word-wrap	都是针对长单词的强制换行，如长的url地址。	wrap，/ræp/ 换行

<div>
    <p class="textf">textf1111234 针对文本布局、装饰的样</p>
</div>
<style>        
    .textf {
        background-color: #0004; color: #666;
        font-size: 40px; font-weight: bolder;

        text-align: center; text-indent: 2em;
        text-transform: uppercase;
        letter-spacing: 3px;
        /* 阴影实现文字浮雕效果 */
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #FFF;
        /* 文字装饰线 */
        text-decoration: solid underline 3px;
        text-decoration-style: dotted;
        text-decoration-style: underline line-through;
        text-underline-offset: 3px;
        /*文字溢出...*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

1.4、表格样式

针对表格元素的样式，css中常用伪类选择器（:first-child、:nth-of-type等）来设置行列的样式、隔行换色，详见选择器章节。

.table{
    table-layout: fixed;
    width: 100%;
    border: 2px black solid;
    border-spacing: 5px 3px;
}
/* 单元格内容溢出样式 */
.table td{
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border: 0px;
}
/* 单元格列宽 */
.table tr:first-child th:nth-child(1){
    width: 140px;
}
.table tr:first-child th:nth-child(2){
    width: 150px;
}
.table tr:first-child th:nth-child(3){
    width: 100%;
}
.table tr:nth-child(2) td:nth-child(1){
    height: 50px;
    vertical-align: top;
}

1.5、列表样式

列表类型的元素包括<ol>、<ul>、<dl>，下面是列表特有的属性。

#ldiv2 ul>li{
    list-style:none outside url();
        /* 用背景图实现符号效果 */
        background: url(../res/sk\ \(17\).png) no-repeat;
    background-size: 1.3em;
    background-position: 0 0;
    padding-left: 1.5em;
    line-height: 1.8em;
}
#ldiv2 ol li{
    list-style-type: lower-alpha;
    line-height: 1.5em;
}

其他样式

会被隐式继承的样式

文字类的样式大多支持默认继承。

a元素、h1-h6标题元素不能隐式继承字体样式，是因为他们有浏览器内置的默认样式，需要显示设置继承。

02、如何居中对齐？

2.1、水平居中（4）

📢 注意：变换函数 translateX(50%)的参数50%是相对于自身尺寸，而不是父元素，这里和其他百分比%的计算不同！

/* 水平居中：块元素左右margin均分 */
p {
    width: max-content; margin: 0 auto;
}
/* 水平居中：绝对定位 */
.hcenter {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
/* 水平居中齐：flex布局，居中排列flex项 */
.fhcenter {
    display: flex;
    justify-content: center;
    justify-content: space-around; /* 两端对齐 */
}

2.2、垂直居中（4）

/* 垂直对齐：flex布局，居中排列flex项 */
.fvcenter{
    height: 100px; background-color: antiquewhite;
    display: flex;
    align-items: center;
}
/* 垂直对齐：vertical-align 结合行高 line-height */
.vcenter{
    background-color: antiquewhite;
    height: 100px;
    line-height: 100px;
}
.vcenter *{
    vertical-align: middle;
}

/* 垂直对齐：vertical-align 结合行高 table-cell 布局 */
.vcenter{
    background-color: antiquewhite;    height: 100px;
    display: table-cell;
    vertical-align: middle;
}
.vcenter *{
    vertical-align: middle;
}

/* 垂直居中：给行内元素添加伪元素，让伪元素垂直居中 */
.vmid::before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

03、overflow溢出怎么办？

溢出指的是内容超出父元素的区域。

3.1、文本溢出

需要多个属性配合使用。

方法	描述/示例
单行文本溢出，显示省略号...	text-overflow 需配合overflow、white-space
多行文本溢出，多行末尾显示省略号	使用-webkit-box，webkit内核浏览器的私有前缀，只兼容Chrome\Edge\Safari浏览器
长单词溢出（如url），强制换行	使用word-wrap、word-break设置强制换行

/* 单行内容溢出显示为省略号 */
.line-over{
    width: 100px;
    background-color: burlywood;
    text-overflow: ellipsis; /* 溢出内容显示为省略号 */
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 文本默认会自己换行，强制显示在一行*/
}

/* 多行文本 */
.mline-over{
    width: 200px;
    background-color: burlywood;
    overflow: hidden;
    text-overflow:ellipsis;
    /* -webkit-box，webkit内核浏览器的私有前缀，兼容Chrome\Edge\Safari浏览器 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 文本显示行数 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}
/* 长单词（）强制换行，默认是不会自动换行的，可能会超出区域 */
.url{
    background-color: bisque; max-width: 300px;
    word-wrap: break-word;
    word-break: break-all;
}

3.2、块溢出

这个就简单了，要么隐藏，要么显示滚动条，否则的话内容会超出区域，遮挡后面的内容。

.div-over{
    height:100px;
    background-color: beige;
    /* x轴方向溢出隐藏 */
    overflow-x: hidden;
    /* y轴方向溢出自动处理，超过则显示滚动条 */
    overflow-y: auto;
}

04、隐藏元素的不同方式？

.hid1{
    visibility: hidden;  /* 占据空间，无交互*/
}
.hid2{
    opacity: 0;  /* 占据空间，有交互*/
}
.hid3{
    display: none;  /* 不占据空间，无交互*/
}
.hid4{
    position: absolute;  /* 可视区域外面，不占据空间，有交互*/
    left: -99999px;
    top: -99999px;
}
.hid5{
    transform: scale(0);  /* 占据空间，无交互*/
}

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

原文地址：http://www.cnblogs.com/anding/p/16851884.html