css笔记

CSS设置块级元素、内联元素、行内块元素属性及区别

一、块级元素
独占一行
默认width是父元素的100%，height取决于内容的height
设置width、height有效
设置margin，上下左右有效
设置padding，上下左右有效
二、内联元素
不会独占一行
默认width取决于内容的width，height取决于内容的height
设置width、height无效
设置margin，左右生效、上下无效
设置padding，左右生效、不建议使用上下内边距（与块内元素不同，其内容相对上下位置不变，如背景颜色会覆盖上下元素）
三、行内块元素
不会独占一行
设置width、height有效
设置margin，上下左右有效
设置padding，上下左右有效
四、display属性
取值：
none：元素不会被显示出来
block：块级元素
inline：内联元素
inline-block：行内块元素

HTML <link> 标签的 media 属性

screen 计算机屏幕（默认）。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备（低分辨率、有限的滚屏能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限带宽）。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

position

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative: 生成相对定位的元素，相对于其正常位置进行定位。
static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

flex

.flex {
  display: flex;
}

.flex-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-vc {
  display: flex;
  align-items: center;
}

.flex-r {
  display: flex;
  justify-content: flex-end;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-c {
  display: flex;
  justify-content: center;
}
//多余显示...
.notwrap{
    word-break:keep-all; 
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
//鼠标移至图片放大效果
.scan .ewm:hover {
    cursor: pointer;
    transform: scale(1.5);
}
//显示3行 多余显示...
p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical; 
}