css始めましょう

最新推荐文章于 2024-03-21 20:54:48 发布

神奇小白

最新推荐文章于 2024-03-21 20:54:48 发布

阅读量321

点赞数

分类专栏： JavaScript 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/uotail/article/details/124673505

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

css

cascading style sheet

css的注释只有一种就是块注释/**/

href和src的区别

url：Uniform Resource Locator统一资源定位符
src：Source资源
href：Hypertext Reference超文本引用

href 和src的区别
- href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
  常用的有：link、a
- src 加载资源

权重（优先级）

内联样式
内联样式表
外部样式

浏览器加载页面的方式:
html dom树
css css树
->渲染树

CSS选择器用于选择你想要的元素的样式的模式。

https://css.doyoe.com/

行内元素和行内块元素的文本分隔符

行内元素和行内块元素都有文本分割符
在 inline inline-block中空格换行都是文本分隔符
eg. img

overflow

min-height
max-height

容器或盒子隐藏溢出的部分
overflow:hidden|scroll|auto
滚动条的宽度一般是17px，占用盒子内部的空间

字体

font-size

浏览器默认字体大小是16px（12、14、16、18通常设置为这些值）
浏览器设置字体大小是设置的高度、宽度是自动缩放的

font-weight 粗体

对于hx标签我们一般使用正常粗度

h1,
h2{
    font-weight: normal;
}

font-style

font-style: italic;
font-style: oblique;
/* oblique 如果字体没有斜体样式，这个属性会强制使文字倾斜 */
/* italic 本身代表斜体文字 */

em{
    font-style: normal;
}
/* em本身是语义化的斜体文字，但我们一般不需要它默认斜体，只是为了突出它的语义化 */

font-family
通用字体：Arial 。(window、mac上都安装了)

p{
    font-family: Arial, Helvetica, sans-serif;
}
/* 复合属性，如果第一个字体没找到，就依次往后寻找 */
/* 带引号的字体：中文字体带有空格所以需要引号 */

color字体颜色
（英文单词和16进制的颜色值）

颜色英文单词
16进制
光学三原色
red 00-ff
green
blue

#ff00ff=>#f0f（颜色的缩写）

RGB
red 0-255
green
blue
RGB
rgb(255,0,255)
rgb(100%,0%,100%)

边框border

border:边框宽度样式颜色

transparent 是透明色

div{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
      /* border可以分开属性 
    border-width: 1px;  上下左右
    border-width: 1px 10px; 上下 左右 
    border-width: 5px 2px 10px; 上  左右  下 
    border-width: 5px 2px 10px 5px; 上  右  下  左  （顺时针方向）
    border-style: solid;
    border-color: #000; */
}
/* 边框的可视宽度为102 */
/* 边框不占据盒子内部的空间 */

border-top
border-right
border-bottom
border-left

文本的水平居中和垂直居中

使行高与容器的高度相同，文本就会垂直居中

行高
line-height: 16px;
默认文本每行之间都有间距，行高默认是22px

div{
    height: 300px;
    text-align: center;
    line-height: 300px; 
}

文本的缩进（）

作用：文章每段用p标签包裹，给p加缩进使每段缩进
登录面板输入用户名时，给输入框加缩进，在输入框左边放置小图标

input,p{
    text-indent: 5px;
}

px和em

px pixel 一个像素只能显示一个颜色
em 相当于当前元素内字体的大小，1em=16px

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过UI控件来改变浏览器默认的字体大小。

em指的是相对于元素父元素的font-size。比如说：如果在一个div设置字体大小为“16px”，此时这个div的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小），不至于用户改变了浏览器的字体后会致使整个页面崩溃

大家可以查看这个弹性布局样例。此时你使用浏览器的UI控件改变了文字的大小或者直接“ctrl + ”和“ctrl - ”，你会发现这个弹性布局实例，在浏览器改变字体大小浏览会做出相应的放大和缩小，并不会影响整个页面的布局。

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：

如果字体大小是16px，那么1em=16px。
16 * 0.625 = 10
body设置字体62.5%，此时body中10px=1em

text-decoration

a{
   text-decoration: none;
    /* underline 下划线  ins标签
       line-through 删除线  del标签
       overline 上划线
       none 清除a标签中的下划线
        */
}

span模拟a标签

span{
    color: purple;
    text-decoration: underline;
    cursor: pointer;
}

禁用


button{
    cursor: not-allowed;
}

单行文本截断和显示省略号的三大件

div{
    width: 200px;
    height: 22px;
    /* 三大件 */
    white-space: nowrap; /*不换行*/
    overflow-x: hidden;
    text-overflow: ellipsis;/*隐藏部分加省略号*/
}

display

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

/* display 属性使用关键字取值来指定，关键字取值被分为六类： */
.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

display-outside的可用值：
- block
  这个值会生成一个块级元素盒子，同时在该元素之前和之后打断（换行）。简单来说就是，这个值会将该元素变成块级元素。
- inline
  这个值会生成一个行内元素盒子，该元素之前和之后不会打断（换行）。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。
块级元素和行内元素
HTML中元素大多数都是“块级”元素或行内元素。
块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
行内元素素只占据它对应标签的边框所包含的空间
display-legacy
- inline-block
  元素会产生一个块元素盒子，并且像内联盒子一样（表现得更像一个被替换的元素），可以融入到周围内容中。

a标签变换为button标签

a{
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: rgb(52, 168, 214);
    border: 1px solid cornflowerblue ;
}

a:hover{
    background-color: rgb(80, 139, 248);
}

隐藏元素的两种方式

display: none; 和 visibility: hidden; 区别

checkBox自定义

<!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>Document</title>
</head>
<style>

   .checkbox{
       width: 40px;
       height: 40px;
       border: 2px solid #000;
       border-radius: 50%;
   }
   .checkbox label{
       display: block;
       width: 20px;
       height: 20px;
       margin: 10px;
       background-color: #000;
       opacity: 0; /*值越大透明度越低*/
       filter: alpha(opacity=0);
       border-radius: 50%;

   }
   .checkbox input[type="checkbox"]{
       display: none;

   }
   .checkbox input[type="checkbox"]:checked + label{
       opacity: 1; /*值越大透明度越低*/
       filter: alpha(opacity=100);
   }
</style>
<body>
  <div class="checkbox">
      <input type="checkbox" id="checkbox">
      <label for="checkbox"></label>
  </div>
</body>
</html>

伪类focus聚焦

<!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>Document</title>
</head>
<style>
input{
    outline: none;
}
input:focus{
    border: 1px solid green;
}
</style>
<body>
   <input type="text">
</body>
</html>

tr:nth-child(even)

table{
    width: 300px;
}
table tr td{
    border-bottom: 1px solid #ccc;
}
table tr:nth-child(even){
    background-color: #eee;
}
table tr:hover{
    background-color: #eee;
}

解决行内块元素和行内元素对齐的问题 vertical-align

<!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>Document</title>
</head>
<style>
    img{
        width: 150px;
        border: 1px solid #000;
        vertical-align: middle;
    }
</style>
<body>
   <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
   <span>321</span>
</body>
</html>

行内块里面如果有文本，就和行内块里面的文本对齐
如果没有就和行内块下边对齐


<!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>Document</title>
</head>
<style>
    .block{
        display: inline-block;
        width: 150px;
        height: 100px;
        border: 1px solid #000;
    }
</style>
<body>
    <span class="block"></span>
    <span>321</span>
</body>
</html>

多行文本的垂直居中

table>tr>td单元格中的文本默认都是垂直居中的

容器内的多行文本居中方法

容器的display:table
容器内的文本display:table-cell
容器内的文本vertical-align: middle;

盒子模型

margin
border
padding
width-height
边框和内边距不占据盒子本身的宽高

盒模型的各个部分

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
内层盒子居中
外层盒子固定并设置内边距，内层盒子宽高自适应

.box{
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 1px solid #000;
}
.box .box1{
    width: 100%;
    height: 100%;
    background-color: orange;
}

设置宽高为盒子宽高

box-sizing 是css3定义的属性

content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。
注意: 内边距、边框和外边距都在这个盒子的外部。
比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式：
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。

div{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* firefox */
    -webkit-box-sizing: border-box; 
    /* chrome Safari */
    -o-box-sizing: border-box; 
    /* ie8以下 */
    -ms-box-sizing: border-box;
    /* opera */

}

内层盒子居中2
外层盒子固定并设置内边距，内层盒子宽高自适应

<!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>Document</title>
</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: green;

    }

    .box1 {
        width: 50px;
        height: 50px;
        background-color: orange;
        margin: 0 auto;  /*水平居中*/
        /* margin-top: 100px;会造成margin塌陷 */
      
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

浏览器默认body的外边距margin是8px

定位position

CSS position属性用于指定一个元素在文档中的定位方式。
top，right，bottom 和 left 属性则决定了该元素的最终位置。

absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。相对于最近的父级定位元素
relative
元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。相对于自己元素本身
定位的常用方法
父级元素设置为relative，子元素设置absolute，这样子元素就会相对于父元素移动

相对定位的元素显示优先级>绝对定位

z-index
z-index: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>Document</title>
</head>
<style>
   html,body{
       height: 100%;
       margin: 0;
       overflow-y: hidden;
   }
   .left{
       position: absolute;
       left: 0;
       top: 0;
       width: 300px;
       height: 100%;
       background-color: green;
   }
   .right{
       height: 100%;
       margin-left: 300px;
       background-color: orange;
   }
</style>

<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

float

float是css2.0出来的，最初是利用float可以让文字包裹图片
所以内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置，除了块级元素

块级元素不是浮动流元素，所以float无法识别出块级元素的位置，

块级元素本身也无法识别浮动流元素
在嵌套的div中，如果里边的div设置了float，它无法撑起外层的div，
因为div是块级元素，无法识别浮动元素
块级元素+float=内联块元素

<!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>Document</title>
</head>
<style>
    .divcss5 {
        width: 400px;
        border: 1px solid #F00;
        background: #FF0
    }

    .divcss5-left,
    .divcss5-right {
        width: 180px;
        height: 100px;
        border: 1px solid #00F;
    }

    .divcss5-left {
        float: left
    }
    .divcss5-right {
        float: right
    }
</style>

<body>
    <div class="divcss5">
        <div class="divcss5-left">left浮动</div>
        <div class="divcss5-right">right浮动</div>
        <!-- 加上这句可以清除浮动 -->
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>
</html>

float的清除

<!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>Document</title>
</head>
<style>
    .header {
        width: 100%;
        height: 60px;
        border: 1px solid #F00;
        background: #FF0
    }

    .left{
        width: 200px;
        height: 100%;
        background-color: green;
        float: left;
    }

    .right{
        width: 200px;
        height: 100%;
        background-color: orange;
        float: right;
    }
</style>

<body>
    <div class="header">
        <div class="left">left浮动</div>
        <div class="right">right浮动</div>
        <!-- 块级元素一个占一行 -->
    </div>
</body>
</html>

也可以用伪元素来清除浮动

伪类和伪元素、清除浮动

https://blog.csdn.net/m0_37686205/article/details/88396191

默认伪类
before after

一个冒号是伪类
两个冒号是伪元素
content属性是必须加的

伪类用于清除浮动

.box::after{
    content: "";
    display: block;
    clear: both;
}

最佳写法，是特定一个类clearfix用于清除浮动

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

<div class = 'box clearfix'> 
    <!-- ……这里面是两个浮动的div -->
</div>

overflow:hidden;也可以清除浮动，但不推荐，它主要目的是为了隐藏滚动条

.box{
    overflow:hidden;
}

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素

before也可以用来添加icon小图标

<html>
<style>
    p::before{
        content: url(img/icon.png);
        margin-right: 5px;
        vertical-align: middle;
    }
</style>
<body>
 <p>请点击发送信息</p>
</body>
</html>

动态获取数据

<html>
<style>
    p::before{
        content: attr(data-username);
    }
</style>
<body>
 <p data-username="小白">，欢迎您再次光临</p>
</body>
</html>

轮播图样式实现

<!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>Document</title>
    <style>
        .slider{
            position: relative;
            width: 590px;
            height: 470px;
        }
        .indicator{
            position: absolute;
            left: 46px;
            bottom: 20px;
            width: 152px;
            height: 18px;
            /* background-color: yellow; */
        }
        .indicator-dot{
            display: block;
            height: 18px;
            width: 18px;
            /* border: 1px solid #000; */
            box-sizing: border-box;
            float: left;
            position: relative;
        }
        /* indicator-dot里面添加元素 */
        .indicator-dot::after{
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border: 2px solid red;
            border-radius: 50%;
            opacity: .4;
            position: absolute;
            top: 4px;
            left: 4px;
        }
        /* 激活状态的样式 */
        .indicator-dot.active::before{
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            background-color: red;
            border-radius: 50%;
            opacity: .2;
        }
        .indicator-dot.active::after{
            opacity: 1;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="slider">
        <div class="indicator">
            <i class="indicator-dot active"></i>
            <i class="indicator-dot"></i>
            <i class="indicator-dot"></i>
            <i class="indicator-dot"></i>
            <i class="indicator-dot"></i>
            <i class="indicator-dot"></i>
            <i class="indicator-dot"></i>
        </div>
        <img src="https://i.loli.net/2021/11/30/rwX96yEPo4mQ8nA.jpg" alt="">
    </div>
</body>
</html>

BFC块格式化上下文

CSS2提出的概念

普通流 normal flow
浮动流 float 脱离了普通流
绝对定位脱离文档流

BFC属于普通流的一种，body本身就是BFC

https://www.cnblogs.com/libin-1/p/7098468.html

https://www.pianshen.com/article/40721903310/

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

根元素（html）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

浮动定位和清除浮动时只会应用于同一个BFC内的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

BFC的特点
注意：普通盒子满足一定条件将成为bfc盒子（即创建bfc区域）

在同一个bfc区域，内部盒子总是垂直排列
在同一个bfc区域,内部盒子垂直方向上的距离由marging决定，相邻两个box的margin值会发生重叠
BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样）
在同一个bfc区域内的每个bfc盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠
BFC是页面上的一个独立容器，容器内外布局不会相互影响
计算BFC高度时，区域内的浮动元素会参与计算

BFC的作用
1. margin合并的问题
2. 浮动流造成父级元素高度坍塌的问题
3. margin塌陷的问题
4. 解决浮动元素覆盖的问题
外部的div如何设置才能让浮动元素撑起来

使用overflow: auto
- 创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
- 设置 overflow: auto 创建一个新的BFC来包含这个浮动。
- 使用 overflow 来创建一个新的 BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。另外，对于后续的开发，可能不是很清楚当时为什么使用 overflow。所以你最好添加一些注释来解释为什么这样做。
使用display: flow-root
- 一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。
- 关于值 flow-root的这个名字，当你明白你实际上是在创建一个行为类似于根元素（浏览器中html元素）的东西时，就能发现这个名字的意义了——即创建一个上下文，里面将进行 flow layout。

<html>
<style>
    section {
        height: 150px;
    }

    .box {
        background-color: rgb(224, 206, 247);
        border: 5px solid rebeccapurple;
    }

    .box[style] {
        background-color: aliceblue;
        border: 5px solid steelblue;
    }

    .float {
        float: left;
        width: 200px;
        height: 100px;
        background-color: rgba(255, 255, 255, .5);
        border: 1px solid black;
        padding: 10px;
    }
</style>

<body>
    <section>
        <div class="box">
            <div class="float">I am a floated box!</div>
            <p>I am content inside the container.</p>
        </div>
    </section>
    <section>
        <div class="box" style="overflow:auto">
            <div class="float">I am a floated box!</div>
            <p>I am content inside the <code>overflow:auto</code> container.</p>
        </div>
    </section>
    <section>
        <div class="box" style="display:flow-root">
            <div class="float">I am a floated box!</div>
            <p>I am content inside the <code>display:flow-root</code> container.</p>
        </div>
    </section>
</body>
</html>

两栏布局

在下面的示例中，我们使用display:flow root和float实现双列布局，
因为正常流中建立新BFC的元素不得与元素本身所在的块格式上下文中任何float的边距框重叠。

很难理解：意思就是BFC中的元素是在一个新的布局，只有bfc元素才能影响他的布局，其次BFC中的布局不会影响正常的文档流

<!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>Document</title>
</head>
<style>
    section {
        height: 150px;
    }
    .box {
        background-color: rgb(224, 206, 247);
        border: 5px solid rebeccapurple;
    }
    .float {
        float: left;
        /* required by resize:both */
        resize: both;
        overflow: hidden;
        /* required by resize:both */

        margin-right: 25px;
        width: 200px;
        height: 100px;
        background-color: rgba(255, 255, 255, .75);
        border: 1px solid black;
        padding: 10px;
    }
</style>

<body>
    <section>
        <div class="float">Try to resize this outer float</div>
        <div class="box">
            <p>Normal</p>
        </div>
    </section>
    
    <section>
        <div class="float">Try to resize this outer float</div>
        <div class="box" style="display:flow-root">
            <p>display:flow-root</p>
        </div>
    </section>
</body>

</html>

外边距塌陷
创建新的 BFC 避免两个相邻 div之间的外边距合并问题

BFC可能造成外边距折叠，也可以利用它来避免这种情况。
BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

<!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>Document</title>
</head>
<style>
    .blue,
    .red-inner {
        height: 50px;
        margin: 10px 0;
    }

    .blue {
        background: blue;
    }
    .red-inner{
        background: red;
    }

    .red-outer {
        overflow: hidden;
    }
/* ================================ */
    .container {
        background-color: red;
        overflow: hidden;
        /* creates a block formatting context */
    }
    p {
        background-color: lightgreen;
        margin: 10px 0;
    }
</style>

<body>
    <section>
        <div class="container">
            <p>Sibling 1</p>
            <p>Sibling 2</p>
        </div>
    </section>
在上图中，一个红盒子（div）包含着两个兄弟元素（p），一个BFC已经创建了出来。
<br/>
理论上，两个p元素之间的外边距应当是二者外边距之和（20px）但实际上却是10px，这是外边距折叠(Collapsing Margins)的结果。
<br/>
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：
<br/>
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。<br/>
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。<br/>
3、两个外边距一正一负时，折叠结果是两者的相加的和。<br/>
产生折叠的必备条件：margin必须是邻接的!
<hr>
利用BFC避免外边距折叠<br/>
BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。
<br/>
改进前面的例子：<br/>

<section>
    <div class="container">
        <p>Sibling 1</p>
        <div style="overflow-y: hidden;">
            <p>Sibling 2</p>
        </div>
    </div>
</section>
<hr>

MDN实例
<section>
    <div class="blue"></div>
    <div class="red-outer">
        <div class="red-inner">red inner</div>
    </div>
</section>
   
</body>

</html>

另外一种情况

<!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>Document</title>
</head>
<style>
    .box1{
        width: 300px;
        height: 300px;
        background-color: #000;
        /* display: flow-root; 这句解决margin塌陷*/

    }
    .box2{
        width: 50px;
        height: 50px;
        background-color: orange;
        margin: 0 auto;
        margin-top: 100px;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

阴影

box-shadow
处理阴影的遮挡（相对定位+zindex）

<!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>Document</title>
</head>
<style>
    .box1 {
        width: 300px;
        height: 150px;
        margin:0  100px;
        background-color: orange;

        /* x偏移量 | y偏移量 | 阴影颜色 */
        /* box-shadow: 60px -16px teal; */

        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
        box-shadow: 10px 5px 5px black;

        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
        box-shadow: inset 5em 1em gold;

        /* 任意数量的阴影，以逗号分隔 */
        box-shadow: 3px 3px red, -1em 0 0.4em olive;

        /* 全局关键字 */
        /* box-shadow: inherit;
        box-shadow: initial;
        box-shadow: unset; */
    }
    .box0{
        height: 50px;
        background-color: yellow;
        position: relative;
        z-index:1
    }
    blockquote {
        padding: 20px;
        box-shadow:
            inset 0 -3em 3em rgba(0, 0, 0, 0.1),
            0 0 0 2px rgb(255, 255, 255),
            0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    }
</style>

<body>
    <div class="box0"></div>

    <div class="box1"></div>

    如何处理阴影的遮挡(阴影不在正常的文档流中)
    position: relative;
    z-index:1
  
    <blockquote><q>You may shoot me with your words,<br />
            You may cut me with your eyes,<br />
            You may kill me with your hatefulness,<br />
            But still, like air, I'll rise.</q>
        <p>&mdash; Maya Angelou</p>
    </blockquote>
</body>

</html>

border-radius

border-radius: 50%; 圆，宽高要一样
border-radius: height/2+px; 半圆
设置图片的圆角

https://stackoverflow.com/questions/24030326/why-doesnt-my-image-width-inherit-from-parent-div-width

<!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>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: auto;
        border: 1px solid #000;
        border-radius: 20px;
        /* div中图片圆角设置 */
        overflow: hidden;
    }

    img {
        width:inherit
    }
</style>
<body>
    <div class="box">
        <img src="https://i.loli.net/2021/11/30/rwX96yEPo4mQ8nA.jpg">
    </div>
</body>

</html>

background-image

div中设置图片也可以用背景图片，border-radius的问题也会一块儿解决

<!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>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        border-radius: 20px;
        background-image: url(https://i.loli.net/2021/11/30/rwX96yEPo4mQ8nA.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
</style>
<body>
    <div class="box">
    </div>
</body>
</html>

background-size: cover;
background-position: center center;
图片宽高比例不变多余的裁剪，容器空间不会留白
background-size: contain;
图片宽高比例不变缩小使其完全显示，剩余的空间留白
background-attachment: fixed;
当页面出现滚动条的时候，设置网页背景图片不会随着滚动条滚动，默认值是scroll
background复合值的写法
background:bg-color bg-image position/ bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

/* 使用 <background-color> */
background: green;
/* 使用 <bg-image> 和 <repeat-style> */
background: url("test.jpg") repeat-y;
/* 使用 <box> 和 <background-color> */
background: border-box red;
/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");

logo的制作

<!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>Document</title>
</head>
<style>
    h1{
        margin: 0;
    }
 .log{
    width: 142px;
    height: 58px;
    border: 1px solid #000;
 }
 .log h1 .log-hd{
     display: block;
     width: 142px;
     height: 0;
     padding-top: 58px;
     overflow: hidden;
     background: url(https://i.loli.net/2021/11/30/Jh9ajqx75UDQRgw.png) no-repeat 0 0/142px 58px;

 }

</style>
<body>
    <div class="log">
        <h1> <!-- 写h1是为了seo优化 -->
            <a href="" class="log-hd">淘宝网</a>
            <!-- 用户css加载失败也会有正常的体验 -->
        </h1>
    </div>
</body>
</html>

表格样式

css中 border: 1px solid #000;和table border="1"的区别
css中只是表格有线而单元格没有线

<style>
table{
    border: 1px solid #000;
    width: 500px;
    height: 200px;
}
</style>
<body>
  <table border="1">
      <tr>
          <td></td>
          <td></td>
      </tr>
  </table>
</body>

其他常用样式

<!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>Document</title>
</head>
<style>
table{
    /* border: 1px solid #000; */
    width: 500px;
    height: 200px;

    /*设置表格标题位置 bottom|top  */
    caption-side: top;
    
    /* 合并单元格之间的边框,默认分开，看起来像双边框 separate|collapse */
    border-collapse: collapse;
    
    /* 单元格宽度一致，不被内容撑开 ,注意文本内容要有空白分隔符，否则会超出边界（文本是中文除外会自动换行）*/
    table-layout: fixed;
}

td:nth-child(1){
    text-align: center;
}
td:nth-child(even){
    background-color: #eee;
}
</style>
<body>
  <table border="1">
      <caption>测试表格</caption>
      <tr>
          <td>1</td>
          <td>222 333 444 888 44444 5555</td>
          <td>3</td>
          <td>4</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
</body>
</html>

ul实现表格

<!DOCTYPE html>
<html lang="en">
<style>
  
    .clearfix::after{
        content: "";
        display: table;
        clear: both;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .table{
        width: 300px;
    }
    .table li{
        float: left;
        width: 101px;
        height: 101px;
        margin-top: -1px;
        margin-left: -1px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>
<body>
    <ul class="table clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

CSS书写顺序

显示属性：display、position、float、clear
自身属性：width、height、margin、padding、border、background
文本属性：color、font、text-align、vertical-align、whitespace
其他
选择器复合单词中横线

icon 文字图标矢量图

http://www.fontawesome.com.cn/
https://www.iconfont.cn/

小图标的实现
经常看到别人写icon时只需要添加对应的class就可以了

 <i class="icon icon-calendar"></i>

为什么呢

<!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>Document</title>
</head>
<style>
    .icon{
        display: block;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .icon-calendar{
        background-image: url(https://i.loli.net/2021/11/30/Gwhq6PXARdcv9lg.png);
    }
</style>
<body>
    <i class="icon icon-calendar"></i>
</body>
</html>

雪碧图sprites
雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图
使用css背景图标+css定位来应用
一、使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

二、不足
维护比较麻烦，现在是分模块局部使用

雪碧图的制作-百度一下
https://www.toptal.com/developers/css/sprite-generator

雪碧图的使用

<!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>Document</title>
</head>
<style>
    .icon {
        display: block;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .icon-calendar {
        background-image: url(https://i.loli.net/2021/11/30/Gwhq6PXARdcv9lg.png);
    }
    .bg-a {
        width: 73px;
        height: 71px;
        background: url(https://i.loli.net/2021/11/30/Zr14bq5v67G9Wth.png) -12px -12px;
    }
    .bg-b {
        width: 88px;
        height: 73px;
        background: url(https://i.loli.net/2021/11/30/Zr14bq5v67G9Wth.png) -109px -107px;
    }
</style>
<body>
    <i class="icon icon-calendar"></i>

    <i class="icon bg-a"></i>测试
    <i class="icon bg-b"></i>

</body>
</html>