001HTML+CSS 知识点

发布于 2022年 04月 09日 12:00

1 布局模式

  1. 固定布局： 容器不能移动，宽高固定页面被固定网页包裹

  2. 流式布局： 百分比，屏幕自适应

  3. 弹性布局（flex）:移动端常用布局，ie9 下不支持

  4. 定位布局:

     固定布局 ：position: fixed ，元素固定，不随页面移动而移动
 相对定位： position: relative，相对元素自身定位，不脱离文档流
 绝对定位：position: absolute; 绝对定位，脱离文档流，如果不定义相对定位，将会相对于整个浏览器
 margin 和padding : margin 外边距，盒子和盒子，padding 内边距，盒子的边和内部元素距离

2 水平居中方法

  1. 行内元素： text-align: center;

  2. 定宽的块级元素：

    (1) margin 和width 实现水平居中 (margin： 0 auto)

    (2) 绝对定位和 margin-left: -(宽度值/2) 实现水平居中

         width: 200px;
     position: absolute;
     left: 50%;
     margin-left: -100px;

  3. position: absolute + (left:0+right:0+top:0+bottom:0)+ margin: auto

     postion: absolute;
 width: 200px;
 top: 0
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;

  4. 未知宽度 块级元素

    （1） table 标签 配合margin 左右 auto 实现水平居中 使用table 标签，会做得很将元素：display: table,在通过标签添加左右margin: auto

    （2） inline-block 实现水平居中

    display: inline-block; 或者display: inline 和text-align: center 实现水平居中 需要特殊处理inline-block 浏览器兼容性问题 ，空白间距

    (3) 绝对定位实现水平居中

     绝对定位+transform ,translateX 可以移动本元素的50%

     position: absolute;
     left： 50%；
     top: 50%;
     transform: translate(-50%, -50%);

    (4) 相对定位实现水平居中

         用float 或者display 把父元素变成行内块元素
     
         display: in-line-bloack;
         position: relative;
         left: 50%；
         
     目标元素： 
     
             position: relatvie;
             right: 50%;

    (5) css3 的flex 实现水平居中的方法

     方法 一：
 .content {
     display: flex;
     flex-direction： column;
 }
 .content .con {
     align-self: center;
 }
 
 方法二：
 .content {
     display: flex;
 }
 .content .con{
     margin: auto;
 }

    (6) css3 的fit-content 配合左右margin 为auto 实现水平居中

     .content {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
 }

3 CSS 实现宽度自适应100% 宽高16： 9 的比例的矩形

比如： width 100%; height: 100% * 9 /16 = 56.25%;

<div>
    <div class = "scale">
        <div class = "item">
            
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.scale {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    position: relative;
}
.item {
    width: 100%;
    height； 100%；
    position: absolute;
}

4 左边固定宽度，右边宽度自适应，且高度和浏览器当前高度一致

1）浮动布局

左边浮动  float: left; width: 2220px;
右边   margin-left: 220px;

2)

左边浮动+负边距  float: left; width: 220px; margin-right: -100%
右边 margin-left: 220px;

5、animate和translate一些常见的属性

1）animate

animation: name(自定义动画名称) duration (持续时间)；
animation: scroll 2s
意思： 2 秒内执行scroll 动画

2) translate

推荐文章