文章目录
- 一、选择器
-
- [1. 结构伪类选择器](#1. 结构伪类选择器)
- [2. 伪元素选择器](#2. 伪元素选择器)
- 二、PxCook
- 三、盒子模型
-
- [1. 盒子模型-组成](#1. 盒子模型-组成)
- [2. 边框线](#2. 边框线)
-
- [(1) 四个方向相同](#(1) 四个方向相同)
- [(2) 单方向边框线](#(2) 单方向边框线)
- [2. 内边距](#2. 内边距)
- [3. 尺寸计算](#3. 尺寸计算)
- [4. 外边距](#4. 外边距)
- [5. 版心居中](#5. 版心居中)
- [6. 清除默认样式](#6. 清除默认样式)
- [7. 元素溢出](#7. 元素溢出)
- [8. 外边距问题](#8. 外边距问题)
-
- [(1) 合并现象](#(1) 合并现象)
- [(2) 外边距塌陷](#(2) 外边距塌陷)
- [9. 行内元素 -- 内外边距问题](#9. 行内元素 – 内外边距问题)
- [10. 圆角](#10. 圆角)
- [11. 盒子阴影(拓展)](#11. 盒子阴影(拓展))
- 四、综合案例-产品卡片
-
- [1. HTML标签](#1. HTML标签)
- [2. CSS样式](#2. CSS样式)
- [五、综合案例二 -- 新闻列表](#五、综合案例二 – 新闻列表)
-
- [1. 整体布局](#1. 整体布局)
- [2. 标题区域](#2. 标题区域)
- [3. 内容区域](#3. 内容区域)
一、选择器
1. 结构伪类选择器
基本使用
作用:根据元素的结构关系查找元素
选择器 | 说明 |
---|---|
E:first-child | 查找第一个E元素 |
E:last-child | 查找最后一个E元素 |
E:nth-child(N) | 查找第N个E元素(第一个元素N为1) |
css
li:first-child {
background-color: green;
}
:nth-child(公式)
作用:根据元素的结构关系查找多个 元素,公式中的n取值从 0 开始
功能 | 公式 |
---|---|
偶数标签 | 2n |
奇数标签 | 2n+1/2n-1 |
5的倍数的标签 | 5n |
第5个以后的标签(即第5个开始后面所有的) | n+5 |
第5个以前的标签(即第5个开始前面所有的) | -n+5 |
2. 伪元素选择器
作用:创建虚拟元素 (伪元素),用来摆放装饰性的内容
选择器 | 说明 |
---|---|
E::before | 在E元素里面最前面添加一个伪元素 |
E::after | 在E元素里面最后面添加一个伪元素 |
css
div::before {
content: "before 伪元素";
}
div::after {
content: "after 伪元素";
}
注意:
- 必须设置 content: ""属性 ,用来设置伪元素的内容,如果没有内容,则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
二、PxCook
PxCook(像素大厨) 是一款切图设计工具软件。支持PSD文件(设计稿的后缀名)的文字、颜色、距离自动智能识别
- 开发面板(自动智能识别)
- 设计面板(手动测量尺寸和颜色,使用工具栏的尺子工具进行测量,使用工具栏的吸管工具查看颜色)
使用方法:创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击右上角按钮【添加】,导入设计稿(或者直接将PSD文件拖入)
右上角加减号缩放大小;按住键盘空格,当鼠标变成手的形状时,滑动鼠标可将设计稿上下移动
三、盒子模型
作用:布局网页,摆放盒子和内容
1. 盒子模型-组成
- 内容区域 -- width & height(在这里的内容会紧贴左上角)
- 内边距 -- padding(出现在内容与盒子边缘之间,会撑大这个盒子,后面会学如何取消)
- 边框线 -- border
- 外边距 -- margin(出现在盒子外面)
可以在样式中选中元素进行查看,也可以点击计算样式,直接查看整个盒子的可视图
css
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
2. 边框线
(1) 四个方向相同
属性名:border(bd)
属性值:边框线粗细(px) 线条样式 颜色(不区分顺序)
属性值 | 线条样式 |
---|---|
solid | 实线 |
dashed | 虚线 |
dotted | 点线 |
css
div {
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: pink;
}
(2) 单方向边框线
作用:实际运用中盒子的每个方向边框线可能不同,可以设置单方向边框线
属性名:border-方位名词(bd+方位名词首字母,例如,bdl)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
css
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
2. 内边距
作用:设置内容 与盒子边缘之间的距离(如搜索框中的提示文字和盒子最左边缘之间的距离)
- 属性名:padding / padding-方位名词,添加 padding 会撑大盒子
css
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
- padding 多值写法
从上 开始顺时针 赋值,当前方向没有数值则与对面取值相同
取值个数 | 示例 | 含义 |
---|---|---|
一个值 | padding: 10px; | 四个方向内边距均为10px |
四个值 | padding: 10px 20px 40px 80px; | 上10,右20,下40,左80 |
三个值 | padding: 10px 40px 80px; | 上10,左右40,下80 |
两个值 | padding: 10px 80px; | 上下10,左右80 |
3. 尺寸计算
默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论:给盒子加 border / padding 会撑大盒子
解决:
- 手动做减法,减掉 border / padding 的尺寸
- 內减模式:添加属性box-sizing: border-box
4. 外边距
作用:拉开两个盒子之间的距离
属性名:margin
提示:与 padding 属性值写法、含义相同(比如单独方向、多值写法),但外边距不会撑大盒子
5. 版心居中
所有板块在网页中都是左右居中的,将左右 margin 值 为auto(盒子要有宽度)
使用版心居中的效果时盒子必须有宽度值,否则无法实现效果
css
div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
6. 清除默认样式
清除标签默认的样式,比如默认的内外边距,使用通配符或者将所有有默认样式的标签逗号隔开(小程序写不能用*)
css
/* 清除默认内外边距,可以在这里直接添加上内减模式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号,将这一项写在通配符中也可以 */
li {
list-style: none;
}
7. 元素溢出
作用:控制溢出 元素的内容的显示方式(如盒子范围小内容多)
属性名:overflow
属性值 | 效果 |
---|---|
hidden | 溢出隐藏 |
scroll | 溢出滚动(无论是否溢出都显示滚动条位置,垂直和水平都有) |
auto | 溢出滚动(溢出才显示滚动条位置) |
css
div {
width: 1000px;
height: 200px;
background-color: pink;
overflow: hidden;
}
8. 外边距问题
(1) 合并现象
场景:垂直 排列的兄弟元素,上下 margin 会合并
现象:取两个 margin 中的较大值生效
css
/* 合并后外边距变为50px */
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
(2) 外边距塌陷
场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题
现象:导致父级一起向下移动
css
.son {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
解决方法:
- 取消子级margin,父级设置padding,给父级加内边距,直接规避塌陷问题,推荐使用
- 父级设置属性 overflow: hidden
- 父级设置 border-top,但border会撑大盒子
9. 行内元素 -- 内外边距问题
场景:行内元素添加 margin 和 padding,无法改变元素垂直位置,只能改变左右位置
解决方法:给行内元素添加 line-height 可以改变垂直位置(行内元素垂直位置受行高控制)
css
span {
/* margin 和 padding 属性,无法改变垂直位置 */
margin: 50px;
padding: 20px;
/* 行高可以改变垂直位置 */
line-height: 100px;
}
10. 圆角
作用:设置元素的外边框为圆角
属性名:border-radius
属性值:数字+px / 百分比,指圆角半径
- 多值写法
从左上角开始顺时针赋值,当前角没有数值则与对角取值相同
取值个数 | 示例 | 含义 |
---|---|---|
一个值 | border-radius: 10px; | 四个角均为10px |
四个值 | border-radius: 10px 20px 40px 80px; | 左上10,右上20,右下40,左下80 |
三个值 | border-radius: 10px 40px 80px; | 左上10,右上左下40,右下80 |
两个值 | border-radius: 10px 80px; | 左上右下10,右上左下80 |
- 正圆形状:给正方形盒子设置圆角属性值为 宽高的一半 / 50%
css
img {
width: 200px;
height: 200px;
/* 写100px或者50%,百分比取值越小越不圆,但增大无效果,即圆角最大是50% */
border-radius: 100px;
border-radius: 50%;
}
- 胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半
css
div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
11. 盒子阴影(拓展)
作用:给元素设置阴影效果(一个盒子的外面有阴影的感觉)
属性名:box-shadow
属性值:X 轴偏移量 Y 轴偏移量 模糊半径(越模糊越柔和) 扩散半径(阴影大小) 颜色 内外阴影
注意:
- X 轴偏移量 和 Y 轴偏移量必须书写
- 默认是外阴影,内阴影需要添加 inset
css
div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
四、综合案例-产品卡片
为了使网页在浏览器中加载的速度更快,注意CSS书写顺序如下:
- 盒子模型属性
- 文字样式
- 圆角、阴影等修饰属性
1. HTML标签
html
<div class="product">
<img src="./images/liveSDK.svg" alt="">
<h4>抖音直播SDK</h4>
<p>包含抖音直播看播功能</p>
</div>
2. CSS样式
html
<style>
/* 清除默认样式,启动内减模式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置网页背景浅灰色 */
body {
background-color: #f1f1f1;
}
/* 设置盒子的宽高、背景颜色,设置外边框(上下50左右版心居中),给父级设置水平居中(使子级的图片和文字水平居中),设置盒子的内边距使内容向下移动,设置圆角 */
.product {
margin: 50px auto;
padding-top: 40px;
width: 270px;
height: 253px;
background-color: #fff;
text-align: center;
border-radius: 10px;
}
/* 设置标题文字的上下外边框,设置字号(一般是偶数),设置字体颜色 */
.product h4 {
margin-top: 20px;
margin-bottom: 12px;
font-size: 18px;
color: #333;
font-weight: 400;
}
/* 设置内容的字号和颜色 */
.product p {
font-size: 12px;
color: #555;
}
</style>
五、综合案例二 -- 新闻列表
1. 整体布局
将整体内容分区域
html
<style>
/* 清除默认样式,启动内减模式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表标号 */
li {
list-style: none;
}
/* 清除超链接下划线 */
a {
text-decoration: none;
}
/* 整体盒子宽高,版心居中 */
.news {
margin: 100px auto;
width: 360px;
height: 200px;
/* background-color: pink; */
}
</style>
<div class="news"></div>
2. 标题区域
html
<style>
/* 设置标题区域的高度,背景颜色,描边,去掉左面的边框 */
.news .hd {
height: 34px;
background-color: #eee;
border: 1px solid #dbdee1;
border-left: 0;
}
/* 设置左边的白色盒子,超链接设置宽高不生效,改成块级元素使其生效,设置上右边框线,设置水平居中和行高,设置字体大小和颜色 */
.news .hd a {
/* -1 盒子向上移动,使橙色边框和父级灰色边框对齐 */
margin-top: -1px;
display: block;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
width: 48px;
height: 34px;
background-color: #fff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #333;
}
</style>
<div class="hd"><a href="#">新闻</a></div>
3. 内容区域
html
<style>
/* 设置内边距 */
.news .bd {
padding: 5px;
}
/* 将橙色方块载入li作为li的背景图,设置不重复,设置位置,给li设置左内边距,使后面添加的图片和文字向右移动 */
.news .bd li {
padding-left: 15px;
background-image: url(./images/square.png);
background-repeat: no-repeat;
background-position: 0 center;
}
/* 将图片图标载入a作为a的背景图,设置不重复和位置,设置左内边距,使文字向右移动,设置文字的大小颜色和行高 */
.news .bd li a {
padding-left: 20px;
background: url(./images/img.gif) no-repeat 0 center;
font-size: 12px;
color: #666;
line-height: 24px;
}
/* 设置鼠标悬停的效果和悬停时文字的颜色 */
.news .bd li a:hover {
color: #ff8400;
}
</style>
<div class="bd">
<ul>
<li><a href="#">点赞"新农人" 温暖的伸手</a></li>
<li><a href="#">在希望的田野上...</a></li>
<li><a href="#">"中国天眼"又有新发现 已在《自然》杂志发表</a></li>
<li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li>
<li><a href="#">G9"带货"背后:亏损面持续扩大,竞争环境激烈</a></li>
<li><a href="#">多地力推二手房"带押过户",有什么好处?</a></li>
</ul>
</div>