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);
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:作用
- 本意:溢出隐藏
- 清除浮动:父元素包含子元素,子元素设置为浮动后无法撑开父元素,在父元素用此方法清除
- 阻止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坐标设置足够大