css属性总结
一、元素初始化
1.元素边距初始化
消除所有元素的边距
* {
margin: 0;
padding: 0;
}
2.列表元素初始化
由于消除所有元素的边距，会对ul,li元素造成影响，解决方法如下：
ul {
// 让点在父元素内部
list-style: inside;
...
// 让点消失
list-style: none;
}
二、元素的宽度和高度
1.元素高度和宽度的计算方法
默认情况下：
元素的实际宽度 = border-left + border-right + width + padding-left + padding-right
元素的实际高度 = border-top + border-bottom + height + padding-top + padding-bottom
2.设置box-sizing
我们在做项目的时候，原本设置好的宽高的元素，会被设置的padding和border撑大，这个时候我们只需要设置box-sizing：border-box就可以避免任何边框和内边距都增加到最后绘制出来的元素中。
.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 20px auto;
}
原本的盒子100 * 100：
.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 20px auto;
padding:20px;
}
设置padding后，盒子的尺寸被增大了：
.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 20px auto;
padding:20px;
box-sizing: border-box;
}
设置box-sizing后，恢复之前100 * 100的宽高：
三、伪元素清除浮动
在浮动的父元素加上清除浮动的类名：
.clearfloat::before, .clearfloat::after {
content: '';
display: block;
clear:both;
}
<div class="clearfloat">
<div class="content fl"></div>
<div class="aside fl"></div>
</div>
<div class="box"></div>
四、绘制一个圆
先绘制一个正方形（正方形的宽高即为圆的直径），再将border-radius设置为自身宽高的一半，即50%：
.box {
width:200px;
height:200px;
background-color: hotpink;
border-radius: 50%;
}
五、让一个元素水平垂直居中
方法一： 利用绝对定位和css3中位移的属性，先设置该元素为绝对定位，并位于网页的50%的位置，再利用transform: translate(-50%,-50%); 设置位移自身宽高的50%，即可水平垂直居中：
.box {
width: 200px;
height: 200px;
background-color: blue;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
可以延伸为使一个元素定位在父元素的水平垂直居中位置：
.box-wrapper {
width: 500px;
height: 500px;
border: 1px solid #333;
background-color: blue;
position:relative;
}
.box {
width: 100px;
height: 100px;
background-color: blueviolet;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
方法二： flex布局
.box {
width: 200px;
height: 200px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
六、弹窗样式
.pop {
z-index: 9999;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
七、浏览器全屏高度
如果需要设置一个元素高度占满整个浏览器的屏幕，就需要将它所有父级元素的高度都设置为100%：
html, body {
height: 100%;
}
.box {
width: 100%;
height: 100%;
background-color: yellow;
}
八、input输入框
默认样式：
<input type="text" placeholder="请输入内容">
1. 去掉边框
input {
border: none;
}
2. 设置输入字体颜色
input {
color：red;
}
3. 设置边框颜色及背景色
input {
border-color: red;
background-color: #F5F5F5;
}
4. 设置placeholder样式
input::-webkit-input-placeholder { /* WebKit browsers */
color: red;
font-size: 14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
font-size: 14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
font-size: 14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
font-size: 14px;
}
九、background 属性
1. background-color：设置背景颜色；
.box {background-color: red;}
2. background-image：设置背景图像；
.box {background-image: url('images/jay.jpg');}
3. background-repeat：背景图像的铺排方式；
.box {
background-image: url('assets/baidu.jpg');
background-repeat: no-repeat;
}
取值：
repeat：默认值，背景图像将向垂直和水平方向重复；
repeat-x：只有水平位置会重复背景图像；
repeat-y： 只有垂直位置会重复背景图像；
no-repeat： 图像不会重复；
inherit： 指定 background-repeat 属性设置应该从父元素继承。
4. background-size：设置背景图像的大小；
.box {
background-image: url('assets/baidu.jpg');
background-repeat: no-repeat;
background-size： cover;
}
取值：
auto ：默认值，即图像真实大小；
length： 设置背景图片宽度和高度，单位为px；
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是默认设置为 auto(自动)。
background-size： 500px 500px;
percentage ：将计算相对于背景定位区域的百分比；
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(自动)。
background-size： 100%;
cover ：将背景图像等比缩放到完全覆盖容器(即当较短的边等于容器的边时, 停止缩放)；
background-size： cover;
contain ：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等, 背景图像不能完全覆盖容器 (即当较长的边等于容器的边时, 停止缩放)；
background-size： contain;
5. background-position：设置背景图像的位置；
.box {
background-image: url('assets/jay.jpg');
background-repeat: no-repeat;
background-position： center center;
}
取值：
方位关键字：left，top，center，right，bottom；
如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标；
如果仅指定了一个值, 则该值作用在横坐标上, 纵坐标默认为center 。
| 值 | 描述 |
|---|---|
| left top | 左上 |
| left center | 左中 |
| left bottom | 左下 |
| right top | 右上 |
| right center | 右中 |
| right bottom | 右下 |
| center top | 中上 |
| center center | 中间 |
| center bottom | 中下 |
background-position： center bottom;
x% y%：百分比；
如果设置两个值, 第一个值是水平位置，第二个值是垂直；
如果仅指定了一个值，则该值作用在横坐标上, 纵坐标默认为50%(即center) ；
左上角是0％ 0％，右下角是100％ 100％，默认值为：0％ 0％。
background-position： 50%;
xpos ypos：数值，单位可以是像素；
如果设置两个值，第一个值是水平位置，第二个值是垂直；
如果仅指定了一个值，则该值作用在横坐标上, 纵坐标默认为50%(即center) ；
左上角是0（即0px 0px，可以混合使用 ％ 和 px，可以设置负值；
background-position： 400px -100px;
inherit：指定从父元素继承；
6. background-origin：设置背景图像显示的原点（background-position相对定位的原点）；
.box {
width: 300px;
height: 300px;
border: 10px solid #58A;
padding: 20px;
background-image: url('assets/cartoon.png');
background-repeat: no-repeat;
background-position: 10px 20px;
background-origin: content-box;
}
取值：
padding-box ：默认值，背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域 (即包含padding) ；
background-origin： padding-box;
border-box： 背景图像 background-image 的默认定位 background-position 参考的原点为 border区域 (即包含border) ；
background-origin： border-box;
content-box ：背景图像 background-image 的默认定位 background-position 参考的原点为 content区域左上角 ；
background-origin： content-box;
注意：如果背景图像background-attachment是 fixed ，这个属性没有任何效果。
7. background-attachment： 设置背景图像是否固定或者随着页面的其余部分滚动；
.box {
width: 100%;
height: 2500px;
overflow-y: auto;
background-image: url("assets/jay.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: scroll;
}
取值：
scroll ：默认值，背景图片随着页面的滚动而滚动；
background-attachment: scroll;
fixed ：背景图片不会随着页面的滚动而滚动，在屏幕中是固定的；
background-attachment: fixed;
local ：背景图片会随着元素内容的滚动而滚动，直到滚动到内容结束；
background-attachment: local;
initial ：设置该属性的默认值；
inherit 指定 background-attachment 的设置应该从父元素继承。
8. background-clip：设置背景图像向外剪裁的区域
.box {
width: 300px;
height: 300px;
border: 10px dashed #fb3;
padding: 30px;
background-color: #58a;
background-image: url('assets/cartoon.png');
background-repeat: no-repeat;
background-origin: border-box;
background-clip: padding-box;
}
由于 background-origin 的默认值为 padding-box, 即背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域是包含padding的，所以为了更好的了解 background-clip 几个属性值的特性, 可将 background-origin 设置为 border-box 。
取值：
border-box ：默认值，背景被裁剪到外边框 border区域 (即包含 border) ；
background-clip： border-box;
padding-box： 背景被裁剪到内边框 padding区域 (即包含 padding) ；
background-clip： padding-box;
content-box ：从 content区域开始裁剪 ；
background-origin： content-box;
注意：这个属性与 background-origin 属性类似，最主要的区别就是 background-clip 会将图像剪切，使其适应对应的 box，然而 background-origin 会将 content 推到 box 中。
9. 简写
background 简写属性可在一个声明中设置所有的背景属性。
简写的顺序如下: bg-color || bg-image || bg-position/bg-size || bg-repeat || bg-attachment || bg-origin || bg-clip
background: url("assets/jay.jpg") center/cover no-repeat scroll border-box padding-box;
顺序并非固定, 但是要注意:：
-
background-position 和 background-size 属性, 之间需使用 / 分隔, 且 position 值在前，size 值在后；
-
如果同时使用 background-origin 和 background-clip 属性， origin 属性值需在 clip 属性值之前，如果origin与clip属性值相同, 则可只设置一个值。
十、calc() 属性
1.用法
CSS有一个特殊的 calc() 函数，用一个表达式作为它的参数，用这个表达式的结果作为值。
.box {
height: calc(100% - 80px);
}
这个表达式可以是任何如下操作符的组合：
- +（加法）
- -（减法）
- *（乘法）
- / （除法）
注意：+ 和 - 运算符的两边必须要有 空白字符 ，* 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。用 0 作除数会使 HTML 解析器抛出异常。
2. 场景
通常用来计算元素高度。
场景1：计算侧边栏高度
.sidebar {
height: calc(100% - 80px);
}
场景2：计算某些元素的高度
移动端的H5页面，由于机型宽高比例相差过大，导致对于右侧表格设置固定高度5.8rem后，会在某些机型上出现表格超出页面的效果，或是表格高度过小的问题。
这时，可以使用 calc属性 用 整体高度-（表格上边距+表格下边距），计算出表格的高度，使得各个分辨率下的机型都能与设计稿保持一致。
.table {
height: calc(100% - 7rem);
}
十一、一些常见的属性总结
- letter-spacing ：设置文本字符的间距；
letter-spacing: normal;
letter-spacing: 20px;
- 使用 :not 选择器：选择除了最后一个元素之外的所有元素；
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
