CSS基础整理

Hypnotize
2,400 阅读27分钟

前言

  • 本篇中讲述了：
    1. css的引入方式
    2. css的常用单位
    3. css的语法
    4. css的样式
    5. 选择器
    6. css的三大特性
    7. 盒模型
    8. 浮动
    9. 定位
    10. flex弹性布局
    11. 基线对齐
    12. 字体图标
    13. BFC块级格式上下文
    14. 其他问题
  • 如果有任何问题都可以留言给我，我看到了就会回复，如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新，已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！
  • 欢迎转载，注明出处即可。

CSS是什么？

  • Cascading Style Sheets【层叠样式表】
  • 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。主要用来设计网页的样式，美化网页，静态或动态的修饰页面元素的样式

CSS的引入方式

【行内样式】

  • 优先级最高，可以覆盖同意元素的其他引入的样式
  • 作为标签的属性存在
  • 代码量大，分离度较低，维护困难，冗余度高

【内嵌】

  • 写在本HTML当中的head中的style标签当中
  • 读取速度相较于两种导入比较快，同步的

【外链导入】

  • 外部单独创建一个css样式表，通过link标签引入
  • 异步加载的，而且是等到同步任务完成后，再去渲染加载回来的外链样式文件

【导入式】

  • 在style标签内 使用@import 文件路径来引入
  • 还可在外联样式表.css文件中在引入样式表，不过需要放在整个代码的最上面，不然会被后来的重复样式覆盖

CSS的常用单位

绝对长度单位

  • px 像素

相对长度单位

  • em
    • 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小
  • rem 根元素【html】的字体大小
    • 多用于移动端适配
  • vw 视窗宽度的1%
  • vh 视窗高度的1%

视口

作用

  • 在页面结构中，元数据部分有一条viewport，这一条就是为了在移动端浏览页面的时候，页面能够跟随设备的缩小而缩小。
    <!-- 使页面的宽度=设备屏幕的宽度 -->
    <!-- 初始缩放值为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

属性

  • width=device-width 页面宽度等于设备宽度
  • user-scalable=no 禁止缩放
  • initial-scale=1.0 初始缩放值为1.0
  • maximum-scale=1.0 最大缩放值为1.0
  • minimum-scale=1.0 最小缩放值为1.0

CSS的语法

元素的划分

  • 块级元素
    • 写宽高可以起作用
    • 独占一行
      • 【此特点决定了】 排列方式：上下排列
  • 行内元素
    • 写宽高不起作用，其大小由其内部内容撑开并决定。
    • 共占一行
      • 【此特点决定了】 排列方式：左右排列
    • 【特殊行内元素】 行内块元素
      • 写宽高可以起作用
      • 共占一行
      • 排列方式：左右
    • 【判断方式】
      • 与行内元素放在一起，若测试的元素没有和行内元素共占一行，则一定是块级元素
      • 若在一行，则通过改变测试元素宽高，来判断是【不变：行内元素】 还是 【变了：行内块元素】
  • 元素标签的总结
    • 行内元素：
      • span、a、b、strong、i、em、s、del、u、ins
    • 块级元素：
      • div、h1 - h6、p、ul、li、ol、dl、dt、dd
    • 行内块：
      • img、video、audio

元素特性的转换display

  1. 转换为块级元素
    • display:block
    • 【特性】
      1. 不设置宽度就会充满其父元素
      2. 不设置高度，就由内容能撑开多少决定
  2. 转换为行内元素【基本不使用】
    • display:inline
  3. 转换为行内块元素
    • display:inline-block
  4. 隐藏该元素
    1. display:none
      • 【彻底消失，不占位置】
    2. visibility:hidden 【可视程度】
      • 【元素还在，占着位置，只不过看不见】
    3. opacity:% 【透明度】
      • 【元素还在，占着位置，只不过看不见】
    4. z-index 【定位的元素可以以此控制层级】
      • margin【控制无内容容器离开视口（无内容适用）】
      • 宽高【减为0（无内容适用）】

CSS样式

清除默认样式

  • 清除全局元素的margin和padding
        <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
  • 清除列表的默认样式
        <style>
        ul,li{
            list-style:none;
        }
    </style>
  • 清除a标签的默认样式
        <style>
        a{
            <!-- 删除下划线 -->
            text-decoration:none;
            <!-- 修改字体大小 -->
            font-size:100px;
            <!-- 清除默认字体颜色 -->
            color:#333;
        }
    </style>

常用样式

  • 宽高
            <style>
            *{
                height:100px;
                width:100px;
            }
        </style>
  • 背景颜色
            <style>
            *{
                background-color:#fff;
                /*  复合样式 */
                background:#fff;
                /* 背景图片 */
                background:url("路径");
            }
        </style>

文字

  • 字体font-family
    • 可设置多种字体，用逗号间隔，如果没有字库就顺延使用，都没有就使用默认
    • 字体名若由多个单词组成，则用引号括住 
          <style>
        *{
            font-family:"微软雅黑";
        }
    </style>
  • 字号font-size
    • 可以先总体设置大部分字字号，然后再去单独设置不同字号的字 
         <style>
       *{
           font-size:16px;
       }
   </style>
  • 颜色color
    • 设置字体颜色 
              <style>
            *{
                color:black;
            }
        </style>
  • 粗细font-weight
    • 400->normal
    • 700->bold
    • 900->bolder 
          <style>
        *{
            /* 正常 */
            font-weight:400;
            font-weight:normal;
            /* 加粗 */
            font-weight:700;
            font-weight:bold;
            /* 更粗 */
            font-weight:900;
            font-weight:bolder;
        }
    </style>
  • 倾斜&正常font-style
    • 倾斜 italic
    • 正常 normal 
          <style>
            *{
            font-style:italic;
            font-style:normal;
            }
    </style>
  • 块级元素快速水平居中
    • margin:0 auto; 
          <style>
            div{
            margin:0 auto;
            }
    </style>
  • 行高line-height
    • 三部分组成：上间距，元素，下间距
      • 上下间距是相等的,元素处于中间
          <style>
            div{
            line-height:100px;
            }
    </style>
  • 高度height
    • 高度就是容器的高度
    • 配合行高可以实现元素的垂直居中
      • 让行高等于容器的高度
          <style>
            div{
            height:100px;
            }
    </style>
  • 文字对齐text-align
    • left，center，right居左，居中，居右
    • 不管是对什么元素使用，都是对其中的文字元素起作用 
          <style>
            p{
            text-align:center;
            }
  • 首行缩进
    • 会对文本块中首行文本的缩进。 
              <style>
            p{
                <!-- 首行缩进，em单位自动适应 -->
                text-indent:2em;
            }
        </style>
        <body>
            <p>
                这是一段文字
            </p>
  • 使用案例
            <style>
            body{
                <!-- 可设置多种字体，用逗号间隔，如果没有字库就顺延使用，都没有就使用默认 -->
                font-family:"Times New Roman",Times,serif;
                font-family:"宋体","楷书","微软雅黑";

                font-size:10px;

                //正常
                //font-weight:400px;
                font-weight:normal;
                //加粗
                //font-weight:700px;
                font-weight:bold;
                //更粗
                //font-weight:900px;
                font-weight:bolder;

                //倾斜&恢复正常
                font-style:italic;font-style:normal;
                color:#eee;
            }
            div{
                <!-- 快速水平居中 -->
                margin:0 auto;

            }
            #jvzhong{
                height:300px;
                line-height:300px;

            }
            p{
                line-height:10px;
                text-align:center;
                // text-align:left;
                // text-align:right;
            }
        </style>
        <body>

            <p>
                这是一段文字
            </p>
            <div>块元素水平居中</div>
            <div id="jvzhong">
                <p>
                    垂直居中
                </p>
            </div>

            
        </body>

边框border

  • border:宽度 样式 颜色;
    • 还可以单独控制
      • border-width【单独控制宽度】
      • border-left-width【单独控制每条边宽度】
      • border-style 【单独控制样式】
        • solid 实线
        • dashed 虚线
      • border-color 【单独控制颜色】
        <style>
            div{    
                border:2px solid black;
                border-width:10px;
                border-left-width:10px;
                border-style:dotted;
                border-color:pink;
            }
        </style>

overflow

  • 定义
    • 当内容溢出元素框时发生的事情
  • overflow:hidden
    • 内容超出后隐藏 
          <style>
            .text{
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>我是文本段我是文本段我是文本段</p>
            </div>
        </div>
    <body>
  • overflow:auto
    • 设置内容超出后自动出现滚动条，如果没超出，就不会出现滚动条
  • overflow:scroll
    • overflow:scroll 控制水平和垂直的滚动条 
          <style>
            .text{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>我是文本段我是文本段我是文本段</p>
            </div>
        </div>
    <body>
    • overflow-y:scroll 控制垂直方向上的滚动条 
          <style>
        .text{
            width: 200px;    
            height: 200px;    
            /* 垂直方向滚动条 */
            overflow-y: scroll;           
            }
    </style>    
    <body>    
        <div class="text">   
            <div style="width:100px;">   
                <p>我是文本段我是文本段我是文本段</p>   
            </div>    
        </div>
    <body>
    • overflow-x:scroll 控制水平方向上的滚动条 
          <style>
            .text{
            width: 200px;
            height: 200px;
            /* 水平方向滚动条 */
            overflow-x: scroll;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>我是文本段我是文本段我是文本段</p>
            </div>
        </div>
    <body>

background

  • background-color 背景颜色
    • 用法
      • background-color:颜色;
    • 样式值
      • 颜色名称
            <style>
        div{
            background-color:pink;
        }
    </style>
      • 颜色十六进制值
                <style>
            div{

                /* background-color:#9e9e9e; */
                /* 如果六个值都相同可以简写为三个 */
                /* background-color:#333333; */
                background-color:#333;
            }
        </style>
      • rgba值
                <style>
            div{
                /* 前三个是色值，最后一个代表透明度 */
                background-color:rgb(128,148,128,0.8);
            }
        </style>
  • background-image 背景图片
    • 用法 background-image:url("路径");
        <style>
        .main{
            background-image:url("路径");
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
  • background-size 背景图片大小
    • 用法
      • background-size:宽 高;
    • 样式值
      1. background-size:第一个值px 第二个值px 像素值
            <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("路径");
            background-size:50px 50px;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
      2. background-size:第一个值% 第二个值% 父元素的百分比
            <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("路径");
            background-size:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
      3. background-size:contain
        • 背景图在缩放的过程中，只要任一边著碰到父元素的宽或高，就不再继续缩放
            <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("路径");
            /* background-size:contain; */
            /* 背景图在缩放的过程中，只要任一边著碰到父元素的宽或高，就不再继续缩放 */
            background-size:contain;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
      4. background-size:cover
        • 背景图在缩放的过程中，必须同时充满父元素的宽和高，但如果图片比例和盒子的比例不一致，就会造成部分图片显示不全
            <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("路径");
            /* background-size:cover; */
            /* 背景图在缩放的过程中，必须同时充满父元素的宽和高，
            但如果图片比例和盒子的比例不一致，就会造成部分图片显示不全 */
            background-size:cover;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
  • background-position：背景图片的位置
    • 用法
      • background-position:水平方向 垂直方向;
    • 水平方向【第一个值】
      • left 左侧
      • center 中间
      • right 右侧
      • background-position:第一个值px 第二个值px 像素值
      • background-position:第一个值% 第二个值% 父元素的百分比
    • 垂直方向【第二个值】
      • top 顶部
      • center 中间
      • bottom 底部
      • background-position:第一个值px 第二个值px 像素
      • background-position:第一个值% 第二个值% 父元素的百分比
          <style>
        .main{
            background-image:url("路径");
            /* 像素值 */
            /* background-position:100px 100px; */
            /* 语义化 */
            /* background-position:center center; */
            /* 百分比 */
            background-position:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
  • background-repeat 控制图片平铺
    • no-repeat：不平铺
    • repeat-x ：沿着水平方向平铺
    • repeat-y ：沿着垂直方向平铺 
          <style>
        .main{
            background-image:url("路径");
            background-repeat:no-repeat;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
  • background-attachment 控制背景是否跟着滚动条滚动
    • 设置背景图像是否 固定 或者 随着页面的其余部分滚动
    • fixed ：背景图像始终固定，不随滚动条滚动而滚动
    • scorll ：背景图像随滚动条滚动而滚动 
          <style>
        .main{
            background-image:url("路径");
            /* 像素值 */
            /* background-position:100px 100px; */
            /* 语义化 */
            /* background-position:center center; */
            /* 百分比 */
            background-position:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
  • background 复合属性
    • 用法 background:颜色 背景图 背景位置/图片尺寸【斜杠紧接着位置，无空格】 是否平铺; 
          <!-- background:颜色 背景图 背景位置/图片尺寸【斜杠紧接着位置，无空格】 是否平铺; -->
    <style>
        .main{
            /* 粉色 背景图 中间顶部对齐 父元素50%大小 不平铺 */
            background:pink url("路径") center top/50% 50% no-repeat;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>

选择器

权重

  1. 同权重，看执行顺序
  2. 权重不同看权重
  3. 组合选择器权重是按照多个基础的权重相加
    • div>span权重2
    • .class>span权重11
    • div>span,div>span若想选择两个同级的子代，就是这样两个独立的整体使用【权重为4】

通配符选择器 *【所有元素】

  • 权重为 0
  • 范围最广，使用最少，通常用于清除全局默认样式
    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>

标签选择器 【指定的标签】

  • 权重为 1
  • 范围为 选中的一类标签
    <style>
        <!-- 比如这里就是选择页面中所有的ul标签 -->
        ul{
            list-style:none;
        }
    </style>

类选择器 .【指定的类】

  • 权重为 10
  • 范围为 选中class相同的所有标签
  • 同一个标签可以有多个类名，但是中间要用空格隔开
    <style>
        .class{
            margin:0;
            padding:0;
        }
    </style>
    <body>
        <div class='class class1 class2'></div>
    </body>

属性选择器 []【指定的含有某属性的元素】

  • 权重为 10
  • 范围为
    1. 选中所有含有此属性的元素
    2. 选中所有含有此【属性名&属性值】的元素
    3. 选中所有含有此【属性名&属性值中以某个字母开头的】的元素
    4. 选中所有含有此【属性名&属性值中以某个字母结尾的】的元素
    • 在多个类名时，以某个字母开头去匹配的就是第一个类名的开头，以某个字母结尾去匹配的就是最后一个类名的结尾
    1. 选中所有含有此【属性名&属性值中包含某个字母的】的元素
    • 此方法在元素有多个类名时，无法选中该元素
    <style>
        /* 选中所有含有此属性的元素 */
        [index]{
            color:red;

        }
        /* 选中所有含有此【属性名&属性值】的元素 */
        [index=index1]{
            color:blue;
        }
        /* 选中所有含有此【属性名&属性值中以某个字母开头的】的元素 */
        [class^=a]{
            color:green;
        }
        /* 选中所有含有此【属性名&属性值中以某个字母结尾的】的元素 */
        [class$=a]{
            color:orange;
        }
        /* 选中所有含有此【属性名&属性值中包含某个字母的】的元素 */
        [class*=pin]{
            color:pink;
        }
        /* 选中所有含有此【属性名&属性值中包含某个字母的】的元素【】 */
        [class*=a]{
            color:black;
        }
    </style>
    <body>
        <div index='index1'>index1</div>
        <div class='apple'>apple</div>
        <div class='banana'>banana</div>
        <div class='pineapple'>pineapple</div>
        <!-- 在多类名情况时使用属性选择器【首字母或尾字母】 -->
        <!-- ↓↓ -->
        <!-- 第一个类名首字母为o时此条会被选中 -->
        <!-- 最后一个类名尾字母为c时此条会被选中 -->
        <div class='orange a b c'>orange</div>

    </body>

id选择器 #【指定的id】

  • 权重为 100
  • 范围为 选中同一种id的标签
  • id是唯一的，同一个HTML页面中不允许重名
    <style>
        #id{
            color:porple;
        }
    </style>
    <body>
        <div id='id'>id</div>
    </body>

子选择器 >【指定的子代元素】

  • 权重为 没权重，根据不同的基础选择器的搭配不同
  • 范围为 选中符合我们所需父子关系的所有元素
  • > 两边所有基础选择器自选使用
    • div>span权重2
    • .class>span权重11
    • div>span,div>span若想选择两个同级的子代，就是这样两个独立的整体使用
    <style>
        #id>span{
            color:porple;
        }
    </style>
    <body>
        <div id='id' class='class';>
                <span>span</span>
                <p>p</p>
        </div>
    </body>

后代选择器 空格【指定的所有后代元素】

  • 权重为 没权重，根据不同的基础选择器的搭配不同
  • 范围为 选中父元素中所有符合我们所需的所有后代元素【子、孙、曾孙】
  • 空格 两边所有基础选择器自选使用
    <style>
        #id span{
            color:porple;
        }
    </style>
    <body>
        <div id='id' class='class';>
                <span>span1</span>
                <p>p
                <span>span2</span>
                </p>
        </div>
    </body>

分组选择器,

  • 权重为 每个基础元素各自的权重【各是各的不影响】, 以逗号做分割，去计算某个元素权重之和
    • .div1,.div2权重为10【按照.div单独的权重】
    • .main>.box1,.main>box2权重为20【按照.main>.box1单独的权重】
  • 范围为 选择多个我们所需的元素
  • 可以将 公用的样式提取出来，降低代码冗余，精简代码
  • 示例
    <style>
    div,span{
        ....
    }
    .main>.box1,.main>box2{

    }
    </style>

交集选择器 没符号链接

  • 权重为 没权重，选择器组合之和
  • 范围为 选中同时具有多个名字元素
  • 选择器和选择器紧紧相连，如div#id span.span .p.content
    <style>
        div#id{
            color:porple;
        }
        span.span{
            color:porple;
        }
        .p.content{
            color:porple;
        }

    </style>
    <body>
        <div id='id' class='class'>
                <span class='span'>span</span>
                <p class='p content'> p</p>
        </div>
    </body>

相邻兄弟选择器 +

  • 权重为 没权重，选择器组合之和
  • 范围为 选中页面中所有与【某个标签（坐标标签）】相邻的【某个标签（目标标签）】，不向上找
    <style>
        h4+p{
            background-color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'>
                <p> p0</p><!-- 不会被改 -->
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p>
                <p > p3</p>
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p>
                <p > p3</p>
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p>
                <p > p3</p>

        </div>
    </body>

通用兄弟选择器 ~

  • 权重为 没权重，选择器组合之和
  • 范围为 选中页面中所有是【某个标签（坐标标签）】的所有【某种兄弟标签（目标标签）】，不论是否相邻，也不向上找
    <style>
        h4~p{
            background-color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'>
                <p> p0</p><!-- 不会被改 -->
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p><!-- 被改 -->
                <p > p3</p><!-- 被改 -->
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p><!-- 被改 -->
                <p > p3</p><!-- 被改 -->
                <h4 >h4</h4>
                <p > p1</p><!-- 被改 -->
                <p > p2</p><!-- 被改 -->
                <p > p3</p><!-- 被改 -->

        </div>
    </body>

伪类选择器 :

  • 伪元素用于设置元素指定部分的样式
  • a:link a:visited a:hover a:active 常用伪类选择器
    • 是按照特定顺序使用的【爱恨原则lv(love) ha(hate)】a:link a:visited a:hover a:active
    • 权重为 伪类本身10，组合权重相加
    • 范围为我们指定的元素
    <style>
        /* 默认状态 */
        a:link{
            color:red;
        }
        /* 访问过后状态 */
        a:visited{
            color:pink;
        }
        /* 鼠标滑上状态 【重点】 */
        a:hover{
            color:orange;
        }
        /* 点击此链接状态 */
        a:active{
            color:black;
        }
    </style>
    <body>
        <div id='id' class='class'>
            <a href="https://www.baidu.com">百度</a>

        </div>
    </body>
  • :not() 排除选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中所有【除了要排除的元素】之外的元素
    <style>
        div :not(p){
            background-color:porple;
        }
    </style>
    <body>
            
        <div id='id' class='class'><!-- 会被选中 -->
            <p > p1</p><!-- 不会被选中 -->
            <h4 >h4</h4><!-- 会被选中 -->
                <div><!-- 会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>
        </div>
    </body>
  • :only-child ‘独生子’选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中所有【只有一个子元素】的元素
    <style>
        div:only-child{
            background-color:porple;
        }
    </style>
    <body>
        <!-- 不会被选中 -->
        <div id='id' class='class'>
            <p> p1</p>
            <h4 >h4</h4>
                <!-- 会被选中 -->
                <div>
                    <p>p2</p>
                </div>

        </div>
    </body>
  • :nth-child() ‘特定行’选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中【我们指定的元素行的元素】
      • 数字
      • odd 所有奇数行 或 2n+1
      • even 所有偶数行 或 2n
      • ？n 用一些方程、倍数等选中特定行
      • 合并用法
        • 其他选择器:nth-child(第一个) 父元素中的符合第一个选择器又符合行数的那个元素，如果不是那就选不中。
    <style>
        .id :nth-child(3n+1){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><!-- 不会被选中 -->
                <p > p1</p><!-- 不会被选中 -->
                <h4  h4 >h4</h4><!-- 不会被选中 -->
                <div><!-- 不会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>
                <p>p2</p><!-- 会被选中 -->

        </div>
    </body>
  • :first-child() ‘快速选中第一个子元素’选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中【我们指定的元素的第一个子元素】
    <style>
        .id :first-child(){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><!-- 不会被选中 -->
            <p > p1</p><!-- 会被选中 -->
            <h4 >h4</h4><!-- 不会被选中 -->
                <div><!-- 不会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>

        </div>
    </body>
  • :last-child() ‘快速选中最后一个子元素’选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中【我们指定的元素的最后一个子元素】
    <style>
        .id :last-child(){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><!-- 不会被选中 -->
            <p > p1</p><!-- 不会被选中 -->
            <h4 >h4</h4><!-- 不会被选中 -->
                <div><!-- 会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>

        </div>
    </body>
  • :nth-last-child() ‘倒序’选择器
    • 权重为 伪类本身10，组合权重相加
    • 范围为 选中页面中【我们指定的元素的最后一个子元素】
    <style>
        .id :nth-last-child(3){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><!-- 不会被选中 -->
            <p > p1</p><!-- 不会被选中 -->
            <h4 >h4</h4><!-- 不会被选中 -->
                <div><!-- 会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>

        </div>
    </body>
  • :nth-of-type() ‘特定类型’选择器
  • 权重为 伪类本身10，组合权重相加
  • 范围为 选中页面某父元素中【我们指定类型的元素的第几个】
    • 合并用法
      • 其他选择器:nth-last-of-type(第几个) 父元素中的倒序第几个符合类型的那个元素。【first正序】
      • 其他选择器:first-of-type 父元素中的第一个符合类型的那个元素。
      • 其他选择器:last-of-type 父元素中的最后一个符合类型的那个元素。
    <style>
        .id :nth-child(3n+1){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><!-- 不会被选中 -->
                <p > p1</p><!-- 不会被选中 -->
                <h4  h4 >h4</h4><!-- 不会被选中 -->
                <div><!-- 不会被选中 -->
                    <p>p2</p><!-- 不会被选中 -->
                </div>
                <p>p2</p><!-- 会被选中 -->

        </div>
    </body>

CSS的三大特性

继承性

  • 某些元素并没有设置某些属性，但是可以继承他祖先元素的属性

层叠性

  • 对同一个元素同一个属性设置了不同的属性值，css处理这种冲突的能力，就叫做重叠性
  • 【处理方式】
    1. 首先看权重
      • 权重不同，看谁的权重大就听谁的
      • 权重相同，则按照代码执行顺序来定

优先级【权重】

  • 权重等级
    • !important>内联样式>id>类>标签>通配符>继承>浏览器默认
    • 注意 尽量少用！important 和 内联样式【因为优先级太高了，修改的时候不好改动】
  • !important强制使用此样式
        <style>
        div{
            /* !important的优先级最高，所以覆盖了行内【内联】样式 */
            background-color:pink !important;
        }
    </style>
    <body>
        <div style="background-color:black;">
        </div>
    </body>
  • 内联【行内】样式
        <body>
            <!--内联样式优先级比内嵌样式高，所以覆盖了内嵌等权重较低选择器-->
        <div style="background-color:black;">
        </div>
    </body>

盒模型

盒模型的组成部分

  • content：主要内容区域
  • padding：元素盒子与内容直接的内填充
  • border：元素盒子的边框
  • margin：元素与元素之间的距离 盒模型.png

计算盒子的总大小

  • 总盒子的宽度=content的width+ 2*padding+2*border
  • 总盒子的高度=content的height+ 2*padding+2*border

标准盒模型

  • 标准盒模型： box-sizing：content-box；
  • 在标准盒模型中，宽和高指的是content的宽和高 标准盒模型.png

IE盒模型

  • IE盒模型： box-sizing： border-box;
  • 在IE盒模型中，宽和高指的是content+padding+border总盒子的宽和高 IE盒模型.png

常用属性

  • width 宽度
    • max-width 最大宽度
    • min-width 最小宽度
    <style>
        p{
            /* 最小宽度 */
            min-width:120px;
            /* 最大宽度 */
            /* max-width:1200px; */

        }
    </style>
    <body>
        <p>我是内容我是内容我是内容我是内容我是内容我是内容</p>
    </body>
  • height 高度
    • max-height 最大高度
    • min-height 最小高度
    <style>
        p{
            /* 最小高度 */
            min-height:120px;
            /* 最大高度 */
            /* max-height:1200px; */

        }
    </style>
    <body>
        <p>我是内容我是内容我是内容我是内容我是内容我是内容</p>
    </body>
  • border 边框
    • 除了使用复合样式外，单独方向的样式都可以单独设置，也可以单个值，两个值，三个值，四个值来控制，规律与padding一致。
    • border-style 边框样式
      • border-方向-style 单独设置边框样式
          <style>
        .main{
            /* 边框样式 */
            /* 可以单独设置，也可以单个值，两个值，三个值，四个值来控制 */
            border-style: groove;
            border-top-style: dashed;
            }
    </style>
    • border-color 边框颜色
      • border-方向-color 单独设置边框颜色
          <style>
        .main{
            /* 边框颜色 */
            /* 可以单独设置，也可以单个值，两个值，三个值，四个值来控制 */
            border-color: teal;
            border-right-color:tomato ;
            }
    </style>
    • border-width 边框粗细
      • border-方向-width 单独设置边框粗细
          <style>
        .main{
            /* 边框粗细 */
            /* 可以单独设置，也可以单个值，两个值，三个值，四个值来控制 */
            border-width: 10px;
            border-top-width: 20px;
            }
    </style>
    • border 边框复合样式
      • border复合设置边框属性
          <style>
        .main{
            /* 边框复合样式 */
            border: 30px dashed forestgreen;
            }
    </style>
  • padding、margin 内边距、外边距
    • 规律顺序
      • 四个值时分别为：上、右、下、左
      • 三个值时分别为：上、左右、下
      • 两个值时分别为：上下、左右
      • 一个值时为：上下左右全部
          <style>
        span{
            background:green;
        /* 四个值时 */
            /*  上、右、下、左 顺时针方向 */
            /* padding:10px 50px 100px 200px; */
            /* margin:10px 50px 100px 200px; */

        /* 三个值时 */
            /* 上、左右、下 */
            /* padding:10px 50px 100px; */
            /* margin:10px 50px 100px; */

        /* 两个值时 */
            /* 上下、左右 */
            /* padding:10px 50px; */
            /* margin:10px 50px; */

        /* 一个值时 */
            /* 四个方向 */
            padding:50px;

            display:inline-block;
            border:5px solid gold;
        }
    </style>

浮动

  • 可用于所有元素

float 浮动值

  • float:left; 左浮动 
        <style>
        .contain {
            background-color: pink;
            overflow: hidden;/* 避免高度塌陷 */
        }
        .contain>.last{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;/* 左浮动 */
            float: right;/* 右浮动 */
            float: none;/* 不浮动 */      
        }
    </style>
        <body>
            <div class="contain">
                <div class="box1">aaaa</div>
            </div>
        </body>
  • float:right; 右浮动
  • float:none; 不浮动，【默认值】元素不浮动，并会显示在其在文本中出现的位置。

特点

  1. 脱离文档流，“ 不占位置 ”，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。
  2. 一般会配合一个父级元素，使用浮动位置是相对于父级元素的
  3. 在正常文档流中，块级元素不设置宽高，默认会撑满父级元素；但一旦设置浮动脱离文档流，就失去了所继承的宽高,转而由自身内容所决定
  4. 行内元素不可设置宽高，由自身内容决定；但一旦设置浮动，则可以设置宽高，会起作用。
  5. 使用浮动，可以实现文字环绕，除了图文混排，不建议使用浮动
  6. 一浮全浮，多个元素，如果要在一行显示，就把这些元素都设置为浮动

可能会造成的问题

  • 元素浮动导致的父元素高度塌陷的问题：
    • 原因
      • 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱
    • 解决办法
      1. 给浮动元素的父元素设置高度
        • 弊端：高度被固定了
      2. 给浮动元素的父元素加overflow:hidden样式
        • 此样式为溢出隐藏
        • 弊端：超出范围的内容会被隐藏
            <style>
        .contain {
            background-color: pink;
            overflow: hidden;
        }

        .contain>.last,.contain>.box1{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
    <body>
        <div class="contain">
            <div class="box1">aaaa</div>
            <div class="last">bbbbb</div>
        </div>
    </body>
      3. 添加块级元素并设置clear样式
        • 在浮动元素的父元素中，给浮动元素的后面加一个块级元素,然后给这个块级元素设置一个clear样式，此样式的作用为：消除"左浮动元素"、"右浮动元素"或"两个浮动元素一起"的由于使用浮动所造成的影响
        • 弊端：需要添加多余的结构以及样式
           <style>
       .last{
           clear: both;
       }
   </style>
   <body>
       <div class="contain">
           <span class="box1"></span>
           <div class="last"></div>
       </div>
   </body>
      4. 快捷固定样式
        • 有一个固定的几条样式，给浮动元素的父级元素加一个类名，专门用来使用这几条样式，就可以消除浮动造成的不良影响。【此方式相当于使用 伪元素 ，给浮动元素后面添加了一个具有可以请除浮动样式的块级元素，而不是在结构中真的加一个块级元素。【是更加完善的第三种方法】】
            <style>
        .clearfix::after{
            /* 实际上就是用伪元素给浮动元素的后面加了一个块级元素，然后使用clear清除了浮动的影响 */
            content: "";
            font-size: 200px;
            display: block;
            border-top-style: dashed;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        /* 这个是用来兼容IE678的，可以不用考虑 */
        .clearfix{
            *zoom:1;
        }
    </style>
    ```

定位

static 静态定位

  • 默认值，即没有定位，元素出现在正常的文档流中。
  • top, bottom, left, right,z-index 声明不生效

relative 相对定位

  • 生成相对定位的元素，相对于其正常位置进行定位。【参照物是自身原本的位置】
  • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。设置时是对自己本身的某方向增减距离
  • 特点
    1. 没有脱离文档流，位置还在
    2. 定位的元素有层级关系，层级高于普通文档流
    3. 通常用于给绝对定位作参照物
    4. 相对自身原本位置定位
        <style>
        .div1{
            width:300px;
            height:300px;
            background-color:porple;
        }
        .div2{
            width:100px;
            height:100px;
            background-color:pink;
            /* 相对定位 ：参照物是自身原本位置*/
            position:relative;
            left:100px;
            top:100px;
        }
    </style>
    <body>
                
        <div class='div1' class='class'>
            div1
            <div class='div2'>
                div2
            </div>
        </div>
    </body>

absolute 绝对定位

  • 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • 元素位置通过"left", "top", "right" 以及 "bottom" 属性进行规定
  • 元素层级通过"z-index"属性进行规定
  • 参照物是position：relative 或者 position:absolute、position:fixed ,只要是三者之一即可,都可以作为绝对定位的参照物。【但通常 “最外层” 是以相对定位的元素为参照物的】
  • 特点
    1. 脱离文档流
    2. 层级高于普通文档流
    3. 参照物必须是 “祖先级”元素【该元素必须作为其后代存在】
    4. 浏览器在设置参照物的时候，是按照“就近原则”，一直向上找，找到为止，如果都没有，就以body作为参照物
    5. 当向上找的时候，除了position:relative; 发现某个祖先级元素设置了position：fixed或position：absolute时，此元素就会以这个元素作为参照物，不会再去向上找设置了position:relative;的元素了。
    6. 块级元素设置浮动、定位后，宽就不再继承父元素，而是内容决定。
    7. 行内元素，定位之后，宽、高也可以起作用。
    8. 如果用百分比设置绝对定位元素的宽度时，是相对该元素的参照物来说的，而不是父级。
            <style>
            .div1{
                width:300px;
                height:300px;
                background-color:porple;
                border:1px solid black;
                margin-left:20px;
                margin-top:20px;
                /* 相对定位：作为参照物 */
                position:relative;
            }
            
            .div5{
                width:120px;
                height:120px;
                background-color:tomato;
                /* 绝对定位 */
                position:absolute;
                right:100px;
                bottom:200px;
            }
        </style>    
            <div class='div1' class='class'>div1
                <div class='div5'>div5
                </div>
            </div>

fixed 固定定位

  • 生成绝对定位的元素，相对于浏览器窗口进行定位。参照物是body
  • 元素位置通过"left", "top", "right" 以及 "bottom" 属性进行规定
  • 元素层级通过"z-index"属性进行规定 
            <style>
            .div1{
                width:300px;
                height:300px;
                background-color:porple;
                border:1px solid black;
                top:0;
                left:0;
                /* 绝对定位:固定在页面左上角 */
                position:fixed;
            }
        
        </style>      
            <div class='div1' class='class'>
                div1
            </div>

层级

  • z-index
    • 调整脱离文档流的元素的层级，数值越大，层级越高

其他

  • 如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中
    • 给元素添加定位 position:absolute;
    • left:50%;
    • top:50%;
    • margin-left:负的盒子宽的一半;
    • margin-top:负的盒子高度的一半;
        <style>
            body{
                height: 800px;
            }
            .outer{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .center{
                width: 100px;
                height: 100px;
                background-color: tomato;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>
        <div class="outer">
            <div class="center">
                div
            </div> 
        </div>

flex弹性布局

兼容性

  • pc端IE10及以上放心使用，移动端直接用。 flex兼容性.png

传统布局

  • 传统布局基于盒模型，通过position定位+float浮动+display属性进行调整。这样实际上不是很方便，比如垂直居中就不是很方便

弹性布局

  • 弹性布局可以为盒状模型提供最大的灵活性
  • display:flex; 代表的是块级
  • display:inline-flex; 代表的是行内块
  • 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效！
  • 容器和项目： 一旦给某个元素设置了flex布局，该元素就变成了 flex容器，容器的所有子元素，都自动成为容器的成员，被称为 项目
  • 两根轴： 默认为水平的主轴，和垂直的交叉轴【侧轴】
    • 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
    • 交叉轴的开始位置叫做cross start，结束位置叫做cross end。 flex布局.png

容器

  • 一旦给某个元素设置了flex布局，该元素就变成了 flex容器
容器的属性
  • 控制主轴方向 flex-direction
    • 设置后，项目会按照指定的容器主轴方向排列
    • 默认为横向【从左到右】 主轴方向.png
        <style>
        div{
            display:flex;
            /* 设置水平轴为主轴【从左到右】  */
            flex-direction:row;
            /* 设置垂直轴为主轴【从上到下】 */
            /* flex-direction:column; */
            /* 设置反向水平轴为主轴 */
            /* flex-direction:row-reverse; */
            /* 设置反向垂直轴为主轴 */
            /* flex-direction:column-reverse; */
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
  • 换行 flex-wrap
    • 设置后，项目会在沿主轴方向充满容器后换行 换行.png
    • 默认为不换行
        <style>
        .list{
            display:flex;
            /* 设置水平轴为主轴【默认】 */
            flex-direction:row;
            /* 设置垂直轴为主轴 */
            /* flex-direction:column; */
            /* 设置反向水平轴为主轴 */
            /* flex-direction:row-reverse; */
            /* 设置反向垂直轴为主轴 */
            /* flex-direction:column-reverse; */
            /* 换行 */
            flex-wrap:wrap;
            /* 不换行【默认】 */
            /* flex-wrap:nowrap; */
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
  • 主轴&换行 flex-flow【复合属性】
    • 第一个值代表设置主轴方向
    • 第二个值代表设置是否换行
    • 两个值空格隔开
        <style>
        .list{
            display:flex;
            flex-flow:column wrap;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
  • 控制项目在主轴方向的对齐方式 justify-content【常用】
    • center 在主轴居中
    • flex-start对齐主轴起始端
    • flex-end对齐主轴结束端
    • space-between项目在容器主轴方向两端对齐
    • space-around在主轴上，每个项目间的间距是项目距离容器边框的距离的二倍 flex-主轴对齐.png
    • space-evenly在主轴上，每个项目间的间距与项目距离容器边框的距离相等 flex-主轴对齐2.png flex主轴对齐方式.png
        <style>
        .list{
            display:flex;
            justify-content:space-between;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
  • 控制项目在交叉轴方向的对齐方式 align-items【常用】
    • center 在交叉轴居中
    • flex-start对齐交叉轴起始端
    • flex-end对齐交叉轴结束端
    • stretch项目充满整个交叉轴【不常用】
      • 【若项目在交叉轴上所占的比例不写，或设为auto，则它将占满整个交叉轴】
    • baseline 项目的第一行文字的基线对齐 flex交叉轴对齐方式.png
        <style>
        .list{
            display:flex;
            flex-wrap:nowrap;
            /* 水平垂直居中 */
            justify-content:center;
            align-items:center;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
  • 控制项目在交叉轴方向的对齐方式 align-content【换行导致多根轴线前提下】
    flex-多轴情况下侧轴对齐.png
    • center 在交叉轴居中
    • flex-start对齐交叉轴起始端
    • flex-end对齐交叉轴结束端
    • space-between多个主轴项目在容器交叉轴方向两端对齐
    • space-around在交叉轴上，【两个主轴项目】间的【交叉轴间距】是【其中一个主轴项目】在【交叉轴上】距离容器边框的距离的二倍
    • stretch项目充满整个交叉轴【不常用】
      • 【若项目在交叉轴上所占的比例不写，或设为auto，则它将占满整个交叉轴】
        <style>
        .list{
            display:flex;
            /* 必须是在换行的前提下，因为换行会导致多跟轴线 */
            flex-wrap:wrap;
            justify-content:space-between;
            align-content:space-between;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>

项目

  • 容器的所有子元素，都自动成为容器的成员，被称为 项目
项目的属性
  • 项目的排列顺序 order
    • 数值越小，排列越靠前，默认为0 flex-order.png
  • 项目的放大比例 flex-grow
    • 默认为0，即如果存在剩余空间，也不放大
    • 若都设置为1，则它们将等分剩余空间（如果有的话）
    • 若其中一个为2，则比其他项目大一倍 flex-grow.png
  • 项目的缩小比例 flex-shrink
    • 默认为1，当空间不足时，所有项目都将等比例缩小
    • 若一个设置为0，当空间不足时，其余都缩小，这一个不缩小
    • 无负值 flex-shrink.png
  • 项目占主轴空间 flex-basis
    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）
    • 默认为auto，及项目本身的大小，也可以设置为固定值
    • 浏览器根据这个属性，计算主轴是否有多余空间。
  • 放大、缩小、占主轴空间 flex【复合属性】
    • flex:0 1 auto;【默认值】
    • flex:1;均分宽度
    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）
    • 默认为auto，及项目本身的大小，也可以设置为固定值
    • 浏览器根据这个属性，计算主轴是否有多余空间。

基线对齐

vertical-align 基线对齐

基线对齐.png

  • vertical-align:top; 顶线对齐
  • vertical-align:middle; 中线对齐
  • vertical-align:baseline; 基线对齐
  • vertical-align:bottom; 底线对齐

字体图标

  • 实际上相当于加载文字，相较于图片不会发很多http请求并耗费很多资源加载图片
  • 实际上是用样式实现的图标
  • iconfont 阿里巴巴矢量图标库
  • 作为网络资源使用
    1. 在图标库找到需要的图标，单个或者多个，分别或者整体生成在线链接
    2. 写一个容器，设置对应类名
    3. 将对应类名的样式表引入,在地址前面加http:
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2558123_r4qonyni5e.css">
    <style>
        .iconfont{
                color: blue;
                font-size:20px;
            }
    </style>
    <body>
        <span class="iconfont icon-buganxingqu"></span>
    </body>
  • 作为本地资源使用
    1. 在图标库找到需要的图标，单个或者多个，分别或者整体生成包含样式表和字体文件的压缩包，下载的到本地
    2. 将样式表和字体文件导入到项目中
    3. 写一个容器，设置对应类名
    4. 将对应类名的样式表引入
       <link rel="stylesheet" href="./CSS/iconfont.css">
   <style>
       .iconfont{
               color: blue;
               font-size:20px;
           }
   </style>
   <body>
       <span class="iconfont icon-buganxingqu"></span>
   </body>

BFC(Block Formatting Contexts)【块级格式上下文】

  • 它是一块独立的渲染区域 ，它规定了在该区域中，常规流块盒的布局。
  • 不同的BFC它们在进行渲染时互不干扰。

规则

  • 常规流块盒，在水平方向上，必须撑满包含块 （继承父元素的宽度）
  • 常规流块盒，在排列方式上，是上下排列（块级元素的特点）
  • 常规流块盒，如果无缝相邻，则进行外边距合并（外边距穿透，“一起下掉”）
  • 常规流块盒的自动高度和摆放位置，会无视浮动元素。

BFC产生的条件

  1. 根元素：html
  2. 浮动和定位的元素【固定和绝对定位】
  3. overflow不等于visible
  4. display 为以下其中之一的值 inline-block，table-cell，table-caption；

常见的问题

  1. margin值穿透
  2. 浮动元素造成父盒子高度塌陷

其他问题

图片在父元素中会产生的一些问题【底部间隔】

  • 为了解决图片在盒子中，底部有一个间隔的问题
    • 解决办法
      1. 给图片转换成块元素 【多用】
      2. 给【图片的父元素】的字体大小设置为0 【会影响盒子中的其他文本元素】
      3. vertical-align:top; 改变基线对齐为top

margin值穿透：【只存在于margin-top】

  • 情景
    • 有一个大盒子里面包含小盒子，若想让小盒子离大盒子的顶部有一定的距离。就可以给小盒子设置margin-top属性，使其远离大盒子顶部。
  • 实际状况
    • 但如果大盒子没有设置padding-top 或者是border-top，直接给小盒子设置margin-top，大盒子会跟着小盒子一起向下移动，这个现象就是margin值穿透问题。
  • 解决方法
    1. 给大盒子加padding 
          <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding-top: 1px;
            box-sizing: border-box;
        }

        .box2 {
            width: 30px;
            height: 30px;
            margin-top: 29px;
            background-color: purple;
        }
    </style>
    </body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
    2. 给大盒子加一个透明的上边框 
          <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color:pink ;
            border: 1px solid transparent;
        }
        .box2{
            width: 30px;
            height: 30px;
            margin-top: 30px;
            background-color: purple;
        }
    </style>
    </body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
    3. 溢出隐藏 
          <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color:pink ;
            overflow:hidden;
        }
        .box2{
            width: 30px;
            height: 30px;
            margin-top: 30px;
            background-color: purple;
        }
    </style>
    </body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>

margin值合并

  • 情景
    • 有两个兄弟元素：bro1，bro2垂直排列，想要给bro1设置margin-bottom:30px; 再给bro2设置margin-top:100px;两元素的垂直间隔会是多少？
  • 实际状况
    • 这两个元素之间的距离并不是两者之和，而是取最大的那个值。
  • 解决方法
    1. 只给其中一个元素设置全部的距离 
         <style>
           .bro1{
           width: 100px;
           height: 100px; 
           /* margin-bottom: 20px; */
       }
       .bro1{
           width: 100px;
           height: 100px;
           /* 只给一个元素单独设置距离 */
           margin-top: 100px;
       }
   </style>
   </body>
       <div class="bro1"></div>
       <div class="bro2"></div>
   </body>

行内块元素的自带间隔【左右间隔】

  • 行内块元素在同一行中，左右自带了一些间隔，是由于代码中的回车符造成的
    • 解决办法
      1. 消除代码中的回车符【不建议，代码较多时会比较混乱】
      2. 给【行内块元素的父元素】的字体大小设置为0 【会影响盒子中的其他文本元素，但是单独在设置字体大小就好了】
        • 但是如果在子元素其中一个兄弟元素里面没有内容，就会造成位置对齐不准,其中一个元素下掉，由此引出【基线对齐问题】
      3. vertical-align:left; 改变基线对齐为top

如何用css写一个三角形

    <style>
        .triangle{
            border: 50px solid black;
            width:0;
            border-color: transparent greenyellow transparent transparent;
        }
    </style>
        <body>
            <div class="triangle"></div>
        </body>

画一个圆

  • border-radius:50%

一些其他会用到的样式

  • white-space:nowrap 文字换行【强制不换行】
  • text-overflow：ellipsis 文字被隐藏后使用何种样式【以点点的形式隐藏】
  • display:-webkit-box 控制让哪一行显示【老版本的flex】
  • -webkit--line-clamp:4 控制让哪一行显示【控制行数】
  • -webkit-box-orient: vertical;【老版本的控制主轴方向】
  • user-select 禁止用户选中【文字】
  • letter-space 字符间距离
  • word-space 单词间距离
  • opacity:0.5 透明度
    • 兼容处理filter:alpha(opacity=50)
  • filter:blur(20px) 高斯模糊 数值越大越糊
  • filter:grayscale(1) 全部变灰
  • filter:invert(1) 反色
  • filter: hue-rotate(0deg); 色相修改
avatar
文章
阅读
粉丝