2022-01-16 css

1、行内元素/块级元素非替换元素/替换元素
2、img的title和alt属性
3、meta标签
4、DOCTYPE标签
5、script标签的defer和async
6、W3C盒模型和怪异盒模型
box-sizing:border-box;
7、水平垂直居中的方法

//1、弹性布局
display:flex;
align-items:center;
justify-content:center;
//2、绝对定位+transform
.father{
      width: 100%;
      height: 100%;
      position: relative;
}
.son{
      width: 500px;
      height: 500px;
      background: pink;
      position: absolute;
      top:50%;
      left: 50%;
      transform:translate(-50%,-50%);
}
//3、position 定位（适用于子盒子有宽度和高度的时候）
.father{
      width: 100%;
      height: 100%;
      position: relative;
 }
.son{
      width: 500px;
      height: 500px;
      background: pink;
      position: absolute;
      top:50%;
      left: 50%;
      /* 子元素宽的一半 */
      margin-left: -250px; 
      /* 子元素高的一半 */
      margin-top:-250px;
}
//4、position定位 margin:auto;

.father{
width: 100%;
height: 100%;
position: relative;
}
.son{
width: 500px;
height: 500px;
background: pink;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

8、BFC
（1）BFC是什么
（2）触发条件
（3）特性及作用
9、清除浮动的方法
10、position属性
（1）absolute 
绝对定位，相对于static定位以外的第一个父元素进行定位。
元素通过left top right bottom属性进行调整位置
（2）relative
相对定位，相当于正常位置进行定位
（3）fixed
绝对定位元素，相对于浏览器窗口进行定位。
素通过left top right bottom属性进行调整位置
（4）static
默认值。没有定位，元素出现在正常的流中。
11、css隐藏元素的方法
12、Flex布局
13、双栏布局三栏布局
14、重排和重绘
15、css选择器
优先级
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的为准
优先级为: !important > id > class > tag important 比 内联优先级高
16、css动画
animation属性
transiton属性
17、css实现三角形
18、css Sprites
19、px rem em 
20、伪类/伪元素
伪元素:在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

21、display: none; 与 visibility: hidden; 的区别
相同： 它们都能让元素不可见
区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容

2022-01-16 css

推荐阅读更多精彩内容