随笔分类 - css
摘要:float方式 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
阅读全文
摘要:内容不够时footer在页脚,没有滚动条 内容撑开时footer随内容撑开 *html,body的height设置为100%,不能为auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
阅读全文
摘要:在圣杯的基础上多加一层,使用padding使中间内容显示 不再需要定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要:三列布局 左右固定,中间自适应 中间内容优先加载 左右和中间等高(伪等高) *三列都需要浮动 *使用margin-left为负设定边界(元素位置不改变) *左右使用定位,使中间的内容显示 *使用padding-bottom和margin-bottom设置伪等高 <!DOCTYPE html> <ht
阅读全文
摘要:.clearfix::after { content:""; display:block; clear:both; } 在浮动元素的父元素上使用 clearfix 类样式
阅读全文
摘要:多行文本超出隐藏并显示省略号 display: -webkit-box; /* 将p标签变成弹性盒子 */ -webkit-line-clamp: 2; /* 最多显示2行 */ -webkit-box-orient: vertical; /* 垂直排列 */ overflow: hidden; /
阅读全文
摘要:white-space:nowrap;让文本不换行 overflow:hidden 溢出的部份隐藏 text-overflow:ellipsis; 多余的部份用...展示 浮动清理 ::after { content:""; display:block; clear:both; }
阅读全文