一.盒模型样式

1. 盒模型

  • 盒模型的属性

    width 宽
    height 高
    border 边框
    padding 内边距
    margin 外边距

  • 行元素：都在一行，排不下后默认换行；

  • 块元素：默认占据一行宽度，一行只有它，两边都没有其他元素；
  • currentColor 默认成文本元素
  • backgeound-clip：content-box 把背景限定在内容区；
  • 通过box-sizing来指定内容区的边界在哪里；
  • 在页面内收缩原来的内容区大小，来保证盒子在页面占据的空间不变；
  • 盒模型的四个方向都可以独立设置：四个方向由顺时针方向来表示：上，右，下，左

    四值：上，右，下，左
    三值：上，左右，下
    二值：上下，左右
    单值：四个方向用于

  • padding，margin是透明的，所以只能设置宽度
  • border不是透明的，除了宽度，还能设置样式和前景色
  • border-top 设置上边框
  • border-bottom 设置下边框
    1.1 盒模型样式

  • 输入：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>盒模型</title>
    8. </head>
    9. <body>
    10.   <div class="box"></div>
    11.   <style>
    12.      .box {
    13.       /* 宽 */
    14.       width: 200px;
    15.       /* 高 */
    16.       height: 200px;
    17.       /* 边框大小，虚线，颜色 */
    18.       border: 10px dashed violet;
    19.       /* 盒子背景色 */
    20.       background-color: turquoise;
    21.       /* 内边距 */
    22.       padding: 20px;
    23.       /* 把盒子背景色限制在内容区 */
    24.       background-clip: content-box;
    26.       /* 收缩原来内容区大小 */
    27.       box-sizing: border-box;
    28.     }
    29.   </style>
    30. </body>
    31. </html>
  • 输出：
1.2 盒模型独立设置（四边）
  • 输入：
    1. .box {
    2.       padding: 10px 15px 20px 25px;
    3.       /* 设置上边框 */
    4.       border-top: 20px dashed violet;
    5.       /* 设置下边框 */
    6.       border-bottom: 10px solid violet;
    7.     }
  • 输出：

二.伪类选择器与参数计算

1.伪类选择器

  • 伪类：伪是形容类的，类是class指定它的权益；
  • nth-of-type（）匹配元素，在匹配之前会先根据元素进行分组再匹配，（）里面是选中的元素；

    比如：nth-of-type（1）就是选中第一个元素；

  • first-of-type是选中所有元素中的第一个元素；
  • last-of-type是选中所有元素中的最后一个元素；
  • not（）是去掉所有选中元素中的某些元素；
  • nth-last-of-type（）是倒数选择器，（）里面的内容代表选中倒数那个内容；

原样式

  • 代码：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>伪类选择</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.     <li>demo1</li>
    12.     <li>demo2</li>
    13.     <li>demo3</li>
    14.     <li>
    15.       demo4
    16.       <ul>
    17.         <li>demo4-1</li>
    18.         <li>demo4-2</li>
    19.         <li>demo4-3</li>
    20.       </ul>
    21.     </li>
    22.     <li>demo5</li>
    23.     <li>demo6</li>
    24.     <li>demo7</li>
    25.     <li>demo8</li>
    26.     <p>item1</p>
    27.     <p>item2</p>
    28.     <p>item3</p>
    29.   </ul>
    30. </body>
    31. </html>

  • 样式：

1.1 选中所有子元素中的第三个元素，不包括后代元素
  • 输入：
    1. <style>
    2.     .list > :nth-of-type(3) {
    3.       background-color: cornflowerblue;
    4.     }
    5. </style>
  • 输出：
1.2 选中li元素中的第一个子元素
  • 输入：
    1. <style>
    2.     .list > li:nth-of-type(1) {
    3.       background-color: cyan;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > li:first-of-type {
    3.       background-color: cyan;
    4.     }
    5.   </style>
  • 输出：
1.3 选中li中最后一个元素
  • 输入：
    1. <style>
    2.     .list > li:nth-of-type(8){
    3.         background-color: violet;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > li:last-of-type {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 输出：
1.4 选中li中倒数第二个元素
  • 输入：
    1. <style>
    2.     .list > li:nth-last-of-type(2) {
    3.       background-color: darkorange;
    4.     }
    5.   </style>
  • 输出：

2.伪类选择器参数

  • nth-of-type() （）括号里面是代表参数；
  • 参数 = an+b a：是系数 n:是计数器 b：是偏移量；
  • 1乘以任何数都等于任何数，所有不用写
  • 获取指定参数就直接（b）；
  • 获取指定数的后几个就直接（n + b）
  • 获取指定数的前几个就直接（-n + b）
  • 获取全部偶数直接（even/2n） even代表偶数
  • 获取全部奇数直接（odd/2n+1） odd代表奇数

原样式

  • 输入：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>伪类选择器参数</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.     <li>demo1</li>
    12.     <li>demo2</li>
    13.     <li>demo3</li>
    14.     <li>demo4</li>
    15.     <li>demo5</li>
    16.     <li>demo6</li>
    17.     <li>demo7</li>
    18.     <li>demo8</li>
    19.   </ul>
    20. </body>
    21. </html>
  • 输出：
2.1 从第三个开始选中后面所有元素
  • 输入:
    1. <style>
    2. .list > :nth-of-type(n + 3) {
    3. background-color: cyan;
    4.     }
    5. </style>
  • 输出：
2.2 选中前三个元素
  • 输入：
    1. <style>
    2.     .list > :nth-of-type(-n + 3) {
    3.       background-color: chartreuse;
    4.     }
    5.   </style>
  • 输出：
2.3 选中后三个元素
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(-n + 3) {
    3.       background-color: chartreuse;
    4.     }
    5.   </style>
  • 输出：
2.4 选中所有偶数
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(even) {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > :nth-last-of-type(2n) {
    3.       background-color: violet;
    4.     }
    5.   </style>
  • 输出：
2.5 选中所有奇数
  • 输入：
    1. <style>
    2.     .list > :nth-last-of-type(odd) {
    3.       background-color: yellow;
    4.     }
    5.   </style>
  • 或
    1. <style>
    2.     .list > :nth-last-of-type(2n+1) {
    3.       background-color: yellow;
    4.     }
    5.   </style>
  • 输出：

三.媒体查询

1. 常用单位

常用单位有：px，em，rem，vh,vw

  • 绝对单位：px，是像素，与设备有关，一英寸有96px

  • 相对单位：

    1.em，rem，与字号相关 font-size
    2.vh,vw,与视口相关（可视窗口大小）

  • 单位关系：

    1em=16px 1rem=10px

  • em永远和当前或者父级的font-size大小绑定

  • rem 可以用来引用html中的font-size

  • vw,vh：是将可视窗口看成100份，每一份就是一个vw,vh；

2.媒体查询

  • opacity 设置透明度
  • transittion 让效果呈现慢一点
  • 只要动态的改变rem的大小，也相当于改变html中font-size大小，就可以动态调整按钮大小

    2.1 实例看单位的运用

    原样式
  • 输入：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>媒体查询</title>
    8. </head>
    9. <body>
    10.   <button class="btn small">按钮1</button>
    11.   <button class="btn middle">按钮2</button>
    12.   <button class="btn large">按钮3</button>
    13. </body>
    14. </html>
  • 输出：
2.1.1 设置按钮样式和效果
  • 输入：
    1. <style>
    2.     .btn {
    3.       background-color: cornflowerblue;
    4.       color: white;
    5.       border: none;
    6.       outline: none;
    7.     }
    8.     .btn:hover {
    9.       cursor: pointer;
    10.       opacity: 0.9;
    11.       transition: 0.6s;
    12.     }
    13.   </style>
  • 输出：
2.1.2 从移动端小屏幕开始
  • 输入：
    1. <style>
    2.       html {
    3.           font-size: 10px;
    4.       }
    5.     .btn {
    6.       background-color: cornflowerblue;
    7.       color: white;
    8.       border: none;
    9.       outline: none;
    10.     }
    11.     .btn:hover {
    12.       cursor: pointer;
    13.       opacity: 0.9;
    14.       transition: 0.6s;
    15.     }
    16.     .btn.small {
    17.       font-size: 1.2rem;
    18.       padding: 0.4rem 0.8rem;
    19.     }
    20.     .btn.middle {
    21.       font-size: 1.4rem;
    22.       padding: 0.4rem 0.8rem;
    23.     }
    24.     .btn.large {
    25.       font-size: 1.6rem;
    26.       padding: 0.4rem 0.8rem;
    27.     }
    28.     @media (min-width: 480px) {
    29.       html {
    30.         font-size: 10px;
    31.       }
    32.       @media (min-width: 640px) {
    33.       html {
    34.         font-size: 14px;
    35.       }
    36.       @media (min-width: 720px) {
    37.       html {
    38.         font-size: 16px;
    39.       }
    40.   </style>
  • 输出：
2.1.3 pc端，从大屏到小屏
  • 输入：
    1. <style>
    2.     html {
    3.       font-size: 10px;
    4.     }
    5.     .btn {
    6.       background-color: cornflowerblue;
    7.       color: white;
    8.       border: none;
    9.       outline: none;
    10.     }
    11.     .btn:hover {
    12.       cursor: pointer;
    13.       opacity: 0.9;
    14.       transition: 0.6s;
    15.     }
    16.     .btn.small {
    17.       font-size: 1.2rem;
    18.       padding: 0.4rem 0.8rem;
    19.     }
    20.     .btn.middle {
    21.       font-size: 1.4rem;
    22.       padding: 0.4rem 0.8rem;
    23.     }
    24.     .btn.large {
    25.       font-size: 1.6rem;
    26.       padding: 0.4rem 0.8rem;
    27.     }
    28.     @media (max-width: 720px) {
    29.       html {
    30.         font-size: 16px;
    31.       }
    32.     }
    33.     @media (max-width: 640px) {
    34.       html {
    35.         font-size: 14px;
    36.       }
    37.     }
    38.     @media (max-width: 480px) {
    39.       html {
    40.         font-size: 10px;
    41.       }
    42.     }
    43.     @media (min-width: 720px) {
    44.       html {
    45.         font-size: 16px;
    46.       }
    47.     }
    48.     @media (min-width: 480px) and (max-width: 640px) {
    49.       body {
    50.         background-color: cyan;
    51.       }
    52.     }
    53.   </style>
  • 输出：

更多相关文章

  1. 做SEO时，需要了解哪些HTML标签 ？
  2. CSS 元素样式来源
  3. CSS 常用伪类简介
  4. CSS 盒子模型理解
  5. html表单、元素的来源及csss外部样式和上下文选择器
  6. 学习基本元素布局视窗
  7. 初识HTML元素——列表
  8. 初识HTML元素——表格
  9. php判断数组元素不为空格实例代码

随机推荐

  1. Android 操作SQLite数据库之一
  2. Android沉浸式标题栏状态栏字体颜色修改（
  3. Android Canvas绘图详解（图文）
  4. Android(安卓)事件分发机制
  5. Android深入理解WebView——上
  6. 一个现代化的JSON库Moshi针对Android和Ja
  7. Android Selector
  8. Android事件分发机制完全解析，带你从源码
  9. Android NDK初识
  10. android中自己画一个按钮，和自己设置一个