第二周：CSS进阶+设计

目录

一、CSS伪类与伪元素

（一）伪类

1.什么是伪类

2.标签

3.一些常用伪类选择器

（二）伪元素

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

2.一些常用伪元素选择器

二、关系选择器

1:子元素选择器

2: 后代元素选择器：

3:选择下一个兄弟(仅挨着我的)

4:选择下面所有的兄弟(前面的不选)

三、盒模型

1.组成

 2.边框线 border 

3.内边距 padding

4.外边距 margin

5.尺寸计算

三、布局

（一）浮动

eg:一个简易的布局

（二）Flex布局（常用）

1.什么是flex布局

2.Flex组成

3.主要内容

---

一、CSS伪类与伪元素

（一）伪类

1.什么是伪类

伪类依附于已存在的元素，使用冒号作为标识，描述元素在某特性或状态下的样式。

2.标签

3.一些常用伪类选择器

①鼠标悬停状态 :hover (任何标签都可以设置成鼠标悬停的状态)

示例：

 <a href="#">这是一个超链接</a>
 <div class="box">div标签</div>

/* 这是hover的CSS格式 */
a:hover{
    color:red;
    /* 可随意添加属性 */
}
.box:hover{
    color:red;
}

② a标签的四个状态

• ：link——访问前
• ：visited——访问后
• ：hover——鼠标悬停
• ：active——点击时（激活）：鼠标左键一直点击，松开消失

eg:(展示效果略，不便于截屏)

/* 这是css样式 */
a:link{
    color:black;
}
a:visited{
    color:green;
}
a:active{
    color:orange;
}

 ③结构伪类选择器

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

• :first-child——查找第一个元素
• :last-child——查找最后一个元素
• :nth-child(N)——查找第N个元素（第一个元素N值为1）

eg:输入以下一个列表

<ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
        <li>777</li>
        <li>888</li>
</ul>

/* 这是css样式 */
li:first-child {
    background-color: red;
}
li:last-child{
    color:green;
}
li:nth-child(4) {
    color:aqua;
}

效果展示

 ④:nth-child(公式)

• 偶数公式：2n
• 奇数公式：2n+1
• 找到5的倍数的公式：5n
• 找到第五个以前/以后：n+5/-n+5(注：从0开始)

/* css样式 */
li:nth-child(2n+1) {
    color:aqua;
}

 

（二）伪元素

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

使用"::"标识

2.一些常用伪元素选择器

①::before——在选中的标签里面的最前面添加一个伪元素

::after——在选中的标签里面的最后面添加一个伪元素

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

eg:

<div>div里的内容</div>

/* css样式 */
div{
    width: 200px;
    height: 200px;
    background-color: pink;
}
div::before{
    content:"111";
    width: 40px;
    height: 40px;
    background-color: red;
    display: block;
}
div::after{
    content:"222";
    width: 40px;
    height: 40px;
    background-color: orange;
    display: block;
}

效果展示

②::first-line——只能用于块级元素，用于设置块级元素的第一个行内容的样式

::first-letter—— 只能用于块级元素，用于设置附属元素的第一个字母内容的样式

eg:

<div>div<br/>div</div>

/* css样式 */
div{
    width: 200px;
    height: 200px;
    background-color: pink;
}
div::first-line{
    color:red;
}

div::first-letter{
    color:red;
}

这是first-line效果

这是first-letter效果

③::selection——鼠标长按拖动选中内容

eg:

<div>哈哈哈哈哈哈</div>

/* css样式 */
div::selection{
    color:green;
}

前三个字为鼠标选中

④::placeholder——设置input元素的placeholder的内容样式

二、关系选择器

1:子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素{}

例如：div>span{},

2: 后代元素选择器：

作用：选中指定元素内的指定后代元素

语法：祖先 后代

3:选择下一个兄弟(仅挨着我的)

语法：前一个+下一个

例子：p+span

4:选择下面所有的兄弟(前面的不选)

语法：兄～弟

例子：p～span

三、盒模型

1.组成

• 内容区域：width,height
• 内边距：padding（出现在内容与盒子边缘之间，会使盒子变大）
• 边框线：border
• 外边距：margin(出现在盒子外面)

eg:

<div>div标签</div>

/* css样式 */
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    padding:20px;
    border:4px solid ;
    margin:20px;
}

加入css样式前

加入CSS样式后

这是每个部分的长度

 2.边框线 border 

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

线条样式：solid——实线，dashed——虚线，dotted——点线

设置单方向边框线：border-top, border-right, border-bottom, border-left

eg:

div{
    width: 100px;
    height: 100px;
    background-color: pink;
    border-top:2px solid red;
    border-bottom: 2px dashed green;
    border-left: 4px dotted black;
    border-right: 6px solid blue;
}

3.内边距 padding

取四值：上、右、下、左

取三值：上、左右、下

取两值：上下、左右

4.外边距 margin

居中：margin: 0 auto;

5.尺寸计算

一个盒子的实际宽度、高度:content+padding+border+margin

还原盒子尺寸

①手动计算：减掉border/padding尺寸

②内减模式：box-sizing:border-box

div{
    width: 100px;
    height: 100px;
    background: pink;
    padding:20px;
    box-sizing:border-box;
}

三、布局

（一）浮动

 格式：float:left / right

脱标现象：浮动的盒子会脱离标准流的控制，故一般一个盒子里的内容都浮动或不浮动。

div{
    width: 100px;
    height: 100px;
    background: pink;
    padding:20px;
    margin: 20px;
    box-sizing:border-box;
    float:left;
}

eg:一个简易的布局

<!-- 在body加入以下内容 -->
    <div claaa="container">
        <div class="header">header</div>
        <div class="navbar">navbar</div>
        <div class="main">
            <div class="menu">menu</div>
            <div class="content">content</div>
            <div class="sidebar">sidebar</div>
        </div>
        <div class="footer">footer</div>
    </div>

/* css样式 */
.container {
    width: 400px;
    height: 400px;
}
.header{
    width: 400px;
    height: 100px;
    border: 2px solid black;
}

.navbar{
    width: 400px;
    height: 50px;
    border:2px dashed black;
    margin-top: 10px; 
    margin-bottom: 10px;
}

.main{
    width: 400px;
    height: 200px;
    border: 2px dashed black;
}
.menu{
    width: 70px;
    height: 200px;
    border: 2px solid black;
    float:left;
}
.content{
    width: 209px;
    height: 200px;
    border: 2px solid black;
    float:left;
    margin-left: 20px;
    margin-right: 20px;
}
.sidebar{
    width: 70px;
    height: 200px;
    border: 2px solid black;
    float:left;
}

.footer{
    width: 400px;
    height: 20px;
    margin-top: 10px;
    border:2px dotted black;
}

这是效果展示

（二）Flex布局（常用）

1.什么是flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex模型不会 产生浮动布局中的脱标现象，布局网页更简单，更灵活

2.Flex组成

设置方式：给父元素设置display:flex,子元素可以自动挤压或拉伸

组成部分：

弹性容器

弹性盒子：沿着主轴排列

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直方向

3.主要内容