css布局~移动端

syj_111

已于 2024-07-10 15:25:02 修改

阅读量836

点赞数 28

文章标签： css 前端 html less

于 2024-02-20 20:08:02 首次发布

本文链接：https://blog.csdn.net/syj_111/article/details/136197635

版权

css布局

在这里插入图片描述

三大特征：

1：继承性；

2：层叠性；

3：优先级；

优先级：

特征：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式；

在这里插入图片描述

盒子模型：

概念：页面中的每一个标签，都可看做是一个“盒子”；浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

在这里插入图片描述

<body>
    <div>div是一个块元素，没有默认的高，默认高度由内容撑开<br>
宽默认100%，独占一行，<br>
一般用来做页面的布局
    </div>

组成部分：

1.内容区域：content;

2.边框区域：border;

3.内边距区域：padding；

4.外边距区域：margin；

内容的宽度和高度：

作用：利用width和height属性默认设置是盒子内容区域的大小；

属性：width/height；

常用取值：数字+px；

边框（border）：

作用：给设置边框粗细，边框样式，边框颜色效果；

属性：

 <title>边框</title>
    <style>
        div{
            background-color: aqua;
            height: 300px;
            width: 800px;
            /* 边框宽度 */
            border-width: 1px;
            /* 边框的颜色 */
            border-color: aquamarine;
            /* 边框样式 */
            border-style: double;
            /* 简写 */
            border: 1px solid red;
            color: blueviolet;
        }

内边距（padding）：

作用：设置边框与内容区域之间的距离；

场景：只给盒子的某个方向单独设置内边距；

属性值：数字+px;

在这里插入图片描述

 <title>内边框，填充</title>
    <style>
        .a,
        img{
            height: 300px;
            width: 500px;
        }
        .a{
            border: 5px solid blue;
            /* 内边距，内容和边框的距离 */
            padding: 10px;
            /* 顺时针，上右下左 */
            padding: 10px 20px 30px 40px ;
            padding-right: 10px;
        }
    </style>

外边距（margin）：

作用：设置边框以外，盒子与盒子之间的距离；

场景：只给盒子的某个方向单独设置外边距；

属性值：数字+px；

在这里插入图片描述

   <title>外边距</title>
    <style>
        .a{
            height: 300px;
            width: 300px;
            border: 5px solid red ;
        }
        .b{
            height: 100px;
            width: 100px;
            border: 3px solid black;
            margin-top: -200px;
            margin-left: 120px;
        }
    </style>
</head>
<body>
    <div class="a">盒子：猫</div>
    <div class="b">盒子：老鼠</div>
</body>

在这里插入图片描述

结构伪类选择器：

作用：根据元素在HTML中的结构关系查找元素；

优势：减少对于HTML中类的依靠，有利于保持代码整洁；

场景：常用于查找某父级选择器中的子元素；

 <title>结构伪类选择器</title>
    <style>
        /* 父元素的第一个子元素 */
        ul li:first-child {
            background-color: aqua;
        }

        /* 最后一个 */
        /* 不建议用 */
        li:last-child {
            background-color: blueviolet;
        }

        /* 第n个子元素 */
        ul li:nth-child(2) {
            color: brown;
        }

        /* 倒数第n个 */
        ul li:nth-last-child(2) {
            font-size: 30px;
        }

n的注意点：

1.n为：0，1，2，3，4，5，6…

2.通过n可以组成常见公式：

偶数：2n，even；

奇数：2n+1，2n-1，odd；

找到前5个：-n+5；

找到从第5个往后：n+5；

  /* n的用法 */
        /* 1.偶数 2n even */
        table tr:nth-child(2n){
            background-color: aqua;
        }
        /* 2.奇数 2n+1 2n-1 odd */
        table tr:nth-child(2n+1){
            background-color: blueviolet;
        }
        /* 前三个  n+3 */
         ul li:nth-child(-n+3){
            border:1px solid #3bf10e;
        }
        /* 三个之后的 n+3 */
        ul li:nth-child(n+3){
            border: 1px solid black;
        }
        /* 后三个 */
        ul li:nth-last-child(-n+3){
            font-size: 30px;
        }

nth-of-type：只在父元素的同类型（E）子元素范围中，匹配第n个；

区别：

：nth-child~~直接在所有孩子中数个数；

：nth-of-type~~先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

伪元素：

一般页面中的非主体内容可以使用伪元素；

区别：1.元素：HTML设置的标签；

2.伪元素：由CSS模拟出的标签效果；

在这里插入图片描述

标准流：

概念：又叫文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何方式排列元素；

规则：

1.块级元素：从上往下，垂直布局，独占一行；

2.行内块元素：从左往右，水平布局，空间不够自动拆行；

浮动：

作用：网页布局；

属性名：float；

属性值：left（左浮动），right(右浮动)；

特点：1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素；

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；

4.浮动元素有特殊的显示效果（一行可以显示多个；可以设置宽高）

清除浮动：

目标：能够认识清除浮动的目的，并且能够使用清除浮动的方法；

含义：清除浮动带来的影响（如果子元素浮动了，此时子元素不能撑开标准流的块级父元素）；

原因：子元素浮动后脱标~~不占位置；

目的：需要父元素有高度，从而不影响其他网页元素的布局；

  .f {
            /* 清除浮动，清除浮动对后边的影响 */
            /* both:全部 */
            /* clear: both; */
            height: 300px;
            width: 800px;
            background-color: brown;
        }

清除浮动的方法：

1.直接设置父元素高度；

特点：简单粗暴，方便；

缺点：有些布局中不能固定父元素高度。

2.额外标签法；

操作：1.在父元素内容的最后添加一个块级元素；

2.给添加的块级元素设置clear：both；

特点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂；

3.单伪元素清除法；

操作：用伪元素替代了额外标签；

优点：项目中使用，直接给标签加类即可清除浮动；

4.双伪元素清除法；

5.给父元素设置overflow：hidden；

操作：直接给父元素设置overflow：hidden；

优点：方便；

定位：

目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点；

常见应用场景：

1.可以解决盒子与盒子之间的层叠问题；

2.可以让盒子始终固定在屏幕的某个位置；

属性名：position；

在这里插入图片描述

 <title>position定位</title>
    <style>
        .a,
        .b{
            height: 300px;
            width: 300px;
            background-color: blue;
        }
        .b{
            background-color: green;
            /* margin-left: 150px;
            margin-top: -150px; */
            position: relative;
            top: -150px;
            left: 150px;
        }
        .a{
            position: relative;
            z-index: 100;
        }
    </style>

静态定位：

就是之前的标准流；是默认标准流的情况；

代码：position：static；

相对定位：

相对于自己进行移动

不会脱离标准文档流

保留原来的位置；

代码：position：relative；

特点：需要配合方位属性实现移动；相对于自己原来位置进行移动；在页面中占位置~~没有脱标；

绝对定位：

绝对定位:

相对于有定位的父元素进行移动

如果父元素没有定位，找父元素的父元素，直到body

脱离标准流，原来的位置不保留

一般和相对定位一起使用；

代码：position：absolute；

特点：需要配合方位属性实现移动；默认相对浏览器可视为区域进行移动；在页面中不占位置~~已经脱标；

 .b {
            height: 300px;
            width: 300px;
            background-color: red;
            position: absolute;
            /* 水平居中 */
            /* 1.向右移动父元素的一半 */
            left: 50%;
            /* 2.向左移动自己的一半 */
            margin-left: -150px;
            /* 垂直居中 */
            /* 1。向下移动父元素的一半 */
            top: 50%;
            /* 2.向上移动自己的一半 */
            right: 50%;
        }

子绝父相：

含义：子元素：绝对定位；父元素：相对定位；

好处：父元素是相对定位，则对网页布局影响最小；

在这里插入图片描述

元素的层级关系：

标准流<浮动<定位；

更改定位元素的层级：

属性名：z-index；

属性值：数字（数字越大，层级越高）；

垂直对齐方式：

属性名：vertical-align；

属性值：

baseline：默认，基线对齐；

top：顶部对齐；

middle：中部对齐；

bottom：底部对齐；

光标类型：

属性名：cursor；

在这里插入图片描述

边框圆角：

属性名：border-radius；

常见取值：数字+px，百分比；

溢出部分显示效果：

指的是盒子内容部分所超出盒子范围的区域；

属性名：overflow；

在这里插入图片描述

元素本身隐藏：

常见属性：1.visibility:hidden;

2.display：none；

区别：1.visibility：hidden隐藏元素本身，并且在网页中占位置；

2.display：none隐藏元素本身，并且在网页中不占位置；

 li{
            float: left;
            width: 350px;
            height: 247px;
            margin-right: 20px;
            position: relative;
            /* 超出部分隐藏 */
            overflow: hidden;
        }

元素整体透明度：

属性名：opacity；

属性值：0~1之间的数字（1：表示完全不透明；0：表示完全透明）；

边框合并：

代码：border-collapse：collapse；

链接伪类选择器：

场景：常用于选中超链接的不同状态；

在这里插入图片描述

焦点伪类选择器：

场景：用于选中元素取焦点时状态，常用于表单控件；

input：focus{
background-color：skyblue；
}

属性选择器：

场景：通过元素上的HTML属性来选择元素，常用于选择input标签；

在这里插入图片描述

精灵图：

优点：减少服务器发送次数，减少服务器的压力，提高页面加载速度；

项目中将多张小图片合并成一张大图片，这张大图片称为精灵图

在这里插入图片描述

背景图片补充：

作用：设置背景图片的大小；

background-size：宽度高度；

文字阴影：

作用：给文字添加阴影效果，吸引用户注意；

属性名：text-shadow；

 <style>
        /* 文字阴影 */
        p{
            font-size: 30px;
            /* 水平，垂直，模糊，颜色 */
            /* 第一个左右，第二个上下 第三个模糊度 */
            text-shadow: 3px 5px 10px red;
        }
        .a{
            height: 300px;
            width: 300px;
            margin: 0 auto;
            background-color: palegreen;
            transition: all 3s;
        }
        .a:hover{
            /* inset内部阴影 */
            /* 水平，垂直，模糊，阴影扩大尺寸，颜色，内阴影 */
            box-shadow: 20px 20px 20px 50px yellow inset;
        }
    </style>

盒子阴影：

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节；

属性名：box-shadow；

过渡：

作用：让元素的样式慢慢的变化，常配合hover使用；

属性名：transition；

过渡属性给需要过渡的元素本身加；

li p{
            position: absolute;
            top: 190px;
            color: white;
            /* 过渡 */
            transition: all 0.5s;
            /* 层级 */
            z-index: 11;
        }
 /* 过渡属性要写在没有改变之前的样式中 */
            transition: all 2s ease-out;

移动端

flex:

给父元素加上弹性布局:把父元素变成了弹性容器, 父元素的直接子元素会变成弹性盒子 ,弹性盒子默认按照主轴方向排列相当于添加了一个浮动

属性名： display: flex;

justify-content: flex-end;（从终点开始排列）；

空白间距均分在弹性盒子两侧： justify-content: space-around

空白间距均分在相邻盒子之间： justify-content: space-between;

弹性盒子与容器之间间距相等；justify-content: space-evenly;

改变主轴方向：垂直（flex-direction: column）；

允许换行： flex-wrap: wrap;

 <title>flex布局</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            /* 给父元素加上弹性布局 
            :把父元素变成了弹性容器
            父元素的直接子元素会变成弹性盒子
            弹性盒子默认按照主轴方向排列相当于添加了一个浮动
            */
            display: flex;
            /* 从终点开始排列 */
            justify-content: flex-end;
            /* 主轴居中 */
            justify-content: center;
            /* 空白间距均分在弹性盒子两侧 */
            justify-content: space-around;
            /*空白间距均分在相邻盒子之间  */
            justify-content: space-between;
            /* 弹性盒子与容器之间间距相等 */
            justify-content: space-evenly;
        }
 .a{
            display: flex;
            border-bottom: 2px solid black;
            /* 改变主轴方向：垂直 */
            flex-direction: column;
            /* 侧轴居中 */
            align-items: center;
        }

颜色渐变：

   <style>
        .a{
            height: 300px;
            background-image: linear-gradient(yellow,green, yellowgreen);
        }
    </style>

animation:

linear匀速;

infinite无限循环;

alternate:原路返回;

a动画名称;

steps步长;

forwards动画执行完毕时状态;

animation: s 60s infinite steps(60):(steps(60)把动画分成60个动作);

paused:停止;

 .a1 {
            height: 300px;
            width: 300px;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 0;
            /*  名称 运行时间 速度 延迟执行时间 播放次数 反向播放*/
            animation: a 3s linear 1s infinite alternate;
        }
        .a:hover .a1{
            /* 暂停 */
            animation-play-state: paused;
        }

transform:

旋转:transform: rotate(3600deg);

放大( transform: scale(1.2)😉

翻转:transform: skew(30deg,45deg);

scale:缩放( transform: scale(0.8)😉

 @keyframes s{
            100%{
                transform: rotate(450deg);
            }
        }

3D转换:

厚度： perspective: 1200px;、

让子元素处于3D空间（ transform-style:preserve-3d ;）

.a2{
            height: 300px;
            width: 300px;
            margin: 0 auto;
            background-color: #3edc3c;
            /* 方向 */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 方向简单写法 */
            transform: translate3d(100px,100px,-300px);
        }

父元素剩余的位置：

1.flex: 1;

2. align-self: flex-end;

允许弹性盒子换行:flex-wrap: wrap;

align:

1. 侧轴居中: align-items: center;

2.行的对齐:align-content:space-evenly;

3.都在底部:align-items: end;

 <style>
        .a{
            display: flex;
            height: 100px;
            justify-content: space-between;
            /* 侧轴对齐方式 */
            align-items: center;
        }
        .a>div{
            background-color: aqua;
        }
        .a2{
            align-self: flex-end;
            /* 父元素剩余的位置 */
            flex: 1;
        }

less:

rem单位:1rem=1html-font-size;

rem用法: @media (width:375px) { html{ font-size: 37.5px; } }

js:写到最下面()

<style>
        /* 1rem=1html-font-size */
        html{
            font-size: 16px;
        }
        /*10rem × 16px=160   高=160  */
        .a{
            height: 10rem;
            width: 20rem;
            background-color: aqua;
        }
    </style>

vw和vh只能选择一个使用;

first-child:第一个…标签;

1vw=1/100 的视口宽度(width: 10vw;);

1vh-1/100 的视口高度( height: 10vh);

  <title>vm/vh</title>
    <style>
        .a{
            background-color: aqua;
            /* 1vw=1/100 的视口宽度 */
            /* width: 10vw; */
            /* 1vh-1/100 的视口高度 */
            /* height: 10vh; */
            /* width: 68/3.75vw;
            height: 29/6.67vh; */
            width:18.13vw ;
            height: 4.4977vh;
        }
        img{
            /* 218/3.75  146/6.67 */
            width: 58.1333vw;
            height: 21.889vh;
        }

设置滚动条:

&::-webkit-scrollbar { height: 0; }

overflow-x: auto;

   &::-webkit-scrollbar {
                height: 0;
            }

适配屏幕:

容器:container;container-fluid;

水平排列:row(col-lg-3 col-xs-6 col-sm-12) lg所有值加起来12;

垂直排列: col(col-lg-3 col-xs-6 col-sm-12);

@media screen:

1.screen带屏幕的设备;

2. @media(max-width:1024px){}(是移动端的时候);

3.@media(min-width:1200px)(是电脑端的时候);

 <style>
        /* 适配屏幕 */
        /* screen带屏幕的设备 */
        /* @media screen{
            html{
               max-width: 900px;
            }
            .a{
                height: 100px;
                width: 200px;
                background-color: aqua;

            }
        }
        @media screen{
            html{
                min-width: 900px;
                max-width: 1200px;
                
            }
            .a{
                height: 100px;
                width: 200px;
                background-color: #00ff00;
                
            }
        } */
        @media(max-width:1024px){
            /* 是移动端的时候 */
            .a{
                width: 100%;
                height: 100%;
                background-color: blue;
        }}
        @media(min-width:1200px){
            /* 是电脑端的时候 */
            .a{
                width: 100%;
                height: 100%;
                background-color: aquamarine;
            }
        }
    </style>