css样式总结

1.对齐方式

1.1 文本对齐水平方式

text-align 控制容器里面文本的水平对齐方式
值：

• left 文本左对齐 默认值
• center 文本居中对齐
• right 文本右对齐

1.2 块级元素水平对齐方式

语法：margin:0 auto;

1.3 垂直对齐方式

语法：vertical-align 垂直对齐方式（行内块级元素默认跟文本的基线对齐）
垂直对齐方式能解决的问题：
（1）文本和图片居中对齐
（2）输入框和按钮对齐的效果
（3）图片默认跟底部div是由底部的间歇，可以解决这个问题，也可以使用display：block；去除间隙

2.字体

• 默认字体大小
  win10 默认字体是微软雅黑
  win7 默认字体是宋体
  在浏览器中字体的默认大小是 16px

• 字体属性
  设置字体属性时不建议直接给中文--因为中文的兼容性是比较差的，一般建议使用英文或者是unicode编码

• 获取unicode编码的方式
  在浏览器控制台通过输入escape()来得到

  例子：escape("宋体") ==> %u5B8B%u4F53 改成 \u5B8B\u4F53即可

3.去掉下划线

语法：text-decoration 控制文本是否带有线
值：

• none 没有线（去掉a标签的下划线）
• underline 下划线
• line-through 删除线
• overline 上划线

4.文本的缩进效果

• text-indent 控制文本的首行缩进效果（数字+单位 一般推荐使用em作为单位）
• text-indent：2em； 首行缩进两个字符
• text-indent：-9999em； 一般是设置大标题的位置，使它看不见，可用于优化引擎

5.行高属性

line-height 控制一行文字占据多高的位置
行高 = 字体大小 + 上间距 + 下间距

6.font的合写

font: 字体风格 是否加粗 字体大小/行高 字体;
注意点：字体风格和是否加粗没有顺序且可以省略，但是字体大小和字体的顺序不能乱，还有无法省略

7.选择器的优先级

• 优先级的顺序：!important > 行内样式 > id > 类 > 标签 > 继承
• 优先级的计算方法：
  4个n原则：（越是前面的数字越大，权重越大）
  （1） 第一个n表示有多少个important
  （2） 第二个n表示有多少个id选择器
  （3） 第三个n表示有多少个类选择器
  （4） 第四个n表示有多少个标签选择器
  !important 的作用是把某个css的权重提升到最高

8.可以被继承的属性

color ， font- ， text- ，line-，cursor
继承有些特例：a标签无法继承父元素的颜色，设置color：inherit；才会继承父元素的颜色

9.css的三大特性

• 继承性
• 层叠性
• 优先级

10.元素

• 块级元素
  div、p、h标签等
  特点：
  （1）独占一行
  （2）默认宽度和父元素一样宽
  （3）css设定的宽高有效

• 行内元素
  ** span、a、em、strong标签等**
  特点：
  （1）不会独占一行
  （2）宽度由内容决定
  （3）在css设定宽度不起作用

• 行内块级元素
  img标签等
  特点：
  （1）不会独占一行
  （2）可以设置宽高且有效

• 元素的模式转换
  display：block；
  把某个元素的显示模式修改为块级模式，在img标签设置这个属性值可以去除图片默认的3px间隙

• display：inline；
  把某个元素的显示模式修改为行内模式

• display：inline-block；
  把某个元素的显示模式修改为行内块级模式

• 元素的显示和隐藏
  元素的可见性
  display：none；没有显示模式 既看不见也不会占据位置
  visibility：hidden； 隐藏 虽然看不见，但是还是占据位置
  visibility:visible; 可见（visibility的默认值）

11.伪类

• :link 控制a标签的地址没有被访问过的样式
• :visited 控制a标签的地址已经被访问过的样式
• :hover 控制a标签鼠标移动到之上的时候的样式，而且hover不仅仅是a可以使用，其他的元素也可以使用
• :active 控制a标签，在按下没有松开的时候的样式
  记忆方式：love hate l：link v:visited h:hover a:active

12. border-collapse: collapse的作用

让表格的单元格之间的间距变没有，并且把表格的边框重叠在一起

13. 包含塌陷

如果直接给子元素设置margin-top，这个时候，子元素位置改变了，但是有可能会把父元素的也一起带跑了
解决方案：
（1）给父元素加上border
（2）给父元素加上 overflow:hidden;

14. 浮动

• 特性
  （1） 浮动元素不会占据标准流的位置（脱标）
  （2） 浮动的元素默认会以行内块级元素的形式展示
  （3） 浮动的元素在元素的顶端对齐

• 浮动带来的影响
  所有的子元素浮动起来之后，因为脱离标准流，不占据位置，导致父元素的高度变成0，是布局变乱。

• 解决方案（清除浮动）-- 4种方法
  （1）给父元素直接设置高度
  （2）给父元素设值 overflow：hidden；
  （3）使用单伪元素清除浮动

    父元素::after {
        content:"";
        display:block;
        clear:both; 
       }
  

  （4）使用双伪元素清除浮动（重点掌握这种）

    父元素::after,父元素::before {
        content:"";
        display:block;
        clear:both;
       }
  

15. overflow属性

• visible 默认值 不管
• auto 如果超出了，就隐藏起来，然后出现滚动条让内容可以随着滚动条滚动
• hidden 如果超出了，把内容剪掉隐藏起来（常用：使用overflow：hidden；控制包含塌陷和清除浮动）
• scroll 不管有没有超出，都显示滚动条

16. 定位

如果定位了，没有设置top、left等这些控制位置的属性，默认会按照他原本在标准流的位置呈现

四种定位方式

• 静态定位 static（默认值）

• 固定定位 fixed
  特点
  （1）脱离标准流不占据位置
  （2）改变原有的显示模式
  （3）每次设置位置，相对于整个浏览器来说 -- 定位基准：浏览器定位就是让某个元素固定到某个位置

• 相对定位 relative
  特点
  （1）没有脱离标准流，还是会占据在标准流中的位置
  （2）没有改变显示模式
  （3）定位基准是他自己原来的位置

• 绝对定位 absolute
  特点
  （1）脱离标准流，不占据原来的位置
  （2）改变了元素的显示模式
  （3）定位的基准是：
  - 如果前代没有定位，绝对定位的基准是浏览器（body）

• 如果前代定位了，绝对定位的基准就是离最近的定位的前代元素
  子绝父相 -- 绝对定位和相对定位一起使用

17. 层级属性

z-index:数字；

18. 盒子居中的方式

• 先跑父元素高度的50%，再往回跑自己宽高的一半。
• 定位 先跑父元素高度的50%，然后translate(-50%,-50%)

19. 控制鼠标的样式

常用样式：cursor：pointer； 小手

20. 外轮廓线

一般来说，输入框在可以输入的状态下，会在外部出现一圈蓝色类似边框的东西，其实不是边框，时外轮廓线。
跟边框的区别在于：外轮廓线不会增加元素的宽高
一般是不希望输入框在输入的时候有外轮廓线的，因为外轮廓线在一些低版本的浏览器（ie）是没有的，为了保证在所有的浏览器里面看起来的效果一样，所以把外轮廓线去除。
去除外轮廓线：outline：0 none；
轮廓（链接有虚线和文本框 有蓝色的边框）：outline-style：none；

21.去掉图片的边框的写法

在某些老的浏览器中图片是默认有边框的
border：0 none；去掉默认的边框，兼容性最好的写法

22.表单的边框通常改为0

border： 0 none； 兼容所有的浏览器

23.文本拖拽

一般在页面效果中如果用到文本域，一般是不允许用户随意改变大小的，容易导致布局混乱，一般都会禁用文本域的随意拖拽
resize：重新修改大小
resize的值有：

• none 不允许用户随意修改大小
• both 可以改宽度和高度
• horizontal 运行修改宽度
• vertical 运行修改高度

24.文本超出控制

• white-space: 控制是否换行显示
  值：
  -nirmal 普通的显示模式，默认值
  -nowrap 不换行，在一行上显示所有的内容
• text-overflow：控制超出的文字是直接裁切还是显示省略号
  值：
  -clip 直接裁切，不显示省略号（默认值）
  -ellipsis 显示省略号
• 显示省略号的效果：
  （1）必须设置一行显示 white-space：nowrap；
  （2）必须设置超出隐藏 overflow：hidden；
  （3）设置省略号 text-overflow：ellipsis；

25.精灵图

• 目的
  提高页面的加载速度，减少服务器的压力
• 制作
  （1）一定要是小图片（最好是不太会发生变化）
  （2）精灵图在制作的时候宽度一定要大于最大的那张图片的宽度
  （3）图片与图片之间必须要有空隙
  （4）在精灵图制作完成之后一定要将精灵图下方留出足够的位置，方便将来进行扩展

26. 滑动门

• 原理
  （1）把一张背景图片拆分成两个元素显示
  （2）第二部分，需要让背景图片右对齐
  （3）右边的容器需要使用padding挤出右边一点，用于显示右边的圆角
  （4）利用内容自动把右边容器的宽度变宽
• 滑动门的限制
  用于撑开右边容器的宽度的内容不能太多

27.用border属性绘制一个三角形

.box {   
   width:0px;
   height:0px;
   border:100px solid transparent; //transparent 透明度
   border-top-color:green;
   border-bottom:0 none;
       background-color:blue;
}