CSS学习笔记（二）：

css不可继承的属性(布局)

CSS中可以和不可以继承的属性

• display：inline, block, inline-block, table-cell none
• 文本类
• 盒子模型类：宽高，内外边距，border
• 背景类
• 浮动类

css可以继承的属性

• 字体类
• 文本类 text-align line-height text-indent

CSS盒子border使用技巧

border-width:10px
border-color:#000
border-style: solid实线
==> border(-top, -left…): 10px, solid, #000（一定要三个属性都写上，否则失效）

• 实现“<”这样的直角
  只设置相邻的两个边，设置宽度、样式、颜色

width: 10px;
height: 10px;
top: 50px;
left: 50px;
top: 2px solid #000;
left: 2px solid #000;

• 实现三角形
  利用border的三个属性：border-width, border-style, border-color
  且div的宽高要为零

width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
//transparent 透明的
border-color: red transparent transparent transparent; 
//旋转角度
transform: rotate(-45deg);

css画图形集合

margin重叠问题&兼容问题

• 同级相邻的元素，margin只取一侧，谁大听谁的。
• 兼容问题：大盒子嵌套小盒子，小盒子margin值传递到大盒子，导致整体margin变化。解决方法：
  • overflow:hidden：（原本是溢出隐藏）这也可以解决margin传递问题
  • padding:添加padding（目的是使margin有效传递，所以仅添加1px就可以）后实际宽高会变大，盒子宽高应该减去1px
  • 添加border：border-top:1px solid transparent ，后实际宽高会变大，盒子宽高应该减去1px
  • （不用margin）添加内边距，后实际宽高会变大，盒子宽高应该减去位移量
• margin 上右下左 ；auto 是代表自动的值，margin 50px auto=>居中
• padding、border改变元素宽高，margin不影响

水平和垂直居中

• 文字水平居中：text-align:center
• 文字垂直居中：让 height 和 line-height（行高）相等
• 块级元素水平居中：margin: 0 auto

背景background

• background-color. background-image. background-repeat. background-position. background-attachment可以应用复合属性
• css3:background-size. background-origin. background-clip

overflow

• 属性有：visible（不会修剪）；hedden（修剪）；scroll（修剪，滚动条显示）；auto（被修剪才用滚动条）；inherit（继承）
• overflow: hidden：作用
  1. 本意：溢出隐藏
  2. 清除浮动：父元素包含子元素，子元素设置为浮动后无法撑开父元素，在父元素用此方法清除
  3. 阻止margin传递：父元素包含子元素，子元素赋予外边距，结果传递到父元素，在父元素用此方法阻止传递
• 单行溢出文字用省略号

width: xxx px;						//必须有宽度
overflow: hidden;					//溢出隐藏
white-space: nowrap;				//强制不换行
text-overflow: ellipses;			//文字折行方式，用省略号

• 多行溢出文字用省略号(移动端等用webkit内核)

width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

多个元素在同一行显示的方法

• 把本身转换为行内元素：display: inline（缺点：宽高不起作用）
• 转换成inline-block：（缺点：会受到空格和换行影响，产生间距 ==> 解决方案：父元素加font-size，在子元素再设置回来）

让元素消失

• 透明度：opacity: 0;
• display: none;
• height:0; overflow: hidden
• 没有height，line-height: 0; overflow: hidden
• visibility: hidden隐藏
• margin/padding 设置足够大+overflow: hidden
• transform属性：translate坐标设置足够大