目录
六、常用属性
| 属性 | 取值 | 备注 | |
| background | background-color | 背景颜色 | |
| background-image | 背景图片 | ||
| background-repeat | 背景图片是否平铺 | 默认平铺 | |
| background-position | 背景图片位置，取值center、left、right等 | ||
| background-attachment | 背景图片是否固定，取值fixed、scroll | ||
| background-size 背景图片大小只能通过background-size |
background-size: 100px, 200px; background-size: cover; background-size: contain;
|
cover:会自动调整缩放比例，保证图片填满整个背景区域，如果有溢出部分则会被隐藏 contain:自动调整缩放比例，保证图片始终完整显示在背景区域，但是背景区域可能不能填满 |
|
| background简写形式 |
background: #00a4ff url('./images/fa-search.png') center center no-repeat; |
设置背景色、图片水平居中和垂直居中、不平铺 | |
|
text-decoration 用于给链接修改装饰效果 |
none | 默认，定义标准的文本 | 可以去标签a有下划线 |
| underline | 带有下划线 | ||
| overline | 带有上划线 | ||
| line-through | 文本被横线穿过，相当于删除线 | ||
| border | border-width | 边框的宽度 | |
| border-color | 边框的颜色 | ||
| border-style | 边框的样式，取值，none、solid、dashed、dotted、double | ||
| border-collapse:collapse | 合并相邻边框 | ||
| border-radius |
圆角边宽， border-radius：10px; 表示4个角弧度是10px border-radius:50%; 显示成圆形 |
||
| padding | padding-top | ||
| padding-right | |||
| padding-bottom | |||
| padding-left | |||
| box | box-sizing |
取值 在content-box模式下，当我们给一个盒子设置宽度或者高度，是不包含border、padding，也就是说此时我们再给设置border、padding会撑开盒子。 在border-box模式下，盒子的宽度和高度是包含border、padding的。 |
注意：两种模式都不包含margin |
| box-shadow |
给盒子添加阴影， box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 inset; 水平阴影、垂直阴影是必选，其他可选 inset 表示内阴影，默认是外阴影 |
水平阴影:正值向由，负值向左 垂直阴影:正值向下，负值向上 |
|
| text-shadow 文字阴影 | 与边框阴影属性值一样 | ||
| letter-sapcing | 设置字间距 | ||
| 元素隐藏 | display: none; | 隐藏元素，原有位置不保留 | |
| visibility:hidden | 隐藏元素，原有位置保留 | ||
| overflow,取值范围visible(默认)、auto(超出显示滚动条)、hidden（超出部分隐藏）、scroll（无论是否超出都显示滚动条） | 检索或者设置当前对象的内容，超过其指定高度及宽度时应该如何管理内容 | 其中hidden使用最多 | |
| z-index | 指定叠放次序，数值越大越在上层 | ||
| outline | 轮廓线 | 当一个文本框获得焦点后会有一个默认轮廓线，我们可以通过outline:0 /outline:none将轮廓线取消掉 | |
| 居中 | 文字居中 | 文字水平居中：text-align:center | |
| 文字垂直居中： line-height 等于 height | |||
| 盒子居中 | 盒子水平居中：margin 0 auto | ||
| 盒子垂直居中：使用定位 | |||
| vertical-align | 垂直对其方式，属性取值为：baseline(基线对其，默认)、middle（中线）、bottom（底线）、top（顶线） |
对于块级元素无效，对行内元素、行内块元素有效。通常设置图片/表单元素与文字对齐。 <div > <a href="">找回密码</a> |
img/表单元素等行内块元素默认场景下，它的底线与父元素基线对其，图片底侧会有一个白色缝隙。我们可以通过vertical-align:top 、middle来解决这个问题 |
| text-overflow | 超出的文字是否显示省略号，属性取值为：clip(不显示)，ellipsis（省略号） |
如果实现超出部分显示应该这样： white-sapce:nowrap; /* 强制一行显示 */ overflow:hidden; /* 隐藏多于内容 */ text-overflow:clip; /* 直接裁剪 */ text-overflow:ellipsis; /* 显示省略号 */ 前两个属性是必须的
|
text-overflow通常用于新闻标题等 |
| text-indent | 首行缩进 | ||
| transform | 应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等 |
rotateX\rotateX\rotateZ 按照x、y、z翻转多少度 translate3d(x,y,z) 设置运动路径 |
|
| transform-style | 属性值preserve-3d | 让子盒子有3D效果 | 设置给父盒子，用于实现3D轮播图，做3D效果这行代码经常用 |
|
perspective （透视） |
实际是人眼到屏幕的举例，此属性和transform结合使用，达到3D效果 |
perspective:500px; 数值越小，效果越明显（近大远小效果） |
做为属性设置给父元素，作用域所有3D转换的子元素， |
| backface-visibility | backface-visibility:hidden; | 不是正面对向屏幕则隐藏，实际是大于90度则隐藏 | 此属性用于两张相同大小的图片进行翻转显示 |
七、小技巧
| 技巧 | 说明 | 举例 |
| 在一行内的盒子中，设置行高等于盒子的高度，就可以使文字 垂直居中 | 即line-height等于height的属性值，可使文字垂直居中 | div { width: 600px; height: 200px; text-align: center;/* 水平居中 */ line-height: 200px;/* 垂直居中 将line-height行高等于盒子高度height */ } |
| 当盒子内文本字数不一致，可以使用padding将其文本水平居中 |
1、不 需要设置盒子的宽度 2、设置padding， 上下为0，左右为实际宽度即可 |
nav a { display:inline-block; height:40px; line-height:40px; /*设置垂直居中*/ /* 盒子不设置width 直接设置padding */ padding:0 15px; /* 上下是0px 左右是15px */ } <nav> <a href="#">首页</a> <a href="#">三个字</a> <a href="#">手机新浪网</a> <a href="#">网站导航</a> </nav> |
| 实现盒子水平居中，可以使用外边距margin |
1、盒子必须是块级元素 2、盒子必须指定宽度width 3、通过margin auto属性设置水平居中 |
div {/* div是块级元素 */ width: 200px; /* 盒子必须有宽度 */ height: 220px; background-color: red; margin: 30px auto;/* 上下30 左右auto */ } |
| 浏览器生成成块级元素经常有一个默认边距，可以使用margin、padding清除掉 |
body { margin:0; padding:0; } div { margin:0; padding:0; } |
|
| 嵌套盒子（例如嵌套div），设置内部盒子的外边距，默认是不生效的，可以使用如下三种方式解决 | 三种解决方法 | <style> .father { width: 500px; height: 500px; background-color: red; /* 解决方法1：设置父盒子边框 border: 1px solid;*/ /* 解决方法2：设置父盒子的padding padding: 5px;*/ /* 解决方法3：最佳方式 overflow */ overflow: hidden; } .son { width: 300px; height: 300px; background-color:purple; margin-top:30px; /* 外边框距离父div 是30px */ } </style> <!-- 嵌套盒子(div) 设置内部盒子外边距 --> <div class="father"> <div class="son"></div> </div> |
| 取消列表样式 |
ul { list-style:none;/* 取消列表默认样式(小点) */ } |
|
| 隐式模式转换 |
行内元素 如果添加了 绝对定位或者 固定定位后 或 浮动后，可以不用显示进行模式转换（即可以不写display），直接给高度和宽度就可以了 |
|
| 当a标签里面有图片，往往是作为背景图片，而不是插入img标签导入图片，a标签显示背景图片需要设置宽和高，但a标签属于行内元素直接设置宽高是无效的，因此需要display:block转成块元素 | ||
| ul、h1标签默认有内外边距，通常我们需要取消掉内外边距 | ||
|
我们在开发的时候通常将logo放到h1中，为了搜索引擎优化，提升搜索的权重 |
||
| 让文字在图片垂直位置 |
两种方式： 1、定位方式 2、在图片处增加vertical-algin:center，或者指定正负像素 |
|
| 浮动的盒子例如float:left，如何居中 |
注意浮动的盒子使用margin 0 auto是不行的 1、在子盒子外面套一个父盒子，是父盒子进行margin 0 auto 2、采用flex伸缩布局方式 |
利用flex伸缩布局可以去掉盒子间的空白缝隙，例如 .copyright-link ul { width: 1140px; display: flex;/* 设置flex模式 */ flex-direction: row; /* 行模式显示 */ justify-content: center; /* 居中显示 */ margin: 0 auto; } |
| 使用position:absolute;的元素在使用margin 0 auto水平居中，将无效。 | ||