CSS 小笔记

虽然用CSS的时间不短，但是发现总是存在一些盲点，会影响工作效率和页面质量。于是打算重新填补一些小漏洞。

块级 vs 内联

• 块级元素 ：高度、宽度、行高、外边距、内边距可控制。
• 内联元素：高度、宽度不可变。行高可以改变，内外边距可改变。
• line-block:兼有以上两个的特点。对于内联元素来说，改变的地方就是宽度和高度可以控制了。

属性

• text-indent : 文本缩进，只能用于块级元素。
• text-align : 写在块级元素上，可以让里面的内联元素水平居中（center），可继承。
• text-transform : uppercase 内容大写（有其他值）。
• text-decoration: 文字装饰，a 标签默认下划线样式来自于这个属性，其值为underline. 要删除线样式可以设置值为line-through。
• line-height : 行高，可以在内联元素中加，也可以在父元素中加，属性可继承，表示每一行的高度。如果要实现一个块级元素中一行文字的居中，有两种方式：

• 一是设置块级元素的height和line-height相等，则文字居中。

* 二是给一个正常的line-height,结合height的值计算出上下padding的值。

推荐利用padding 的方式。

• white-space: 处理空白符，可以用在要求文字超出时加省略号处。

image.png

省略号效果：

  

    hello hello hello hello hello hello hello hello
  

//注意 这些属性要设置在文字元素外面的块级元素上，不是设置在文字元素自身上。
p{
  width:100px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:solid 1px red;
}

image.png

• background

• background-color: 颜色值可以有单词、rgb、十六进制、hsl. 加透明有：rgba、hlsa。
• background-image:图片默认会在水平方、垂直方向上重复，可通过background-repeat 进行控制。地址写法：background-image:url("test.jpg"),url里的路径，双引号可加可不加。
• background-attachment : fixed,无论屏幕怎么滚动，图片永远不动。（在做一些视差滚动页面时会用到）
• background-position 图片位移: 作用：雪碧图。一个图在多个地方显示背景图。
  background:可以将以上所有属性在backgournd一个属性后面都写上

最好是按顺序，否则就需要测试各个浏览器的效果。

background : background-color | url |  background-repeat | background-attachment |  background-position
body
  { 
        background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

• position

定位一般是两个元素的互动

• relative :还是占原来的位置，但是在视觉上偏移一点。不脱离文档流。位移属性可以有top、bottom、left、right。一般取2个。
• absolute:相对于祖先元素中，往上一层层追溯，第一个position不为static的元素，如果没有，则相对body.脱离了文档流。如果top和left都不写，则元素的位置和原来的位置一样，只是脱离了文档流。IE下不要只给absolute,而不给top和left,会出现奇怪的情况。
• fixed:相对于文档的可视区域定位。

• float

• 浮动也是两个元素的互动，取值：left right，浮动的原始用法是为了做图文环绕。
• clear:both：在用浮动效果时，经常用用到clear:both（场景：子元素浮动时，父元素无法包裹住自己的子元素）. 它的作用是告诉浏览器， 我是一个分界线，我的上面是浮动的，我自己本身是没有浮动的，那么父元素就知道边界在哪里，把我包起来。除了both这个值，还有left和right。
  left:我的左边不能出现浮动元素，等于把自己另起一行
  both:我的左边和右边都不能出现浮动元素，浏览器只好另起一行来放这个元素。
• 除了添加一个末尾元素，设置其clear:both的方式来来父元素包含住所有子元素外，还有一种方式：

ul:after{
content:'';
display:block;
clear:both;
}
//但是IE不支持这种写法。要加下面的样式才可以
ul{
 *zoom :1; //IE中的zoom会触发BFC(hasLayout)
}

关于zoom，有一种说法是在IE里，它会促使浏览器去重新计算元素的高度。比如说给元素设置inline-block，在IE下有兼容性问题，我们可以这样来解决：

div{
display:inline-block;
*display:inline;
*zoom:1;
width:300px
}

• 浮动的问题
  浮动在IE中有很多奇怪的表现。浮动的兼容性问题比较多。IE下的bug：

• 浮动重叠
• float 后margin 双倍（解决方式）
• 同一行两个元素一个左浮动，一个右浮,IE下，右浮的元素会另起一行来浮动（解决方式，在页面放置元素时，把右浮的元素放到前面）
  *号开头的元素只有IE6、7认识。（可在browserhacks.com查找一些针对浏览器的hack 方法）

div{
 margin-left:10px;
*margin-left:5px;
}

• 浮动的其他注意点

• float 一个内联元素后，可以给这个元素设置宽度和高度，可以想象成这个元素变成了inline-block元素，不需要再特别设置，但是它是脱离文档流的。浮动的元素不能自动占百分百宽度。
• 浮动的时候其实是没有脱离文档流的，它只是浮动了。脱离文档流的意思就是不占位。

• 常见值(单位）

• 12px: 像素

• 1.2em:相对于font-size. 如果当前a元素所在的环境中（比如说父标签）font-size是12px,那么我们给a标签写font-size:1.2em ,其实际值即为 1.2乘于12px.
• line-height:2 .不给单位的话，就是相对于现在的font-size乘于2.

• 盒模型
  background:red ：border+padding+content
  inline元素可以设置左右margin,上下左右padding. 但是它并不能把它的父元素撑起来，因为父元素把inline元素当做类似文字一样的东西，如果文字设计得过大，父元素是不管的，它就给你一行文字的高度。如果是inline-block元素,上下margin 会生效。只能意会，文档里没有说明得很明确。

image.png

• BFC (Block Formatting Context 块级格式上下文)
  over-flow:hidden 可以触发父元素包围住浮动的子元素？就是BFC. BFC即：当某个元素添加了某些属性的时候，它会触发一个效果（或者说会触发这个元素去重新计算它的子元素），这个元素会把它的子元素（不是孙子元素）的位置都给包含起来。触发的条件有overflow:hidden ,还有一些其他的属性。