web前端HTML

盒子模型

选择器

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N的值为1）

使用公式设置多个元素，根据元素的结构关系查找多个元素例。

:nth-child(公式)

如：(注意n从0开始算术)

功能	公式
偶数标签	2n
奇数标签	2n-1/2n+1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5
找到第5个以前的标签	-n+5

伪元素选择器

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

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

after和before都是在选中的标签最里面创建伪元素，相当于都是创建子级标签。

注意点：

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

    <style>div{width: 300px;height: 300px;background-color: aliceblue;}/*行内显示模式*/div::before{content: "老鼠";}/*行内显示模式*/div::after{content: "大米";}</style>
</head>
<body><ul><div>爱</div></ul>
</body>

行内显示模式：一行共存多个，宽高属性不生效，宽高由内容撑开。

PxCook用法

PxCook(像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。(PSD文件：设计稿的后缀名)

模式如下：

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

下载网址：

1.先创建一个项目web项目，然后导入项目

2.开发项目可以智能识别，设计模式可以进行手动测量

盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型的组成

盒子模型重要组成部分：

内容区域 - width & height
内边距 - padding(出现在内容与盒子边缘之间)
边框线 - border
外边距 - margin(出现在盒子外面)

padding实现的效果为将整个盒子产生一定的距离。

<style> div{ width: 200px; height: 200px; background-color: aqua; padding: 20px; border:1px solid #000; margin:50px; } </style>

margin：盒子的外边距通常用来拉开盒子与盒子之间的距离。

边框线

属性名：border(bd)

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

常用线条样式：

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

上面的方式设置的边框线是一起设置的4边的边框线，因此我们为了满足开发需求，还可以为4个边设置不同的属性。

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

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

    <style>div{width: 200px;height: 200px;background-color: aqua;padding: 20px;border:1px solid #000;margin:50px;border-top: 10px solid #000;border-left: 10px dashed aquamarine;border-bottom: 10px dotted darkorange;border-right: 10px solid olivedrab;}</style>

内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding /padding-方位词

设置内边距方法：padding-方位词像素大小（10px）

对于上面的写法，如果我们要设置它四个方面的值的大小都不同，那么我们就要连续写四句代码。

因此，我们可以一次写多个值。

写法：padding 上内右内下内左内（顺序不可改变，顺时针复赋值）

如果写的值小于4个，（仍然按照顺时针）如果那个方向没有值就看对面的值（上-下，左右）

盒子模型尺寸计算

默认情况下盒子的尺寸：

盒子尺寸=内容尺寸+border尺寸+内边距尺寸。

给盒子加border/padding会撑大盒子

解决方法

手动做减法：减掉border/padding尺寸
内减模式：box-sizing:dorder-box （设置该模式后，浏览器会自动减掉border/padding尺寸）

外边距

作用：拉开两个盒子之间的间距

属性名：margin （不会撑大盒子尺寸）

用法与padding相同

设置外边距方法：margin-方位词像素大小（10px）

对于上面的写法，如果我们要设置它四个方面的值的大小都不同，那么我们就要连续写四句代码。

因此，我们可以一次写多个值。

写法：margin 上内右内下内左内（顺序不可改变，顺时针复赋值）

如果写的值小于4个，（仍然按照顺时针）如果那个方向没有值就看对面的值（上-下，左右）

版心居中效果

设置左右外边距相同即可（前提是盒子一定要有宽度），我们设置左右边距的值为auto即可达到居中效果。

清楚默认样式

清楚标签默认的样式，比如：默认的内外边距

使用统配符：

        *{margin: 0px;padding: 0px;(我们可以在这里添加内减模式)}

元素溢出

作用：控制溢出元素的内容的显示方式

属性名：overflow

属性值

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

外边距问题 - 合并现象

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中较大的值生效

外边距问题 - 塌陷问题

场景：父子级的标签，子级的添加上边距，会产生塌问题

现象：导致父级一起向下移动

解决办法：

取消子级margin，父级设置padding
父级设置overflow：hidden
父级设置boeder-top

行内元素 - 内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置(margin(内边距)可以改变水平方向的位置，但无法改变垂直方向的间距)

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

盒子模型 - 圆角

作用：设置元素的外边框为圆角

属性名：border - radius

属性值：数字+px / 百分比 (属性值是圆角半径)

例如：淘宝的搜索框，和一些图片的显示都是圆角。

我们也可以为四个角设置不同的效果，实现方式：

boder-radius : 左上右上右下左下

（从左上角顺时针赋值,没有取值的角与对角取值一样）

常用形状

圆形：给正方形盒子设置圆角属性值为宽高的一半/50%。（最大值是50%，超过50%效果仍为50%）。

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

盒子模型 - 阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影

注意：

x轴偏移量和Y轴偏移量必须书写
默认是外阴影，内阴影需要添加insert

```css
div {width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
```

Flex布局

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

基本使用

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

属性名：float

属性值

left：左对齐
right：右对齐

<style>/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;/* float: left; */float: right;}
</style><div class="one">one</div>
<div class="two">two</div>

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，**不占用标准流的位置

产品区域布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>区域布局</title><style>*{padding:0;margin: 0;}li{list-style: none;}.product{margin: 50px auto;width: 1226px;height: 628px;background-color: aquamarine;}.left{float: left;width: 234px;height: 628px;background-color: #cc1515;}.right{float: right;width: 978px;height: 628px;background-color:#6617e5;}.right li{margin-right: 14px;margin-bottom: 14px;float: left;width: 234px;height: 300px;background-color: chartreuse;}/*第四个第八个li*/.right li:nth-child(4n){margin-right: 0;}</style>
</head>
<body><!--版心：左 右面：8个--><div class="product"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

清除浮动

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

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

在父级元素的内容最后添加一个块级元素，设置css属性clear：both

<style>
.clearfix {clear: both;
}
</style><div class="father"><div class="left"></div><div class="right"></div><div class="clearfix"></div>
</div>

方法二：单伪元素法

1.准备 after 伪元素
.clearfix::after {content: "";display: block;clear: both;
}
2.父级使用clearfix类
<div class="father clearfix"></div>

方法三：双伪元素法

1.准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}/* after 清除浮动 */
.clearfix::after {clear: both;
}

2.父级使用 clearfix 类