引用
html引用css:
css导入css: @import ‘init.css’ (模块化)
@规则
@charset 设置样式表的编码
@import 导入其他样式文件
@media 媒体查询
@font-face 自定义字体
居中解决方案
水平居中
要求父子级都是块元素
.insideDiv {
margin: 0 auto; // 上下0, 左右自适应
}
垂直居中
等待更新。。。
盒子模型
外边距 margin
边框 border
内边距 padding
宽高 width+height (宽高指是内容的宽高)
盒子的总大小=width/height + padding +border + margin (注意两侧会是2倍)
盒子的可视大小=width/height + padding +border (注意两侧会是2倍)
定位 position
static: 默认, 对象遵循常规流
absolute: 相对于离自身最近的定位祖先元素定位; 若没有, 相对于文档定位
relative: 保留原本位置定位, 用偏移属性后相对原位置定位
fixed: 相对于浏览器定位
sticky: 在屏幕中时和relative一致, 在屏幕外时和fixed一致 (吸附效果)
float
作用: 块级元素合并一行
float: left/right
设置此属性后, 浮动元素产生了浮动流
效果: 不影响块级元素位置(可能重叠); 但会影响bfc元素、文本元素(inline)和文本的位置
块级元素(如div)无法包住浮动元素
- 方案1: 清除浮动元素后面的浮动流
具体操作: 在::after伪元素设置clear: both属性(在此之前display: block, content: “”, 因为clear只能应用于块级元素), 用以清除浮动流 - 方案2: 修改父级属性,使之可以看到浮动元素
具体操作: 父级设置成float、absolute后等
副作用: position: absolute或float: left/right后, 元素会被内部转换成inline-block;
文本
溢出
单行文本, 溢出省略:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本, 溢出省略:
PC端老版本的浏览器, 前端不好计算, 后端计算
多行文本, 溢出截断(多行可能更常用的方法):
overflow: hidden;
(text-overflow 默认 clip)
font-size
数字 / 百分比 / em / px 都可以表示font-size, 除px外都是父级font-size乘以倍数
但直接使用数字, 子级可以继承父级的line-height比例, 而不是继承相乘后的px
结论: 推荐line-height使用数字
写法: font: 12px/1.5 字体
background
background-image: url();
background-size: 1px;
background-repeat: no-repeat;
background-position: 1px 1px /center center;
整合background
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
- background-color
文字代替图片
当网络不佳或浏览器问题加载不出图片时, 用文字代替图片的两种方案
方案一: 让padding加载background-image, 图片溢出容器, 然后隐藏(淘宝方案)
height: 0px;
padding-top: 容器高度px;
overflow: hidden;
方案二: 文字缩紧出容器并隐藏
text-indent: 容器宽度px;
white-space: nowrap;
overflow: hidden;
注意点
行级元素只能套行级元素
块级元素可以套行级元素
⚠️例外: p 不能套 div
CSS经典bug
margin塌陷
bug: 父级有margin-top, 而子级也有, 这时候子级不会根据父级,在垂直方向进行偏移
解决方案: 触发block format context
具体操作: 父级设置如下其中之一属性, position:absolute; display: inline-block; float: left/right; overflow: hidden;
margin合并
bug: 上下两个div分别设置了margin-bottom和margin-top, 两者会合并, 而不是累加
解决方案: 可以用触发bfg解决, 但实际开发只用一边的margin来解决