文本相关样式
<style>
div {
height: 200px;
background-color: pink;
/*缩进 em为字体大小*/
text-indent: 2em;
/* 文本水平对齐方式 */
text-align: center;
/*去除水平线*/
text-fecoration:none;
/*防溢出*/
overflow: auto;
/* 行高 单行文本垂直居中 行高=元素高度*/
line-height: 200px;
}
</style>
list--列表
/*去除无序列表前的标志*/
list-style:none;
/*空心圆*/
list-style:circl;
元素显示模式转换
元素分为:行内元素,块元素,行内块元素
<style>
.box {
/* 行内元素无法设置宽、高 转换为行内块元素 */
/* display: none;隐藏元素,脱离文档流 */
display: none;
/* display: inline-block; 将元素转换为行内块元素 */
/* display: inline; 行内元素 */
width: 300px;
height: 300px;
background-color: pink;
}
span {
display: inline-block;
/* display: block; 块元素 */
width: 300px;
height: 300px;
/*固定*/
backgroundd-attachment:fixed;
/*左上方移动*/
backgroundd-position:top left
background-color: rgb(15, 105, 66);
}
</style>
边框
/*边框宽度*/
border-width: 2px;
/*边框的形状*/
border-style: dashed;
/*边框的颜色*/
border-color: black;
/*边框的幅度*/
border-radius: 10px;
/*合子左上编成50%*/
border-top-left-radius: 50%;
/*合并相邻边框*/
table
{border-collapse: collapse;}
阴影
/*边框阴影*/
box-shadow: 20px 20px 10px 10px black;
/*负值为上方*/
/*字体阴影*/
text-shadow:
轮廓线
outline: none;/*取消轮廓线*/
outline-style: groove;/*轮廓线风格*/
防拖拽
textarea{
resize: none;——防拖拽
vertical-align: top;
vertical-align: middle;——改变文字对齐方式
vertical-align: bottom;
}
隐藏元素
.box1 {
/*脱离文档流,原来的位置不再保留 */
display: none;
visibility: hidden;/*元素隐藏,位置保留 */
opacity: 0;
background-color: pink;
}
定位
/*绝对定位,不保留原来位置子绝父相
父亲没有相对定位,继续向上找,谁有相对定位,
以谁作为参考移动如果都没找到,则相对于浏览器进行定位*/
position:absolute:
/*相对于浏览器距离*/
top: left:
/* 固定定位:相对于可视区域进行定位 */
position: fixed;
/*粘性定位*/
.one {
position: sticky;
top: 0;
background-color: pink;
}
<body>
<p class="one">xxxxxx</p>