HTML笔记_htm笔记-CSDN博客

本文链接：https://blog.csdn.net/wangfei933/article/details/117560030

div 里的文字居中： text-align: center;

    div {
            width: 400px;
            height: 300px;
            border: 1px solid #666;

            overflow: hidden;
            position: relative;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

div 的背景色： background-color: #eeeeee;

div的背景图片： background: url('imges/15.jpeg');

div 圆角： -webkit-border-radius: 30px;
border-radius: 5px;

圆的div:border-radius: 50% ;

内外边距

* {
margin: 0;
padding: 0;
}

设置div背景颜色透明度，内部元素不透明：

.demo{
　background-color:rgba(255,255,255,0.15)
}

对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。

background-size有3个属性：

auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。
contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。

div子级在父级水平居中

方法一：父元素 display:table-cell;

.a {
    width: 1600px;
    height: 700px;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.b {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #f40;
    display: inline-block;
}

方法二：用绝对定位 + margin : auto;

.a{
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	position:relative;
}
.b{
	width:200px;
	height:200px;
	background:#f40;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

方法三：绝对定位 + margin

.a{
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	position:relative;
}
.b{
	width:200px;
	height:200px;
	background:#f40;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px;
}

方法四： display:flex；

.a{
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	display:flex;
	justify-content:center;
	align-items:center;
}
.b{
	width:200px;
	height:200px;
	background:#d40;
}

div 在屏幕上居中

1---<div align="center">

2---div {
text-align: center;
margin:0 auto;
}

div的边框样式： border: 5px solid #2f6396; 边框宽度5 实线颜色

分别设置上下左右边框

border-top:1px solid red;

border-bottom:1px solid red
border-right:1px solid red;
border-left:1px solid red;

dashed（虚线）| dotted（点线）| solid（实线）

无边框
点线式边框
破折线式边框
直线式边框
双线式边框
槽线式边框
脊线式边框
内嵌效果的边框
突起效果的边框

div 的边框颜色：border-color:#888;

div 的边框宽度border-width：15px

div在屏幕上居中效果

div {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
}

浮动

div{
            float: left;
        }

Float有4个值：

left ：元素向左浮动。

　　right ：元素向右浮动。

　　none ：默认值。

　　inherit ：从父元素继承float属性。

浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。

----------------------------------------------

2D位置移动

@keyframes bounce {
    to {
        transform: translateY(-300px);
    }
}

1.translate(x,y)

基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y: transform：translate(x,y);

2.translateX(x)

基于原来的位置，沿X轴平移，长度为x:transform：translateX(x);

3.translateY(y)

基于原来的位置,沿Y轴平移，长度为y: transform：translateY(y);

transform属性---3D位置移动

1.translate3d(x,y,z)
基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z: transform：translate3d(x,y,z);
2.translateZ(z)
基于原来的位置,沿Z轴平移，长度为z：transform：translateZ(z);

transform属性---2D缩放转换

1.scale(x,y)
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数: transform：scale(x,y);
2.scaleX(x)
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数:transform：scale(x);        3.scaleY(y)
基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数： transform：scale(y);

transform属性---3D缩放转换

1.scale3d(x,y,z)
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数: transform：scale3d(x,y,z);

2.scaleZ(z)
基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数: transform：scaleZ(z);
transform属性---2D旋转

1.rotate(angle)
以图形的几何中心点为旋转中心，顺时针旋转角度为angle:transform：rotate(angle); 2.rotateX(x)

绕X轴方向旋转，顺时针旋转角度为angle:      transform：rotateX(x);

3.rotateZ(z)
绕Y轴方向旋转，顺时针旋转角度为angle: transform：rotateZ(z);          transform属性---3D旋转

1.rotate3d(x,y,z,angle)
同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle: transform：rotate3d(x,y,z,angle);
2.rotateZ(z)
绕Z轴方向旋转，顺时针旋转角度为angle: transform：rotateZ(z);

————————————————

--------------------------------------------------

字体颜色新浪体育

文字：letter-spacing //字与字之间的距离

line-height //行距

text-indent //段落首行缩进