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;
}