css

选择器:

内嵌:style  影响标签内的内容  对外没有影响

内联:#(ID){    }

         .(class名){   }

         标签名{ 对所有这类标签操作}

外联:href=“路径”

盒模型:

盒子模型属性:

宽:Width

高:height

边框: border  (三要素缺一不可) px     dashed(虚线)/solid(实线)  颜色

border-bottom :  边框底边

盒子模型margin学习

padding:(内边距)

margin: (外边距)

浏览器对于div,p,li标签等元素,可能会对他们设置一个默认的margin(边缘)值,padding(填补)值,而且不同的浏览器之间设的默认可能不同。

margin: 10px; 是设置4个方向上的margin值,都为10px;

margin:10px 20px 30px 40px ,则分别是设置 上,右,下左,方向上的margin值

如果margin值只设置了2个,或3个,

则按上,右,下,左的方向顺序来分配,没有被分配到值的边, 以对边的margin为准

如何用margin来居中

可以通过设置margin: 0 auto; 即,左右的外边距为"自动",即可使左右居中

margin-left (边框与左方的数值px)   margin-top(边框与上方的数值px)

padding:内边距

4个方向上的padding定义和margin一样.

文本控制:

text-indent(段落缩进):px

text-align(水平对齐):  left(左对齐)/right(右对齐)/center(居中); 默认是left;

vertical-align:middle(竖向居中, 和行高配合使用)

字体控制:

font-weight(字体粗细):normal(正常)/bold(加粗)

font-size: 控制字体大小 px

line-height: 行高  px

作用:设置每行文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)

font-family: 设置字体

color:  设置字体颜色

文字阴影

         text-shadow: 5px 1px 6px #F93;

文字间距

    word-spacing

背景操作

background-color(背景颜色)

background-image:url(背景图片选择链接)

background-repeat:no-repeat(不重复背景图片)

background-position(背景图片移动距离)

background-size(背景图片铺放大小100% 100%;)

background:rgba(颜色)透明度

background:linear-gradient(颜色)渐变色

选择器:hover {鼠标指针放上后的样子}

选择器:active {鼠标点下后的样子}  /* 正在被点击的链接 */

#(id):hover{}

 

定位

position:absolute  绝对定位(相对于浏览器外边框)

(top   left)

position:relative  相对定位

position:fixed  漂浮定位 (相对于显示边框  拖动滚动条位置不变)

z-index:数字(控制定位后的分层 谁数字层数大谁在上层)

 

 

浮动

float:left(浮动元素不会占位置)

clear:both(清除浮动)(清除浮动的div不会有任何效果)<div style="clear: both;"></div>

 

 

 

overflow:hidden   超出隐藏(加在负级元素身上) 
        

break-文字超出自动换行

 

 

display:none(隐藏)/block(显示)

 

border-radius(圆角):px

 

background(渐变色): linear-gradient  (to right,(作到右渐变)/ to bottom right(对角线),/(角度)ged,(颜色);

 

盒阴影:

 box-shadow: 0px 0px 5px #888888;

 

2D转换:

transform: rotate((角度)deg);  (顺时针旋转)

transform: scale(倍数,倍数);      (加减大小)

transform: skew  ((角度)deg) (X/Y轴倾斜)

 

3D转换:

transform: rotate ((角度)deg); (围绕X/Y轴旋转)

 

 

过度:

transition: (改变属性)(时间)s,(多项属性间用,隔开);

(改变属性):(值);

 

 

动画:

animation:(动画名) (时间)s;

@keyframes (动画名){

                     sorm(开始)

                                              to(结束)                                                                                                                                                            

}

原文地址:https://www.cnblogs.com/hhthtt/p/10135398.html