web前端第三天

文本相关样式：

text-indent： 2em；----缩进两个字的距离

文本水平对齐：text-align：left（左对齐）    right（右对齐）    center（水平居中）

行内元素会居中，div只内容居中，内容相对里边div居中

line-height：高度；-----单行文本垂直居中

文本修饰：文本加下划线、删除线、不加下划线、上划线（不常用）

 text-decoration：underline、line-through（删除线）、none（清楚a标签默认的下划线）、overline

List:height：30px

List-style：circle----设置为圆形

css具有层叠性，后面的会覆盖前面的

List-style：none；去掉默认样式

元素显示模式转换：

行内元素不能设置宽高，应该转变成行内块元素

display：inline-block---设置为行内块元素

display：block---设置为块元素（独占一行）

display：inline---设置为行内元素

display：none---隐藏元素

Background-image： url（链接）；

Background-repeat： no-repeat；---不再重复、

Background-repeat：repeat-y；沿y轴重复（x就是沿着y轴重复)

Background-attachment： fixed；----滑动鼠标背景图片不再移动

Background-position： top left；----铺满(position：定位）

Background：fixd url（） no-repeat----复合

Border-width:-----边框大小

Border-style：-----边框样式

border-radius：50%---边框弧度

border-top-left-radius：40%----左上角弧度

<table>{

border-collapse：-----合并相邻边框

}

</table>

文本阴影：

<div>{

Box-shadow: 20px 20px 10px 10px black

Text-shadow: red 5px(x轴偏移量) 5px（y轴偏移量）

}

轮廓线：

Input[type="text"]{

outline：none；

outline-style：groove；

}

防拖拽：

{

Resize: none;------防止文本拖拽

vertical-alin：bottom/top/middle；-----改变文字与文本框的对齐方式

}

<textarea name="xsnsmx" id="" cols="10" rows="10"></textarea>

隐藏元素：

Visibility：hidden；----隐藏元素，位置保留

Opactity: 透明度

定位：    

绝对定位：

position： absolute；-----绝对定位：不保留位置，子绝父相。父亲没有相对定位，继续向上找，谁有以谁作为相

<div class="father"></div>

      <div class="son"></div>

bottom：-130px----距离

position：relative；------相对定位

position： fixed------固定定位，相对于可视区域进行定位

position： sticky-----粘性定位

top： 0px----距离顶部0px时定位（都是距离top多少的定位）