CSS缺漏学习

CSS 行高（line-height） 

line-height 属性可以使用如下类型的值：

• px
• em
• %
• 无单位数字，比如 1.5

无单位数字和百分比类似，1.5 和百分比 150% 相同。前者写法要简洁些。

以text开头的一些属性

text-align文本对齐，取值有left right center justity(实现两端对齐）

text-decoration 文本修饰 取值有：

• 上划线（overline）
• 下划线（underline）
• 中划线或叫删除线（line-through）

text-indent 文本缩进，只有第一行被缩进

text-indent: 30px;

text-shadow: h-shadow v-shadow blur color; 文本阴影

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊的距离。
• color 可选。阴影的颜色。

 h1{ text-shadow: 0 2px 5px rgba(0,0,0,0.5);}

CSS 盒子模型（Box Model）

background-position: center 20px; 

• xpos ypos：像素值 px，左上角是 0 0。
• x% y%：百分比，相对于HTML元素大小的比例，第一个值定义水平位置，第二个值定义垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅定义了一个值，另一个值将是 50%。

背景重复（background-repeat）

body{ background-repeat: repeat-x;} /* 只在水平方向重复 */

body{ background-repeat: repeat-y;} /* 只在垂直方向重复 */

body{ background-repeat: no-repeat;} /* 只渲染一次，不重复 */ 

background-size 用来定义背景图像的尺寸

背景属性速写（background） 

CSS支持把多个背景属性组合写在一个统一的属性 background 中，可设置属性和顺序：

 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; 

注意在background-position属性和background-size之间有一个斜杠符号。 

background: #234567 
    url(/assets/bmm02.jpg)
    no-repeat
    fixed
    center center / 120px
    content-box content-box;

每个 display 选项有其特定的渲染行为：

• block 将占据整行宽度
• inline 将被视为纯文本
• inline-block 块和内联行为的结合
• list-item 和 block 类似，不过会多显示一个列表符号（bullet point）。
• table，table-row 和 table-cell 和表格相关的布局行为。
• none 渲染时将被从网页中删除，就好像这个元素代码不存在一样。

visibility: hidden; 规则和 display: none; 有点类似，用于隐藏一个元素，但还占空间位置。 

CSS 溢出（overflow）缺省值是 visible

overflow:  visible 内容总是被显示。因为通常情况下HTML5元素内容比CSS样式更重要。

overflow: hidden;隐藏掉任何溢出部分的内容。

overflow: scroll 可有滚动条显示内容

overflow: auto，这样滚动条将只在内容溢出时被自动显示。

border属性和位置

border: 1px solid yellow;

• border-style 可以是实线（solid）、虚线（dashed）、点线（dotted）等

  border-color: 上 右 下 左;

  

上面这个例子实现了一个向上的三角形。其原理是由于div本身宽高为0，那么4条边将出现重叠，在重叠区的计算规则是沿对角线平均分配。这样就形成了一个三角形效果。

 CSS 圆角边框（border-radius）

 border-radius: (水平半径）上 右 下 左 /  (垂直半径）上 右 下 左;

1	border-radius: 2em 1em 4em / 0.5em 3em;

等同于

1 2 3 4

border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;

border-radius一个常用例子是用来创建一个圆形元素：

1 2 3 4 5 6

div{   width:100px;   height: 100px;   background: #666;   border-radius: 50%; }

上述代码把width和height设置为相同值，然后圆角弧度为其宽高的一半，这样就构造了一个圆形。

CSS position

• static：静态定位，这是缺省值
• relative：相对定位，可相对于正常位置进行移动
• absolute：绝对定位，该元素可相对于第一个被定位（positioned）的祖先元素进行移动
• fixed：固定位置

 上例中的 section 元素的 position 属性被设置成 relative，这将使其成为所有子元素的参照点。

当元素 position 属性被设置为 fixed时，它的行为和absolute类似，我们可以设置left/right/top/bottom的坐标位移。

唯一的区别在于，固定位置的参照点是视口（viewport）。也就是一个固定位置（fixed）的元素不会随页面滚动，总是保持在屏幕上可见。这个位置属性常被用来实现粘附效果的页头（Sticky header）。

float 属性可以被设置为下面3个值：

• left 和 right 设置靠左浮动或靠右浮动。
• none 清除浮动。

浮动元素会自动被应用一个 display: block 规则，和块元素行为接近（除了占据整行宽度）：

• 你可以为浮动元素设置宽和高
• 如果没有设置高度，那么元素的高度就是行高。
• 如果设置了 width: 100%，那么看起来就和块级元素一样。

 清除浮动：clear 属性值可用来把元素推离浮动区域。它只能用于块元素。不设置浮动和清除浮动的效果并不相同。

BFC布局规则

总之，我们只要记住：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。同属一个BFC的相邻块级盒子的垂直margin会发生合并（Collapse）
3. 每个元素盒子的左外边缘（即Margin box的左边）和包含块的左边缘（即Border box的左边）相接触（对于从右往左的排版则相反，是右边接触)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

何时会生成BFC

• 根元素，即html标签元素（有些浏览器下是body标签元素）
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

overflow:hidden，将触发创建一个新的BFC，而BFC在计算高度时会把float元素计算在内。其效果就等同于清除了内部浮动。