【前端】快速掌握CSS-盒子模型

文章目录

  • 一、选择器
    • 1. 结构伪类选择器
      • 基本使用
      • :nth-child(公式)
    • 2. 伪元素选择器
  • 二、PxCook
  • 三、盒子模型
    • 1. 盒子模型-组成
    • 2. 边框线
      • (1) 四个方向相同
      • (2) 单方向边框线
    • 2. 内边距
    • 3. 尺寸计算
    • 4. 外边距
    • 5. 版心居中
    • 6. 清除默认样式
    • 7. 元素溢出
    • 8. 外边距问题
      • (1) 合并现象
      • (2) 外边距塌陷
    • 9. 行内元素 – 内外边距问题
    • 10. 圆角
    • 11. 盒子阴影(拓展)
  • 四、综合案例-产品卡片
    • 1. HTML标签
    • 2. CSS样式
  • 五、综合案例二 – 新闻列表
    • 1. 整体布局
    • 2. 标题区域
    • 3. 内容区域

一、选择器

1. 结构伪类选择器

基本使用

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

选择器 说明
E:first-child 查找第一个E元素
E:last-child 查找最后一个E元素
E:nth-child(N) 查找第N个E元素(第一个元素N为1)
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. 伪元素选择器

作用:创建虚拟元素(伪元素),用来摆放装饰性的内容

【前端】快速掌握CSS-盒子模型_第1张图片

选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
div::before {
  content: "before 伪元素";
}
div::after {
  content: "after 伪元素";
}

注意:

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

 

二、PxCook

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

  • 开发面板(自动智能识别)
  • 设计面板(手动测量尺寸和颜色,使用工具栏的尺子工具进行测量,使用工具栏的吸管工具查看颜色)

使用方法:创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击右上角按钮【添加】,导入设计稿(或者直接将PSD文件拖入)

右上角加减号缩放大小;按住键盘空格,当鼠标变成手的形状时,滑动鼠标可将设计稿上下移动
【前端】快速掌握CSS-盒子模型_第2张图片
 

三、盒子模型

作用:布局网页,摆放盒子和内容

1. 盒子模型-组成

  • 内容区域 – width & height(在这里的内容会紧贴左上角)
  • 内边距 – padding(出现在内容与盒子边缘之间,会撑大这个盒子,后面会学如何取消)
  • 边框线 – border
  • 外边距 – margin(出现在盒子外面)

可以在样式中选中元素进行查看,也可以点击计算样式,直接查看整个盒子的可视图

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

【前端】快速掌握CSS-盒子模型_第3张图片
【前端】快速掌握CSS-盒子模型_第4张图片

2. 边框线

(1) 四个方向相同

属性名:border(bd)

属性值:边框线粗细(px) 线条样式 颜色(不区分顺序)

属性值 线条样式
solid 实线
dashed 虚线
dotted 点线
div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

(2) 单方向边框线

作用:实际运用中盒子的每个方向边框线可能不同,可以设置单方向边框线

属性名:border-方位名词(bd+方位名词首字母,例如,bdl)

属性值:边框线粗细 线条样式 颜色(不区分顺序)

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 会撑大盒子
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. 尺寸计算

【前端】快速掌握CSS-盒子模型_第5张图片

默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论:给盒子加 border / padding 会撑大盒子

解决:

  • 手动做减法,减掉 border / padding 的尺寸
  • 內减模式:添加属性box-sizing: border-box

4. 外边距

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

属性名:margin

提示:与 padding 属性值写法、含义相同(比如单独方向、多值写法),但外边距不会撑大盒子

5. 版心居中

【前端】快速掌握CSS-盒子模型_第6张图片

所有板块在网页中都是左右居中的,将左右 margin 值 为auto(盒子要有宽度)

使用版心居中的效果时盒子必须有宽度值,否则无法实现效果

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

6. 清除默认样式

【前端】快速掌握CSS-盒子模型_第7张图片

清除标签默认的样式,比如默认的内外边距,使用通配符或者将所有有默认样式的标签逗号隔开(小程序写不能用*)

【前端】快速掌握CSS-盒子模型_第8张图片

/* 清除默认内外边距,可以在这里直接添加上内减模式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号,将这一项写在通配符中也可以 */
li {
  list-style: none;
}

7. 元素溢出

作用:控制溢出元素的内容的显示方式(如盒子范围小内容多)

属性名:overflow

属性值 效果
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出都显示滚动条位置,垂直和水平都有)
auto 溢出滚动(溢出才显示滚动条位置)
div {
  width: 1000px;
  height: 200px;
  background-color: pink;
  overflow: hidden;
}

8. 外边距问题

(1) 合并现象

场景:垂直排列的兄弟元素,上下 margin合并

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

【前端】快速掌握CSS-盒子模型_第9张图片

/* 合并后外边距变为50px */
.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

(2) 外边距塌陷

场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题

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

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

【前端】快速掌握CSS-盒子模型_第10张图片

解决方法:

  • 取消子级margin,父级设置padding,给父级加内边距,直接规避塌陷问题,推荐使用
  • 父级设置属性 overflow: hidden
  • 父级设置 border-top,但border会撑大盒子

9. 行内元素 – 内外边距问题

场景:行内元素添加 margin 和 padding,无法改变元素垂直位置,只能改变左右位置

解决方法:给行内元素添加 line-height 可以改变垂直位置(行内元素垂直位置受行高控制)

span {
  /* margin 和 padding 属性,无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

10. 圆角

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

属性名:border-radius

属性值:数字+px / 百分比,指圆角半径

【前端】快速掌握CSS-盒子模型_第11张图片

  • 多值写法

从左上角开始顺时针赋值,当前角没有数值则与对角取值相同

取值个数 示例 含义
一个值 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%
img {
  width: 200px;
  height: 200px;
  /* 写100px或者50%,百分比取值越小越不圆,但增大无效果,即圆角最大是50% */
  border-radius: 100px;
  border-radius: 50%;
}

【前端】快速掌握CSS-盒子模型_第12张图片

  • 胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

【前端】快速掌握CSS-盒子模型_第13张图片

11. 盒子阴影(拓展)

作用:给元素设置阴影效果(一个盒子的外面有阴影的感觉)

属性名:box-shadow

属性值:X 轴偏移量 Y 轴偏移量 模糊半径(越模糊越柔和) 扩散半径(阴影大小) 颜色 内外阴影

注意:

  • X 轴偏移量 和 Y 轴偏移量必须书写
  • 默认是外阴影,内阴影需要添加 inset
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

 

四、综合案例-产品卡片

【前端】快速掌握CSS-盒子模型_第14张图片

为了使网页在浏览器中加载的速度更快,注意CSS书写顺序如下:

  1. 盒子模型属性
  2. 文字样式
  3. 圆角、阴影等修饰属性

1. HTML标签

<div class="product">
  <img src="./images/liveSDK.svg" alt="">
  <h4>抖音直播SDKh4>
  <p>包含抖音直播看播功能p>
div>

2. CSS样式

<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>

 

五、综合案例二 – 新闻列表

【前端】快速掌握CSS-盒子模型_第15张图片

1. 整体布局

将整体内容分区域

<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. 标题区域

<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. 内容区域

<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>

你可能感兴趣的:(前端,前端,css,笔记,经验分享,css3)