卓音第二周培训

最新推荐文章于 2024-11-14 17:40:35 发布

杳鸢想喝雪碧

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量597

点赞数 24

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2302_81421412/article/details/137168870

版权

第二周卓音培训

PxCook

切图设计工具软件支持psd文件的文字、颜色、距离自动识别

开发面板（自动智能识别
设计面板（手动测量尺寸和颜色

创建项目导入素材

盒子模型

作用：布局网页，摆放盒子和内容。由内容（height，width）、内边距padding、边框线border、外边距margin组成

border

粗细，线条样式，颜色

线条样式	效果
solid	实线
dashed	虚线
dotted	点线

border也可以设置单方向边框线，如：border-top/right/left/bottom:1px solid black;

padding

设置内容与盒子边缘的距离，单位为px；padding也可以设置单边属性：padding-top/right/left/bottom:；

padding的多值写法：记忆口诀：从上开始，顺时针取值，无值取对面

注意：padding默认会撑大盒子

盒子尺寸=内容尺寸+border尺寸+padding尺寸

加padding和border都会撑大盒子

解决方法：①手动减更改盒子尺寸减去border和padding的大小

②自动减设置box-sizing：border-box；

margin

拉开两个盒子之间的距离，不会撑大盒子，也有多值写法，同padding。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 2px solid black;
            padding: 30px;
            margin: 30px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 2px dashed black;
            padding: 50px 30px 40px;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 2px dotted black;
            padding: 40px 30px ;
            box-sizing: border-box;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">two</div>
</body>

常用作版心居中的效果，盒子需要有宽度设置

margin:auto;

效果如下：

清除默认样式

如默认的内外边距

方法：①通配符选择器

②并选所有带有默认样式的标签

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
li{
    list-style:none;
}

元素溢出

控制溢出元素的内容的显示方式 overflow

属性值	效果
hidden	溢出内容隐藏
scroll	不管有没有溢出的内容都显示滚动条
auto	有溢出的内容才显示滚动条

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 2px solid black;
            padding: 30px;
            margin: 30px;
            overflow: hidden;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 2px dashed black;
            padding: 50px 30px 40px;
            overflow: scroll;
        }
        .three{
            width: 500px;
            height: 100px;
            background-color: red;
            border: 2px dotted black;
            padding: 40px 30px ;
            box-sizing: border-box;
            margin: auto;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="one">内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出</div>
    <div class="two">two内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出</div>
    <div class="three">two内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出内容溢出</div>

</body>

效果如下：

外边距的合并现象和塌陷问题

合并现象

垂直排列的兄弟元素，上下的margin会合并，取两个margin之中较大的值生效

塌陷问题

父子级元素，子级元素添加上外边距会产生塌陷问题，使父级元素一起向下移动。

解决方法：①子级元素取消margin，父级元素设置padding属性，更推荐

②父级设overflow：hidden

③父级设border-top属性

第二种和第三种都是让浏览器找到正确的父级元素的位置

行内元素的内外边距问题：

行内元素添加margin和padding属性会无法改变元素的垂直位置

解决方法：给行内元素添加line-height 可以改变垂直位置

圆角

设置元素的外边框为圆角。border-radius：50px或50%指的是圆角半径

多值写法：记忆口诀：从左上角开始，顺时针赋值，无值取对角。

正圆形状：正方形盒子，设置圆角属性50%或宽高的一半

胶囊形状：长方形盒子，设置圆角属性为高的一半

圆角半径用百分比表示时生效效果最大是50%

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
            border: 2px solid black;
            margin: 50px;
        }
        .two{
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
            border: 2px solid black;

        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>

效果如下：

阴影

给元素设置阴影效果，box-shadow

属性有：x轴偏移量；y轴偏移量；模糊半径；扩散半径；颜色；内/外阴影

注意：x轴偏移量和y轴偏移量必须写

默认是外阴影，内阴影需要添加inset

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 50px;
            box-shadow: 20px 40px 50px 10px rgba(0, 0, 0, 0.5);
        }
        .two{
            width: 300px;
            height: 100px;
            background-color: pink;
            box-shadow: 20px 20px  gray inset;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>

效果如下

浮动

作用：让块级元素水平排列

float：left/right

特点

顶对齐，具有行内块显示模式，会产生脱标（脱离标准流）的现象。

浮动的本质是实现图文混排的效果。

设置float之后，不占用标准流的位置。

注意：父级宽度不够，浮动的子级元素会换行

    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
           float: left;
        }
        .two{
            width: 300px;
            height: 100px;
            background-color: pink;
            float: right;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

效果如下：

清除浮动

浮动元素会脱标，如果父级元素没有高度，子级元素无法撑开父级高度，可能导致页面布局混乱。

解决方法：①额外标签法：在父元素内容的最后加一个块级元素，设置css属性： clear:both; 块级元素类选择器常命名为.clearfix

②单伪元素法：

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

父级元素同时选中两个类名 class="top clearfix"

③双伪元素法：

.clearfix::before,.clear::after{
    content:"";
    display:table;
}
.clearfix::after{
    clear:both;
}

④父级元素加 overflow:hiddden;

FLEX布局

弹性布局，非常适合结构化布局，提供强大的空间分布和对齐能力。

特点

flex不会脱标，布局更简单更灵活。

组成

父级元素设 display:flex 子元素会自动挤压或拉伸。

组成	作用
弹性容器（父级元素）	display:flex；
弹性盒子（子级元素）	盒子沿主轴方向排列
主轴	默认在水平方向
侧轴/交叉轴	默认在垂直方向

主轴与侧轴对齐方式

作用	属性
创建flex容器	display:flex;
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

主轴对齐方式

属性	作用
flex-strat	默认值：从起点开始依次排序
flex-end	从终点开始依次排序
center	沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在盒子之间，父级剩余尺寸分配成间距
space-around	弹性盒子沿主轴均匀排列，空白间距均分在盒子两侧，盒子间距是两端的二倍
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等，各个间距都相等

<style>
        .one{
            width: 1000px;
            height: 300px;
            background-color: yellow;
            display: flex;
            justify-content: center;
        }
        .two{
            width: 500px;
            height: 100px;
            background-color: pink;
        }
    .three{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        .four{
            width: 1000px;
            height: 300px;
            background-color: burlywood;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
    </div>
    <div class="four">
        <div class="three">1</div>
        <div class="three">2</div>
        <div class="three">3</div>
    </div>

效果如下：

侧轴对齐方式（设置给弹性容器

属性	作用
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器
center	弹性盒子沿侧轴居中排列
*flex-start	弹性盒子沿侧轴从起点开始依次排列
*flex-end	弹性盒子沿侧轴从终点开始依次排列

stretch：弹性盒子没有设置侧轴方向尺寸则默认拉伸

某个盒子侧轴对齐方式（设置给弹性盒子

用伪类选择器选中

.box div::nth-child() 其他同侧轴对齐方式

修改主轴方向

侧轴会自动变换

属性	作用
*row	水平方向，从左向右
column	垂直方向，从上向下
*row-reverse	水平方向，从右向左
*column-reverse	垂直方向，从下向上

弹性伸缩比

作用:控制弹性盒子的主轴方向的尺寸。

属性值：整数数字，表示占用父级剩余尺寸的份数

默认情况下，主轴方向的尺寸是靠内容撑开的，侧轴默认拉伸。

<style>
        .one{
            width: 1000px;
            height: 300px;
            background-color: yellow;
            display: flex;
        }
        .two{
            width: 50px;
            height: 100px;
            background-color: pink;
        }
        .three{
            flex: 2;
            background-color: aquamarine;
        }
        .four{
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">1</div>
        <div class="four">2</div>
        <div class="three">3</div>
    </div>

效果如下：

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

wrap换行 nowrap不换行

行对齐方式

同主轴对齐方式

行对齐方式对单行弹性盒子不生效

定位

作用：灵活改变盒子在网页的位置。

步骤：①定位模式position；②边偏移：设置盒子的位置

相对定位

position:relative;

特点

改变位置的参照物是自己原来的位置

不脱标，占位

标签显示模式特点不变

绝对定位

position:absolate;

子级绝对定位，父级相对定位（子绝父相）

特点

脱标不占位

参照物：先找最近的已经定位的祖先元素，如果没有，找浏览器的可是区域改位置

显示模式特点改变；即宽高生效（行内块模式）

定位居中

步骤

①使用绝对定位

②水平，垂直边偏移50%

③子级向左、上移动自身尺寸的一半

两种方式：①左、上的外边距为**-**自身尺寸的一半

②transform:translate(-50%,-50%) 这种更方便

    <style>
        .one{
            width: 1000px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }
        .two{
            width: 50px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">1</div>
    </div>
</body>

效果如下：

固定定位

position:fixed;

元素的位置在网页滚动时不会改变

特点

脱标不占位

参照物找浏览器窗口

显示模式特点改变：行内块模式

堆叠层级

z-index:1;

默认效果：按照标签书写顺序，后来者居上。

作用

设置定位元素的层次顺序，改变定位元素的显示顺序，取值为整数，默认为0，取值越大，显示的顺序越靠上。

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: 2;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: pink;
            position:absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>