css相关属性汇总

Posted 2021-03-23 lp-web

1、插入图片和背景图片
<img src=""/> 更改大小用width,height;更改位置：margin,padding
<div style="background-image:url(‘‘)"></div> 更改大小：background-size；更改位置：background-position

2、清除内外边距
*{margin：0；padding：0；} /*行内元素只有左右外边距，没有上下外边距*/

3、外边距合并
相邻块元素垂直外边距合并：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下边的元素有上
外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和，而是两者之中较大者，这种现象称之为外
边距塌陷。解决方案：避免此情况出现。
嵌套块元素垂直外边距的合并：对于两个嵌套关系的块元素，如果过父元素没有上内边距及边框，则父元素的上边距会与子
元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。解决方案：
可以为父元素定义1px的上边框或上内边距；可以为父元素添加：overflow:hidden;

4、padding不影响盒子大小的情况
如果一个盒子 没有给定宽度、高度 或者 继承父亲的宽度、高度，则padding不会影响本盒子大小。

6、块级元素、行内元素、行内块元素的特点
-块级元素特点：
（1）总是从新行开始
（2）高度、行高、外边距以及内边距都可控
（3）宽度默认100%
（4）可以容纳内联元素和其他块级元素
-行内元素特点：
（1）和相邻行内元素在一行上
（2）高、宽无效，但是水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素
-行内块元素特点：
（1）和相邻行内元素（行内块）在同一行上，但之间会有空白缝隙
（2）默认宽度就是它本身内容的宽度
（3）高度、行高、外边距及内边距可控
7、标签模式转换
块转行内：display:inline;
行内转块：display：block;
块、行内转为行内块：display：inline-block;
8、属性选择器
E[attr*=val] 属性值里包含val字符并在任意位置
E[attr^=val] 属性值里包含val字符并在开始位置
E[attr$=val] 属性值里包含val字符并在结束位置
9、伪类选择器
E::first-letter 文本中第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式（单击拖拉鼠标）
E::before 在元素内部的开始位置插入 content:""
E::after 在元素内部的结束位置插入 content:""
10、background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background-attachment:scroll|fixed;图片随滚动条滚动
background-repeat:round|space;自动适应容器|以相同间距平铺且充满整个容器或某个方向
11、table表格边框合并
table {
border-collapse:collapse;
}
12、圆角边框
border-radius:左上 右上 右下 左下；（顺时针方向）
13、外边距水平居中对齐
div {width：200px; margin:0 auto;}
（1）块级元素 （2）必须指定width
14、css3盒模型
1、box-sizing:content-box; 盒子大小=width+padding+border;系统默认
2、box-sizing:border-box; 盒子大小=width；padding不会撑开盒子

15、盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影
水平阴影和垂直阴影必填；默认外阴影outset，内阴影inset;

16、浮动float
浮动可实现文字环绕效果；浮动元素总是会找离它最近的父级元素对齐，但是不会超出内边距范围。
浮动脱离标准流，不占位置，会影响其他标准流。
为浮动元素增加标准流父元素，防止下方元素上移。

5、清除浮动
（1）在浮动盒子后添加空盒子，添加属性 clear:both;
（2）给浮动盒子的父级元素添加overflow：hidden|auto|scroll;
（3）after伪元素，给浮动盒子的父元素加 class="clearfix"
.clearfix:after{
content:".";/*content内容不为空*/
display:block;
height:0;
visibility:hidden;/*隐藏content内容*/
clear:both;
}
.clearfix{
*zoom:1;/*ie 6 7 才执行，清除浮动*/
}
（4）双伪元素清除浮动（推荐）
.clearfix:before，.clearfix:after{
content:"";/*content内容可以为空*/
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;/*ie 6 7 才执行，清除浮动*/
}