前端第二周

最新推荐文章于 2024-11-10 22:45:39 发布

SlienceRoman

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量1.6k

点赞数 41

文章标签：前端算法

本文链接：https://blog.csdn.net/DYHHH06/article/details/137178911

版权

本文详细介绍了CSS中的伪元素选择器、盒子模型、边框和内边距、外边距合并与塌陷、浮动、清除浮动方法，以及flex布局、定位和CSS精灵、字体图标的使用。通过实例解析，帮助读者掌握这些关键技术在网页设计中的应用。

摘要由CSDN通过智能技术生成

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性内容

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注意点：

必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

PxCook（像素大厨）用法

创建-Web模式-导入素材-利用工具（能用开发先用开发，不行再用设计模式）

盒子模型

作用

布局网页，摆放盒子和内容

重要组成部分

内容区域-width&height
内边距-padding（内容与盒子边缘之间，四个方向，会撑大盒子）
边框线-border（快捷键：bd回车）
外边距-margin（出现在盒子外面）

86b364e102a044f492b49317269b94f

border（边框线）

属性值：边框线粗细线条样式颜色（不区分顺序） 常用线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

设置单方向边框线

border-方位名词（bd+方位名词首字母）

属性值：边框线粗细线条样式颜色（不区分顺序）

方位名词：top,bottom,right,left

padding/padding-方位名词（内边距）

padding:30px(四个内边距同) padding-top:30px(单独设置上方) 多值写法(最多连接4个) 复合属性用空格隔开顺序：上右下左，顺时针转圈，没数看对面

取值个数	示例	含义
1	padding: 10px;	四个方向均10px
2	padding: 10px 20px;	上下：10px；左右：20px；
3	padding: 10px 20px 30px;	上：10px；左右：20px；下：30px；
4	padding: 10px 20px 30px 40px;	上：10px；右：20px；下：30px；左：40px；

尺寸计算

盒子尺寸：内容尺寸+border尺寸+内边距尺寸

结论：加padding/border会撑大盒子

解决：

手动做减法
内减模式：box-sizing: border-box

margin（外边距）

外边距不会撑大盒子其他与padding写法一样

版心居中：margin左右都是auto（此时盒子宽度必须要有）（auto应放在数字+px后面）

清除默认样式

1、通配符选择器

/*掉内外边框*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box；<未来可能会设置padding，避免撑大盒子
}
/*去掉列表的项目符号*/
.a{list-style:none;
}

2、并集选择器（overflow）

作用：控制溢出元素的显示方式 属性值：

属性值	效果
hidden	溢出隐藏（最常用）
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题：合并和塌陷

外边距问题-合并现象

场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin的较大值生效

外边距问题-塌陷问题

场景：父子级的标签，子级加上边距会产生塌陷问题
现象：导致父级一起向下移动

解决办法： 1、取消父级margin，父级设置padding（推荐）

2、父级设置overflow:hidden
3、父级设置border-top（注意会撑大盒子）

行内元素-内外边距问题

场景：行内元素添加margin和padding，无法改变元素位置

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

圆角与盒子阴影

border-radius（外边框圆角效果）

属性值：数字+px/百分比
提示：属性值是圆角半径（圆角半径最大50%，再大还是正圆，没有效果）

赋值：从左上角顺时针赋值，没有取值的角与对角取值相同四值：左上右上右下左下三值：左上右上+左下右下两值：左上+右下右上+左下

圆角形状

（1）正圆

给正方形盒子设置圆角属性值为宽高的一半/50%

（2）胶囊

给长方形盒子设置圆角属性值为盒子高度的一半

box-shadow（阴影效果）

属性值：x轴偏移量 y偏移量模糊半径扩展半径颜色内外阴影
注意：x轴偏移量，y偏移量必须书写默认是外阴影，内阴影要加inset

标准流

即文档流，指的是标签在页面中默认的排步规则

浮动

属性名：float
属性值：left（左对齐），right（右对齐）
特点：顶对齐，具备行内块显示特点，脱离标准流的控制（要浮动应该都加浮动），父级宽度不够，浮动的子级会自动换行。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
           
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: rgb(148, 24, 24);
            float: left;
        }
        .right{
            width: 950px;
            height: 300px;
            background-color:rgb(48, 35, 190);
            float: right;
        }
        .buttom{
            height: 100px;
            background-color: skyblue;
        
        }
        
        
    </style>
</head>
<body>
    <div class="top">
    <div class="left"></div>
    <div class="right"></div></div>
    <div class="buttom"></div>
</body>

解决办法：清除浮动（清除浮动带来的影响)

（1）额外标签法

在父元素内容的最后添加一个块级元素（比如div或p)，设置CSS属性clear:both（left左侧，right右侧)

/*在原有的CSS样式基础上再加一个（一般这种情况都用clearfix作为类名*/
.clearfix{
            clear: both;
        }

<body>
    <!--body里的内容变成下面这样-->
    <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div><!--在right后面额外加一个-->
</div>
    <div class="buttom"></div>
</body>

（2）单伪元素法

在父元素内容的最后添加一个块级元素

.clearfix::after{
content:"";    /*伪元素生效必须配合content属性-->*/
display:block;
clear:both;
}

<body>
    <div class="top clearfix"> <!--在top后面加-->
    <div class="left"></div>
    <div class="right"></div></div>
    <div class="buttom"></div>
</body>

（3）双伪元素法（推荐）

.clearfix::before,/*before伪元素用来解决外边距塌陷问题*/
.clearfix::after{
    content:"";   
    display:table;/*显示模式*/
    }
.clearfix::after{
    clear: both;/*清除浮动影响*/
    }

（4）overflow法

父元素添加CSS属性overflow:hidden（溢出隐藏）

flex布局

弹性布局，不会脱标。

flex-组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：弹性容器（.box），弹性盒子（.box div 沿主轴方向排列），主轴（默认在水平方向），侧轴/交叉轴（默认在垂直方向）

主轴对齐方式（justify-content）

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式（align-items align-self）

align-items ：控制所有盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

修改主轴方向（flex-direction）

属性值	效果
row	水平方向，从左向右
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比（flex）

作用：控制弹性盒子在主轴方向的尺寸
属性值：整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行（flex-wrap）

属性值
wrap	换行
nowrap	不换行（默认）

行对齐方式（align-content）

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly（没有代码提示）	弹性盒子沿主轴均匀排列，弹性盒子与容器之间距离相等