2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)

CSS布局-盒子模型-Day05 学习笔记打卡

  • CSS布局
    • CSS三大特征
      • 继承性
      • (拓展)继承的应用
      • (拓展)继承失效的特殊情况
      • 层叠性
      • 优先级
      • 权重叠加计算
    • PxCook的基本使用
    • 盒子模型
      • 盒子模型的介绍
      • 内容的宽度和高度
      • 边框(border)
        • 边框-单个属性
        • 边框-连写
        • 边框-方向设置
      • 盒子实际大小初级计算公式
      • 内边距( padding )
        • 内边距(padding)- 取值
        • 内边距(padding)- 单方向设置
        • 盒子实际大小终极计算公式
      • (拓展)不会撑大盒子的特殊情况
      • CSS3盒模型(自动内减)
      • 外边距(margin)
        • 外边距(margin)- 取值
        • 外边距(margin) - 单方向设置
        • margin单方向设置的应用
    • 综合案例

学习视频B站:黑马程序员-前端学习(第一阶段)

CSS布局

CSS三大特征

继承性

特性: 子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
注意点:
• 可以通过调试工具判断样式是否可以继承
2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)_第1张图片

(拓展)继承的应用

好处: 可以在一定程度上减少代码
常见应用场景:
1. 可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小

(拓展)继承失效的特殊情况

如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了

层叠性

特性:
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点:
1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

优先级

特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
1. !important写在属性值的后面,分号的前面!
2. !important不能提升继承的优先级,只要是继承优先级最低!
3. 实际开发中不建议使用 !important 。

权重叠加计算

场景: 如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式: (每一级之间不存在进位)
2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)_第2张图片
代码示例:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    /* #one {
      color: red;
    }

    .son {
      color: blue;
    }

    p {
      color: green;
    } */

    /* (行内, id, 类, 标签) */

    /* (0, 1, 0, 1) */
     div #one {
      color: orange;
    }

    /* (0, 0, 2, 0) */
    .father .son {
      color: skyblue;
    }

    /* 0, 0, 1, 1 */
    .father p {
      color: purple;
    }
    
    /* 0, 0, 0, 2 */
    div p {
      color: pink;
    } 
    
  style>
head>
<body>
  <div class="father">
    <p class="son" id="one">我是一个标签p>
  div>
body>
html>

比较规则:
1. 先比较第一级数字,如果比较出来了,之后的统统不看
2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3. ……
4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点:!important如果不是继承,则权重最高,天下第一!

PxCook的基本使用

  1. 通过软件打开设计图
    ① 打开软件 ② 拖拽入设计图 ③ 新建项目
  2. 常用快捷键
    1. 放大设计图:ctrl + +
    2. 缩小设计图:ctrl + -
  3. 移动设计图:空格按住不放,鼠标拖动
  4. 常用工具
    1. 量尺寸
    2. 吸颜色
  5. 从psd文件中直接获取数据
    1. 切换到开发界面,直接点击获取数据

盒子模型

盒子模型的介绍

盒子的概念
1. 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
2. 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
盒子模型
CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(
margin)构成,这就是 盒子模型
记忆: 可以联想现实中的包装盒
2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)_第3张图片

内容的宽度和高度

作用: 利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性: width / height
常见取值: 数字+px
2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)_第4张图片

边框(border)

边框-单个属性

作用: 给设置边框粗细、边框样式、边框颜色效果

作用 属性名 属性值
边框粗细 border-width 数字+px
边框样式 border-style 实线 solid、虚线 dashed、点线 dotted
边框颜色 border-color 颜色取值
边框-连写

属性名: border
属性值: 单个取值的连写,取值之间以空格隔开
• 如:border : 10px solid red;
快捷键: bd + tab

边框-方向设置

场景: 只给盒子的某个方向单独设置边框
属性名: border - 方位名词
属性值: 连写的取值

盒子实际大小初级计算公式

盒子实际大小初级计算公式:
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框

内边距( padding )

内边距(padding)- 取值

作用: 设置 边框 与 内容区域 之间的距离
属性名: padding
取值:

取值 示例 含义
一个值 padding:10px 上右下左 设置为10px
两个值 padding:10px 20px 上下 设置为10px、左右设置为20px
三个值 padding:10px 20px 30px 设置为10px、右左设置为20px、设置为30px
四个值 padding:10px 20px 30px 40px 设置为10px、设置为20px、设置为30px、设置为40px

记忆规则: 从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!

内边距(padding)- 单方向设置

场景: 只给盒子的某个方向单独设置内边距
属性名: padding - 方位名词
属性值: 数字 + px

盒子实际大小终极计算公式

盒子实际大小终极计算公式:
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

(拓展)不会撑大盒子的特殊情况

不会撑大盒子的特殊情况(块级元素)
1. 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子

CSS3盒模型(自动内减)

操作: 给盒子设置属性 box-sizing : border-box ; 即可
优点: 浏览器会自动计算多余大小,自动在内容中减去

外边距(margin)

外边距(margin)- 取值

作用: 设置边框以外,盒子与盒子之间的距离
属性名: margin
常见取值:

取值 示例 含义
一个值 margin:10px 上右下左 设置为10px
两个值 margin:10px 20px 上下 设置为10px、左右设置为20px
三个值 margin:10px 20px 30px 设置为10px、右左设置为20px、设置为30px
四个值 margin:10px 20px 30px 40px 设置为10px、设置为20px、设置为30px、设置为40px

记忆规则: 从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!

外边距(margin) - 单方向设置

场景: 只给盒子的某个方向单独设置外边距
属性名: margin - 方位名词
属性值: 数字 + px

margin单方向设置的应用
方向 属性 效果
水平方向 margin-left 让当前盒子往右移动
水平方向 margin-right 让右边的盒子往右移动
水平方向 margin-top 让当前盒子往下移动
水平方向 margin-bottom 让当下面子往下移动

综合案例

综合案例1

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    /* 清除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* 不设置宽度,块级元素默认会占满一行 */
      height: 40px;
      /* background-color: skyblue; */
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
    }

    .box a {
      /* 转换行内块 */
      display: inline-block;
      width: 80px;
      height: 40px;
      /* background-color: pink; */
      color: #4c4c4c;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
      font-size: 12px;
    }

    .box a:hover {
      background-color: #edeef0;
      color: #ff8400;
    }
  style>
head>
<body>
  <div class="box">
    <a href="#">新浪导航a><a href="#">新浪导航a><a href="#">新浪导航a><a href="#">新浪导航a>
  div>
body>
html>

2022黑马程序员-前端学习第一阶段(Day05-CSS布局-盒子模型)_第5张图片

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    /* 清除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0; 
    }

    body {
      /* 去除行高带来的默认间隙,完成精准布局 */
      line-height: 1;
    }

    .box {
      width: 500px;
      height: 400px;
      /* background-color: pink; */
      border: 1px solid #ccc;
      padding: 41px 30px 0;
      /* 自动内减 */
      box-sizing: border-box;
    }

    .box h2 {
      height: 41px;
      /* background-color: pink; */
      border-bottom: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      font-size: 30px;
    }

    .box ul {
      list-style: none;
    }

    .box ul li {
      height: 50px;
      padding-left: 30px;
      border-bottom: 1px dashed #ccc;
      line-height: 50px;
    }

    .box li a {
      text-decoration: none;
      font-size: 18px;
      color: #666;
    }

  style>
head>
<body>
  <div class="box">
    <h2>最新文章/New Articlesh2>
    <ul>
      <li><a href="#">北京招聘网页设计,平面设计,phpa>li>
      <li><a href="#">体验javascript的魅力a>li>
      <li><a href="#">jquery世界来临a>li>
      <li><a href="#">网页设计师的梦想a>li>
      <li><a href="#">jquery中的链式编程是什么a>li>
    ul>
  div>
body>
html>

你可能感兴趣的:(黑马程序员,前端学习,css,前端,css3)