CSS样式之操作属性二

********css样式之属性操作********

一、文本属性

1.text-align:cnter             文本居中
2.line heigth                 垂直居中 ：行高，和高度对应
3.vertical-align            设置图片与文本的距离
4.text-decoration:none         去掉超链接下划线
5.要是给a标签修改颜色的时候，就定到a标签上，用继承有时候是搞不定的
因为继承的级别是很低的，如果a标签设置了样式，是不会继承父亲的
6.text-indent:30px            首行缩进
7.font-style:oblique 或者italic....(设置字体的样式为斜体)


二、背景属性

background-color:背景颜色
background-image:url('11.jpg'); 背景图片链接
background-repeat:repeat-x; x轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中

简写：
background: url('11.jpg') no-repeat center;

三、边框属性

常用属性

简写：border :1px soild red;
deshed:虚线
只加有一个方向的：border-right :1px soild red;

四、列表属性

去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}

上面两行也可写成下面一行
去掉盒子上面的间隙：*{margin:0; padding :0;}


五、display属性

display属性

1.将块级标签设置 成内联标签：display： inline；
2.将内联标签设置 成块级标签：display： block；
3.内联块级标签：像块级标一样可设长宽，也可像内联一样在一行显示：display：inline-block
4.display：none；把不想让用户看到的给隐藏了（很重要的一个属性）
5.visibility：hidden；也是隐藏

注意：与visibility：hidden的区别
visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失


六、边距的塌陷问题

1.兄弟div
上面的div的margin-bottom和下面的div的margin-top会塌陷，也就是会取上下两者margin里面最大值作为显示值。

2.父子div
如果父级div没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

![](https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170921170416900-1754321835.png)


解决方法：

这两种会改变结构：
1.加上padding
2.加入border
不改变结构
3.overflow:hidden


溢出问题

解决溢出的方法
        overflow:auto;
　　　　 overflow: hidden;
        overflow:scoll; #加上滚动条


七、清除浮动

clear语法：
　　clear：none |  left  | right  | both
1.clear：left 清除的是左边的浮动
2.clear：both :保证左右两边都没有浮动

注意：
　　排序的时候是一个标签一个标签的排
　　如果上一个是浮动的，就紧贴个上一个
　　如果上一个不是浮动的，就和上一个保持垂直不变


八、float父级的塌陷问题
loat它不是完全脱离，它是半脱离的。像是文字环绕的就是用float实现的。float是不覆盖文字的
半脱离的，吧文字给挤过去了。

解决方案：
1.<div style='clear：both'></div>
    也可以不加div
    2.用after 
    .header:after{
        content:""; #内容为空
        display:block; #块级标签
        clear:both; #清楚浮动的功能
    }
    
    约定的名字：clearfix
    .clearfix:after{
        content:""; #内容为空
        display:block; #块级标签
        clear:both; #清楚浮动的功能（可以做到一个自动切换的功能）
    }



九、position(定位)属性

position的四种属性
1.static：默认位置
2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
3.relative:相对定位(参照的是自己本身的位置)没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top   left  进行定位
4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）

注意：将定位标签设置为absolute，将他的父级标签设置为定位标签 （relative）



十、float和position的区别

float：半脱离文档流
position：全脱离文档流