当前位置： 首页 > article >正文

css

article 2024/12/28 1:17:52

已经学完html了，继续学习前端三剑客html、css、js之一的css。😀

1、什么是css

css：用于网页结构的布局和修饰的一种样式脚本

层叠样式表：(英文全称：Cascading Style Sheets)， 简称：样式表，

Cascading 是级联的意思，Style 是风格的意思，Sheets的格子或者窗体的意思

CSS 它是一种样式语言，主要是用来描述HTML或XML文档的呈现，以及如何在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

2、css的历史

看下面这个博客吧😅

CSS发展史与CSS模块划分 | 前端开发

3、css两大特性

1、继承性

CSS的继承性，指的是子元素继承父元素的某些样式属性。 在CSS中，具有继承性的由3类。

  • 字体文本相关属性：font-size（字体大小）、font-family（字体系列）、font-style（字体样式）、font-weight（字体粗细）、font、line-height（行高）、text-align（水平对齐方式）、text-indent（首行缩进）、word-spacing（字间距）。

  • 列表相关属性：list-style-image（使用图像替换列表项标记）、list-style-position（规定列表项标记位置）、list-style-type（设置列表项标记类型）、list-style

  • 颜色相关属性：color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #div1
    {
        font-size: 12px;
        color: hotpink;
        font-weight: bold;
        font-style: initial;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="div1">
        Hello world
        <div id="div2">Hello world</div><!--子元素-->
    </div><!--父元素-->
    
</body>
</html>

2、层叠性

当我们在CSS上重复定义多个相同的属性时，CSS会把先定义的属性覆盖掉。

对于同一个元素来说，如果我们定义多个相同的属性，并且定义的属性样式具有相同的权重时，CSS会以最后定义的属性值为准。

4、css基本语法

.remove-children-tip-ceVqLh {
    color: rgba(0,0,0,.8);
    color: var(--s-color-text-secondary,rgba(0,0,0,.8));
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px
}

.confirm-delete-btn-oVPeeS {
    background: #ff3b30!important;
    background: var(--s-color-system-alert,#ff3b30)!important;
    color: #fff!important;
    color: var(--s-color-text-invert-intact-primary,#fff)!important
}

.confirm-delete-btn-oVPeeS:hover {
    background: #cc2f26!important
}

.backBtn-PA2u6q {
    background: #fff;
    background: var(--s-color-bg-primary,#fff);
    border: 1px solid rgba(0,0,0,.12);
    border: 1px solid var(--s-color-border-primary,rgba(0,0,0,.12))
}

选择器 {

        样式属性：属性值；

        样式属性：属性值；

        样式属性：属性值；

        样式属性：属性值；

        ......

}

 语法的注意事项如下：

  • 选择器是用于指定CSS样式的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>css的基本语法</title>

    <style>
        div {
            background: red;
        }
    </style>

    
</head>

<body>

    <div>css的使用</div>

</body>

</html>

5、css注释

css的注释如下：

整体注释：

 /*
 div {
    font-size:  12px;
 }
 */

局部注释:

 ​
 div {
    /*局部注释*/
    /*font-size:  12px;*/
    background:red;
 }

快捷键：crtl + / 

6、css层叠样式

1、行内样式

 <span style="background-color: aqua;color: red;font-size: 50px;">css的层叠样式</span>

小结：

  • 使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的

  • 这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。

  • 而且不通用，如果是别的页面也需要，必须重新编写一次，失去了通用性。

2、内部样式

样式写在头标签head里面，再加上<style></style>

<!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>css的基本语法</title>

    <style>
        span {
            background: red;
            color:aqua;
            font-size: 25px;
        }
    </style>


</head>

<body>

    <span>css的层叠样式</span>

</body>

</html>

小结：

  • 优点：方便在同页面中修改样式

  • 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

  • 引出外部样式表

3、外部样式

在外部创建一个css文件夹，文件中创建.css文件，再html文件中使用link标签引入样式。

<!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>css的样式引入</title>

    <!--引入外部样式-->
    <link rel="stylesheet" href="css/style.css">

    <!--内部样式-->
    <!-- <style>
        div {
            font-size: 39px;
            color: green;
            background: #000
        }
    </style> -->

</head>

<body>

    <div>css的层叠样式</div>

</body>

</html>

链接式与导入式的区别

  1. <link/>标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。

  2. 使用<link/>链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。

  3. 使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用<link/>链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的体验。这个也是现在目前大多少网站采用链接外部样式表的主要原因。

  4. 由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。

优先级：行内样式 > 内部样式 > 外部样式 

就近原则：越接近标签的样式优先级越高

4、import导入样式

    <style>
        
        @import url(css/style.css);

    </style>

7、像素单位

1、px

px是绝对单位，是网页的基本单位，px是Pixel的，简称像素，1px就是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>06、CSS中的像素单位-px</title>
    <!--内部样式的方式定义
        那么衡量我们网页布局的宽度和高度，字体大小，图片宽度高度，间距的单位是什么，没错就px 。
        w 1920 * h 1080  -  160px -- 1920px -160px = 1000x
        1920 * 1080
    -->
    <style>
        div{
            /*网页布局的宽度和高度*/
            width: 160px;
            height: 160px;
            background: red;
        }
        
        p {
            /*字体大小*/
            font-size: 24px;
        }
        
        img {
            /*图片宽度高度*/
            width: 200px;
        }
    </style>
</head>
<body>

    <div>你好，zyhzyhzyhzyhzyh,让我们一起度过美好的一天!</div>

    <img src="D:\图片\wallhaven-28v8wm.jpg" alt="">
</body>

</html>

2、em

  • em是一种相对单位– px

  • 1em：16px浏览器的默认值

  • 1em = 基准值（16px）* number（1）= 16px

  • 2em = 基准值（16px）* number（2）= 32px

em是一个固定常量，他的大小是根据父的font-size设定，若父的font-size未设定，则使用默认值16px。

    <style>
        div{
            /*网页布局的宽度和高度*/
            width: 10em;
            height: 10em;
            background: red;
        }
        
        p {
            /*字体大小*/
            font-size: 5em;
        }
        
        img {
            /*图片宽度高度*/
            width: 10em;
        }
    </style>

3、rem

  • rem：相对值，基于根标签（html标签）

  • 1rem = 基准值（16px）* number（1）= 16px

rem的大小只参考一个点，那就是html的font-size，与父辈无关

    <style>

        html {
            font-size: 16px;
        }
        
        div {
            width: 10rem;
            height: 10rem;
            background: yellow;
            margin-top: 20px;
        }
        
    </style>

4、vh/vw

  • vh - height - 屏幕的百分比高

  • vw - width - 屏幕的百分比宽

    <style>
        .parent1 {
            width: 100vw;
            background: red;
            height: 100vh;
            overflow: auto;
            margin: auto;
        }
        
        .parent2 {
            width: 100vw;
            background: blue;
        }
    </style>

parent1会充满整个屏幕，parent2充满整行。

5、calc

使用calc可以动态计算大小

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #nav {
            height: 120px;
            background: red;
        }
        
        #banner {
            height: calc(100vh - 120px);
            background: blue;
        }
    </style>

 上面红色，下面蓝色，会充满整个屏幕。

8、css中的颜色

css中颜色的分类

  • 标准色

  • 十六进制颜色

  • 三原色RGB（Red，Green，Blue）

  • HSL(css3提出)

CSS 中提供了一些属性（例如 color、background）来设置 HTML 元素的颜色（例如元素的背景颜色或字体颜色），我们可以通过不同形式的值来指定颜色，如下表所示：

值描述实例
颜色名称使用颜色名称来设置具体的颜色，比如 red、blue、brown、lightseagreen 等，颜色名称不区分大小写color: red;
十六进制码使用十六进制码以 #RRGGBB 或 #RGB（比如 #ff0000）的形式设置具体颜色，"#" 后跟 6 位或 3 位十六进制字符（0-9, A-F）color: #f03;
RGB通过 rgb() 函数对 red、green、blue 三原色的强度进行控制，从而实现不同的颜色color: rgb(155,0,51);
RGBARGBA 扩展了 RGB，在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 rgba() 函数实现color: rgba(155,0,0,0.1);
HSL通过 hsl() 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色color: hsl(120,100%,25%);
HSLAHSLA 扩展了 HSL，在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 hsla() 函数实现color: hsla(240,100%,50%,0.5);

实际开发中使用取色器取色就ok，这么多颜色也记不住。 

1. 颜色名称

使用颜色名称来设置颜色是最简单的方法。CSS 中定义了一些表示颜色的关键字，如下表中所示，使用这些关键字可以轻松的为元素设置颜色。

h1 {  color: red;}
p {   color: blue;}

2、十六进制颜色

十六进制码是指通过一个以#开头的 6 位十六进制数（0 ~ 9，a ~ f）表示颜色的方式，这个六位数可以分为三组，每组两位，依次表示 red、green、blue 三种颜色的强度，若每组的两个十六进制数相等，则可以缩写为1个，例如：

body{background-color: #ff89d1;}

3、RGB

RGB 是 red、green、blue 的缩写，它是一种色彩模式，可以通过对 red、green、blue 三种颜色的控制来实现各式各样的颜色。CSS 中要使用 RGB 模式来设置颜色需要借助 rgb() 函数，函数的语法格式如下：

rgb(red, green, blue)

  • 其中 red、green、blue 分别表示三原色红、绿、蓝的强度，

  • 这三个参数的取值可以是 0~255 之间的整数，

  • 也可以是 0%~100% 之间百分比数值。

如下例所示：

div{color:rgb(199,125,134,0.8)}

4、 RGBA

RGBA 是 RGB 的扩展，在 RGB 的基础上又增加了对 Alpha 通道的控制，Alpha 通道可以设置颜色的透明度。

您需要借助 rgba() 函数来使用 RGBA 模式，该函数需要接收四个参数，除了 red、green、blue 三种颜色的强度外，还需要一个 0~1 之间的小数来表示颜色的透明度，其中 0 表示完全透明，1 表示完全不透明。rgba() 函数的语法格式如下：

rgba(red, green, blue, alpha);

其中 red、green、blue 分别表示三原色红、绿、蓝的强度，alpha 表示颜色的透明度，例如：

h1 { color: rgba(255, 0, 0, 0.5);}
p { color: rgba(0, 255, 0, 1);}

小结

  • 标准色在开放中一般不会使用。因为颜色太重页不精准。所以UI设计的时候几乎不会考虑标准色

  • 常用的使用：十六进制和rgb来进行定义会比较多.

  • 在使用十六进制码表示颜色时，如果每组的两个十六进制数是相同的 例如 #00ff00、#ffffff、#aabbcc，则可以将它们简写为 #0f0、#fff、#abb。

  • 但是更加建议大家使用浏览器来进行学习和观察。因为浏览器的调试工具会清楚的把每一种颜色显示出来。

9、css的基本选择器

1、标签选择器

使用html标签作为选择器，不足以界定和区分模块。

只在一个场景下使用，就是剔除每个元素的默认样式。因为不同浏览器在实现标签时有不同的样式，为了保持一致性，所以剔除默认样式。

    <style>
        div {
            background: red;
        }
    </style>

2、id选择器

id是唯一的，对于定义样式，最好不要使用id，没有复用性。（id适用于js）

<style>
        #span1,
        #span2,
        #span3,
        #span4{color:gold}
</style>

<body>

    <span id="span1">1111</span>
    <span id="span2">2222</span>
    <span id="span3">3333</span>
    <span id="span3">4444</span>

</body>

3、类选择器

class选择器，可以定义多个，多个之间用空格隔开

<style>
    .span1{color: gold;}
    .span2{color: silver;}
</style>



<body>

    <span class="span1">1111</span>
    <span class="span2">2222</span>
    <span class="span1">1111</span>
    <span class="span2">2222</span>

</body>

4、通配符选择器

        /*一般条件不用，*表示全部 */
        *{margin: 0;padding: 0;}

10、css的高级选择器

css层叠样式表：

因为基本选择器存在一些问题，只能给单一的元素进行设定对应的css样式，没办法达到css复用，继承的理念。那么就失去了css样式列表的价值。如果要实现复杂的网页，肯定会定义很多class选择器或者,id选择器，而且都是全局的。也就是没有约束的概念呢。所以w3c在定义css1.0版本的时候就已经考虑这个问题了，分别从：

  • 继承

  • 复用

  • 约束

来制定css的标准和规范。

1、层次选择器

选择器说明
M N后代选择器，选择M元素内部后代的N元素（所有N元素）
M>N子代选择器，选择M元素内部子代的N元素（所有第1级N元素）
M~N兄弟选择器，选择M元素后所有的统计N元素
M+N相邻选择器，选择M元素相邻的下一个N元素（M、N是同级元素）

 后代选择器

理解：

后代选择器 ：理解一个M家里有N儿子，孙子，重孙等等。使用后代选择器就是快速把这些：“儿子”，“孙子”，“重孙”找出来，进行操作（就是增加样式啦）。

通过多个后代，我们可以建立多个约束，每约束一层，复用性就会降低一些，通过多层约束，可以将样式只赋予到一层之上。（建立适当的层级，以此确定合适的复用性）

语法：M N{}

 .first .second{  
     background: red;  
 }

说明：

在后代选择器中，M元素与N元素用空格隔开，表示选中M元素内部后代的N元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style type="text/css">
        
        #first p {
            color: red
        }

        .box .box2{background-color: green;}

    </style>
</head>

<body>

    <div id="first" class="box">
        <p>Children-子元素</p>
        <p class="p1">Children-子元素</p>
        <div id="second" class="box2">
            <p class="p2">Children-子元素的子元素</p>
            <p class="p2">Children-子元素的子元素</p>
        </div>
        <p class="p1">Children-子元素</p>
        <p>Children-子元素</p>
    </div>

</body>

</html>

</html>

父子选择器

理解：

父子选择器：理解，家族里有儿子，孙子。但是现在只找儿子。后面的就不去查找了。

语法：M>N

 body>p{
     background: pink;  
 }

说明：子代选择器用于选中元素内部的某一个子元素。

    <style>
        
        .father > .son{color: red;background-color: green;border: 2px solid #111;margin: 10px 0;}

    </style>


<body>

    <div class="father">
        <div class="son">first SON</div>
        <div class="son">
            <div class="son">SON - son</div>
            <div class="son">SON - son</div>
        </div>
    </div>

</body>

相邻选择器

理解： 在一个家族中，我们找到比自己小的第一个兄弟进行照顾。

语法：M+N{}

 .active+p {
     background: green;
 }

说明：在兄弟选择器中，表示M元素后面的的所有某一兄的元素

    <style type="text/css">
       
    .bro + .brother{background-color: aqua;}

    </style>

<body>

    <div class="brother">brother</div>
    <div class="bro">bro</div>
    <div class="brother">brother</div>
    <div class="brother">brother</div>
    <div class="brother">brother</div>

</body>

兄弟选择器

理解： 在，我们找到比自己小的兄弟进行照顾。

语法：M ~ N{}

 .active~p{  
     background: yellow;  
 }

说明：在相邻选择器中，M元素和N元素之间使用~符号，表示选中M元素后面的兄弟元素

    <style type="text/css">
       
    .bro ~ .brother{background-color: aqua;}

    </style>

<body>

    <div class="brother">brother</div>
    <div class="bro">bro</div>
    <div class="brother">brother</div>
    <div class="brother">brother</div>
    <div class="brother">brother</div>

</body>

2、结构伪类选择器

属性描述
E:first-child选择父元素里边的第1个子元素
E:last-child选择父元素里边的最后1个子元素
E:nth-child(n)选择父元素里边第n个子元素
E:nth-last-child(N)选择父元素里边倒数第n个子元素
E:first-of-type(n)选择父元素具有指定的类型的第一个元素
E:last-of-type(n)选择父元素具有指定的类型的最后一个元素
E F:nth-of-type(n)选择父元素具有指定类型的第N个F元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*找到第一个元素*/
        ul li:first-child {
            font-size: 40px;
            color: #ccc;
        }

        /*找到最后一个元素*/
        ul li:last-child {
            font-size: 40px;
            color: #ccc;
        }

        /* - nth-child() 选择父元素里边的第n个子元素,将所有的子元素进行排序,不分种类
        注:n是从0开始,0,1,2,3.......为啥0没有效果呢，因为没有第0个元素，所以书写的时候从1开始哦 */
        ul li:nth-child(2) {
            font-size: 24px;
            color: red;
        }

        /* 选择父元素里边倒数第n个子元素 */
        ul li:nth-last-child(3) {
            font-size: 40px;
            color: red;
        }

        /* 选择父元素里边偶数项的子元素 :nth-child(2n)  2n或者even */
        ul li:nth-child(2n) {
            font-size: 20px;
            color: blueviolet;
        }

        /* 选择父元素里边奇数项的子元素 :nth-child(2n+1)  2n+1或者2n-1或者odd */
        ul li:nth-child(2n+1) {
            font-size: 20px;
            color: red;
        }

        /* nth-child(-n+i) 选择父元素里前i项子元素 */
        ul li:nth-child(-n+4) {
            font-size: 24px;
            color: cadetblue;
        }

        /* nth-child(n+i) 从第i项开始到最后一项结束 */
        ul li:nth-child(n+7) {
            font-size: 40px;
            color: yellow;
        }

        /* 选择父元素里边4的倍数项的子元素 */
        ul li:nth-child(4n) {
            font-size: 35px;
            color: darksalmon;
        }
    </style>
</head>



<body>
    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
        <li>我是第6个li标签</li>
        <li>我是第7个li标签</li>
        <li>我是第8个li标签</li>
        <li>我是第9个li标签</li>
    </ul>
</body>


</html>

3、属性选择器

属性描述关系
E[attr]选择匹配具有属性attr的E元素匹配
E[attr=val]选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）相等
E[attr^=val]选择匹配具有属性attr以val开头的任意E元素以属性值开头
E[attr$=val]选择匹配具有属性attr以val结尾的任意E元素以属性值结尾
E[attr*=val]选择匹配具有属性attr包含val的任意E元素包含
<!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>
        /*1:   标签名[属性] ----关系：匹配关系*/
        /*2:   标签名[属性="属性值"] --关系：相等 */
        /*3:   标签名[属性^="属性值"] ---关系：以属性值开头*/
        /*4:   标签名[属性$="属性值"]---关系：以属性值结尾 */
        /*5:   标签名[属性*="属性值"] ---关系：包含关系*/

        input[type$='t'] {
    background: red;
}
    </style>
</head>

<body>

    <form action="" method="post">
        <p>姓名：<input type="text"></p>
        <p>密码：<input type="text" name="" id=""></p>
        <p>性别：<input type="text" name="sex" id=""></p>
        <p><input type="submit" value="提交"></p>
    </form>

</body>

</html>

E[attr]属性选择器

  • 关系：匹配关系

input[type] {
    background: red;
}

E[attr=val]属性选择器

input[type='text'] {
    background: red;
}

E[attr*=val]属性选择器

input[type*='t'] {
    background: red;
}

E[attr^=val]属性选择器

input[type^='p'] {
    background: red;
}

E[attr$=val]属性选择器

input[type$='t'] {
    background: red;
}

4、组合选择器

组合选择器：其实就是一种复用和抽象的一种思想，这里选择器和层次选择器一样会使用的非常的多，它的作用就是把：一类相关的样式用逗号进行分离，然后享受相同的样式效果。

html,
body,
div,
span,
/*省略若干*/
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

11、伪元素

css伪元素用户以设置元素指定部分的样式。

1、前伪元素

  • 在盒子的最前边生成伪元素,伪元素相当于行内元素,可以转成块元素

  • content:'' 为必写项

.box::before {
    content: 'Hello World';
    width: 30px;
    height: 30px;
    background-color: red;
}

2、后伪元素

在盒子的最后边生成伪元素,伪元素相当于行内元素，content:'' 为必写项

.box::after {
    content: 'World Hello';
    background-color: yellow;
}

12、css样式优先级

Css优先级和优先顺序

！important > 内联（行内）样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器*

各项示例:

  • 内联（行内）样式：写在标签属性style的样式，如 <p style="color=red">

  • ID选择器，如#id{…}

  • 类选择器，如 .class{…}

  • 属性选择器，如 input[type="email"]{…}

  • 伪类选择器，如a:hover{…}

  • 伪元素选择器，如 p::before{…}

  • 标签选择器，如 input{…}

  • 通配选择器，如 *{…}

具体的讨论很多很多，我觉得最主要的是：行内样式 style > 内部样式 (head+style) > 外部样式 (link+cssFile) 

优先级把握不住的话，直接浏览器打开查看就行了，从上至下就是优先级顺序。

小结 

  • 如果有！important，只用看他自己
  • 如果有行内，就不用看内部和外部了
  • 如果没有行内，那就要看内部和外部了，先分析完内部之后，再分析外部，分析完毕后，再看他们的优先级

13、盒子模型

盒模型概述

在css中，几乎所有的元素都被一个个“盒子box” 包裹着。理解box，是进行精准布局以及处理元素排列的关键。

  • 最内层是：content也就是用来存放内容，图片的区域。也就说的内容的宽高

  • 第二层：padding内填充区域。

  • 第三层：border边框区域

  • 最外层：margin外边距

padding

padding: 英文翻译过来是：填充，覆盖的含义。也称之为：内填充

<!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>padding的认识</title>
    <style>
        /*
            padding: 英文翻译过来是：填充，覆盖的含义。
            所以从字面意义就已经明白，它是一个往元素内部挤压和填充的效果
        */
        
        .box {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            /*基本定义*/
            /* padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px; */
            /*padding组合定义*/
            padding: 10px;
        }
        
        .container {
            background: #eee;
            overflow: hidden;
        }
        
        .box:nth-child(1) {
            background: red;
        }
        
        .box:nth-child(2) {
            background: greenyellow;
        }
        
        .box:nth-child(3) {
            background: goldenrod;
        }
        
        .box:nth-child(4) {
            background: aquamarine;
        }
        
        .box:nth-child(5) {
            background: bisque;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box box1">天青色等烟雨</div>
        <div class="box box2">天青色等烟雨</div>
        <div class="box box3">天青色等烟雨</div>
        <div class="box box4">天青色等烟雨</div>
        <div class="box box5">天青色等烟雨</div>
    </div>
</body>

</html>

margin

margin: 英文翻译过来是：边缘，边距的含义。所以从字面意义就已经明白，它是指给一个元素增加以后，别的元素靠近以后产生的间隔。

<!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>margin的认识</title>
    <style>
        /*
            margin: 英文翻译过来是：边缘，边距的含义。所以从字面意义就已经明白
            ，它是指给一个元素增加以后，别的元素靠近以后产生的间隔。
            **常规定义：**
            margin-top:10px;
            margin-right:10px;
            margin-bottom:10px;
            margin-left:10px;

            **组合定义padding的几种方式：**
            margin:上右下左
            margin:上下 左右
            margin:上 左右  下
            margin:上 右 下 左

        */
        
        .box {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            /*基本定义*/
            /* margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px; */
            /*margin组合定义*/
            margin: 10px;
        }
        
        .container {
            background: #eee;
            overflow: hidden;
        }
        
        .box:nth-child(1) {
            background: red;
        }
        
        .box:nth-child(2) {
            background: greenyellow;
        }
        
        .box:nth-child(3) {
            background: goldenrod;
        }
        
        .box:nth-child(4) {
            background: aquamarine;
        }
        
        .box:nth-child(5) {
            background: bisque;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box box1">天青色等烟雨</div>
        <div class="box box2">天青色等烟雨</div>
        <div class="box box3">天青色等烟雨</div>
        <div class="box box4">天青色等烟雨</div>
        <div class="box box5">天青色等烟雨</div>
    </div>
</body>

</html>

盒模型 

  • 标准盒模型，

    • 记住：真实宽度 = （内容宽度是内容宽度width，内边距是内边距padding，边框是边框border） + 外边距margin。三者是共同来维持

    • 样式属性是： box-sizing: content-box;

  • 怪异盒模型：

    • 记住：真实宽度 = （内边距padding + 边框border +内容宽度（文字或者图片）宽度 ） + 外边距margin,宽度固定的，内边距和边框增加直接从宽度中去瓜分。从而内容内容的宽度在减少。也就是说：140px是固定值，是多少就多少。不会随着内边距和边框的增加而改变。

    • 样式属性是： box-sizing: border-box;

<!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></title>
    <style>
        .box1 {
            width: 200px;
            height: 300px;
            background: rgb(205, 68, 91);
            margin: auto;
            float: left;
            margin-left: 10px;
            padding: 10px;
        }

        .box2 {
            width: 100%;
            height: 100%;
            background: green;
            padding: 20px;
            border: 2px solid;
            /* 怪异盒模型，增加padding和border后，会自动减少content的宽度 */
            /* box-sizing: border-box; */
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            比如：一款名为“银杏叶”的药品，单支开票价25.28元，比底价（8.5元）高出1.97倍。调查发现，其中医生提成为4元；另有头孢唑肟钠，底价6.5元，开票价16.5元，医生每支可拿2.5元提成。根据测算，药品普遍提成都可以达到开票价和底价差额的20%以上！

        </div>
    </div>

    <div class="box1">
        比如：一款名为“银杏叶”的药品，单支开票价25.28元，比底价（8.5元）高出1.97倍。调查发现，其中医生提成为4元；另有头孢唑肟钠，底价6.5元，开票价16.5元，医生每支可拿2.5元提成。根据测算，药品普遍提成都可以达到开票价和底价差额的20%以上！
    </div>
</body>

</html>

标准盒模型：

想消除这种影响的话，可以增加外层盒子的宽度或减小内层盒子的宽度。

怪异盒模型：

14、可视区域

可视区域：就是用户在访问网站中你可以看到的内容区域。我们也可以称之为视口 viewport ，这种可视区域分为：平铺或者居中，前端更多使用内容居中，后台更多使用平铺。

学习可视区域的目的：为了视频不同的屏幕大小

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 20px;
        }
        
        .container {
            /*当页面宽度大于max-width时，页面宽度为设定宽度，小于max-width时会变成100%*/
            max-width: 1480px;
            margin: 0 auto;
            background: red;
            padding: 10px;
        }
        /*小于1600px的时候，使用1180px布局，颜色绿色*/
        
        @media screen and (max-width: 1600px) {
            .container {
                max-width: 1180px;
                background: green;
            }
        }
        /*小于1200px的时候，使用960px布局，颜色粉红色*/
        
        @media screen and (max-width: 1200px) {
            .container {
                max-width: 960px;
                background: pink;
            }
        }
    </style>
</head>

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

</html>

 15、文档流

概述

文档流：将一个块级元素(div)放入容器中，它会像水流一样，自动铺满容器，将内联元素(span)放入，它会依次排列下去，一行放不下了就换下一行。如果整体高度超过容器，就会溢出。

特点：

  • 自上而下排列，

  • 内容从左到右存放，放满整个浏览器才会换行

文档流的控制

  • 块元素-display:block–有文档流,受宽度高度，受内外边距的影响

  • 行内块元素—display:inline-block – 没有文档流，受宽度高度，受内外边距的影响

  • 行内元素(内联元素) ——display:inline—-没有文档流，不受宽度高度，受左右内外边距的影响

16、破坏文档流

为什么要破坏文档流：

如果是文档流的元素都是自上而下的方式定义，破坏文档流可以让块元素从上下排列变成左右排列。即为了将块元素变成左右排列。

display降级

使当前元素脱离默认文档流，可以使用降级：把块元素的display:block—display:inline-block 。

float 浮动

使当前元素脱离默认文档流，相当于让元素浮动了起来。再按照代码的先后顺序依次从左至右(float:left;) / 从右至左(float:right)排开，直到其margin遇见父级元素padding或其他浮动元素的边缘。

而最早定义浮动的目的是：就是为了实现文字环绕效果

BFC

BFC(block formatting context)，块级格式化上下文。

如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。

使用方式给元素增加：overflow:hidden;

position: absolute/fixed

position: absolute跟float其实很像，都能破坏正常的文档流，都能BFC，都有包裹性，一个div设置了position: absolute后，宽度会缩到刚好包裹住内部所有元素为止。通常网页的组件都会使用position来完成。

一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里?

flexbox & grid

flexbox和grid全新的布局方式，很轻松的去实现排兵布阵，也不会出现浮动所谓的浮动塌陷问题，以及对齐问题。

总结

  • 盒模型：告诉我们每个元素都有一个盒模型，对应的样式属性是：box-sizing:content-box，在未来进行布局定位的时候一定要明白，在标准盒模型下，padding,border的改变会改变元素自身的宽度，如果同时外边距的也设定了，都会增大外层盒子的宽度。而在怪异盒模型box-sizing:border-box下就不会。

  • 可视区域：告诉我们，在设计网页的时候要去考虑不同电脑的兼容性，你的视口的定义就必须要找到一个合理的值，当然如果你配合@media查询样式属性，就可以兼容各种设备的现实方式。

  • 文档流，告诉我们。每个元素的定义和他们的规则，增加间距padding和margin,以及宽度和高度，在块和行内块都有效，但是行内元素除了左右间距有效，其它都无效。

17、浮动布局

float概述

使用float设定的元素可以漂浮起来。使当前元素脱离文档流，再按照代码的先后顺序依次从左至右(float:left;) / 从右至左(float:right)排列，直到它的外边界碰到父元素的内边界或者另外一个浮动元素的外边界为止，是css布局中实现左右布局一种方式。

案例：未加浮动布局

<!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>
        body{
            border:1px solid #000;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            border: 5px #ff0000 solid;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            border: 5px #00eaff solid;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
   
</body>
</html>

可以看到，每个div元素都有自己的文档流，自上而下排列。

.box1增加浮动布局后

    <style>
        body{
            border:1px solid #000;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            border: 5px #ff0000 solid;
            float: left;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            border: 5px #00eaff solid;
        }
    </style>

可以看到 ，两个盒子重叠在一起了。

  • 因为.box1增加了浮动布局，失去了文档流，漂浮起来了，box2自然就向上了。也就是说绿色盒子的位置是高于红色盒子的。
  • box2盒子具有文档流。

.box1 增加float：right后

    <style>
        body{
            border:1px solid #000;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            border: 5px #ff0000 solid;
            float: right;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            border: 5px #00eaff solid;
        }
    </style>

可以看到，.box1的绿色盒子就单独进行排列在最右侧 ，现在就属于.box1遇到了父元素的内边界了。直接这放在body的最右侧

两个盒子都增加float:left

    <style>
        body{
            border:1px solid #000;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            border: 5px #ff0000 solid;
            float: left;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            border: 5px #00eaff solid;
            float: left;
        }
    </style>

两个或者多个浮动与元素都会放在另外一个浮动元素的后面。

两个盒子都增加float:right

    <style>
        body{
            border:1px solid #000;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            border: 5px #ff0000 solid;
            float: right;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            border: 5px #00eaff solid;
            float: right;
        }
    </style>

 无论是左浮动还是右浮动，一定是第一个元素先过去，然后后面的元素跟随，讲究个先来后到的原则

浮动塌陷

浮动布局存在的问题也很明显，如果所有的元素都浮动起来以后，可能会影响后面元素排列。

<!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>
        body{
            border:1px solid #000;
            margin: 20px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: green;
            float:left;
        }

        .box2{
            width:200px;
            height: 200px;
            background: red;
            float:left;
        }

        /* 使用clear清除浮动 */
        /* .box3{clear: both;} */
    </style>
</head>
<body>

    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">我是后面的元素</div>
   
</body>
</html>

box1和box2都浮动起来，就没有文档流了，box3因为没有浮动，自然就上位，直接占用原来.box2或者.box2的元素为止。

清除浮动

clear清除浮动

/* 使用clear清除浮动 */
    .box3{clear: both;}

我们进行元素浮动的时候，往左和往右都可以实现左右结构布局，所有有可能往左，有可能往右。所以一般清除浮动是把两边都清除，也就是定义：clear:both .  

添加浮动清除空元素

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

        .box1{
            width: 200px;
            border:1px solid #000;
        }

        .box2{
            width:100px;
            height: 100px;
            background: red;
            float:left;
        }

        .clearfix{
            clear: both;
        }

    </style>
</head>
<body>

    <div class="box1 ">
        <div class="box2"></div>
        <!--空标签解决浮动清除的问题-->
        <div class="clearfix"></div>
    </div>
   
    <div>我是下面元素</div>
   
   
</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>

        .box1{
            width: 200px;
            border:1px solid #000;
        }

        .box2{
            width:100px;
            height: 100px;
            background: red;
            float:left;
        }

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

    </style>
</head>
<body>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
   
    <div>我是下面元素</div>
   
   
</body>
</html>

  • ::after / ::before设定的时候，必须要指定content:"",同时要明白，定义的伪元素是行内元素

  • 而浮动清除必须是块元素。就有了display:block 升级的过程。

18、定位Position

position的含义：定位，安置，位置的意思。也就是说设置position的属性，可以把该属性安放或者放置到页面的任何位置。

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

  • 可以通过：z-index 来设置定位元素的层次

相对定位relative

特点：

  • 注意改变它们位置的方式都是：top,left,right,bottom

  • 相对定位的元素是：当前元素自身在文档中的正常位置偏移给定的值。

  • 它的特点是：

    • 也不会清除文档流。

    • 不会改变别的元素的位置

    • 相对于自身进行位移

<!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>相对定位relative</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: pink;
            position: relative;
            top: 100px;
            left: 100px;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background: rgb(204, 146, 71);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

正常情况下box2的位置应该位于box1的正下方，由于relative的关系距上，距左100px。

绝对定位absolute

特点：

  • 注意改变它们位置的方式都是：top,left,right,bottom

  • 绝对定位的元素是：相对于指定非static的祖先元素进行偏移定位，如果没有找到就相对于浏览器的可视区进行偏移定位。

  • 它的特点是：

    • 会让元素本身脱离文档流

    • 绝对定位的元素也也不占据任何的空间

    • 具备内联盒子的特征：元素的宽度由内容来决定。和float有点类似

    • 具备块元素盒子的特征：支持所有的样式

    • absolute元素并会受到滚动条的影响

    • 一般用于布局中的贴片或者组件比较多。

<!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>绝对定位absolute</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            border:1px solid #000;
            position: relative;
        }

        .box2 {
            width:300px;
            height: 300px;
            word-wrap:break-word;
            background: pink;
            border: 1px solid #666;
            margin: 50px;
            /*以最近的祖先元素为准*/
            position: relative;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background: antiquewhite;
            position: absolute;
            top:100px;
            left:100px;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
    </div>
</body>

</html>

固定定位fixed

特点：

  • 注意改变它们位置的方式都是：top,left,right,bottom

  • 固定定位和绝对定位很类似，但是fixed会把元素固定在可视区中

  • 会让元素本身脱离文档流

  • 固定定位的元素也也不占据任何的空间

  • 具备内联盒子的特征：元素的宽度由内容来决定。和float有点类似

  • 具备块元素盒子的特征：支持所有的样式

  • 固定元素不受祖先元素的影响

  • fixed元素并不会受到滚动条的影响

  • 一般用于布局中广告，导航，置顶，弹窗，消息框等等。

<!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>相对定位relative</title>
    <style>
        body{
            height: 1000px;
        }

        .box1 {
            width: 400px;
            height: 400px;
            border:1px solid #000;
            position: relative;
        }

        .box2 {
            width:300px;
            height: 300px;
            word-wrap:break-word;
            background: pink;
            border: 1px solid #666;
            margin: 50px;
            /*以最近的祖先元素为准*/
            position: relative;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background: antiquewhite;
            position:  fixed;
            top:0;
            left:0;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
    </div>
</body>

</html>

粘性定位sticky

特点：

  • 注意改变它们位置的方式都是：top,left,right,bottom

  • 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定的阈值前为相对定位relative,之后为fixed固定定位

<!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>粘性定位sticky</title>
    <style>

        body{
            height: 2000px;
        }

        .box1 {
            height: 30px;
            border:1px solid #000;
            position: sticky;
            top:10px
        }

    </style>
</head>

<body>
    <p>aaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaa</p>
    <div class="box1">我是一个盒子</div>
    <p>aaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaa</p>

</body>

</html>

        css还有一些内容，如弹性布局flex，网格布局grid，但我确实有点学不下去了，我学习前端的目的一开始就是为了对前端有所了解，能够大概看懂代码。但是css学起来实在太多了，对于一个没有艺术细胞，没有设计细胞的我来说设计起来确实很难受，剩下的我就不看了，如果以后有需要，那就边看遍查吧。或者等我啥时候心能静下来，再继续学习吧。目前是不想在学css了，接下来去看看js吧。


http://www.kler.cn/a/454296.html

相关文章：

  • MongoDB 创建用户、User、Role 相关 操作
  • Excel无法插入新单元格怎么办？有解决方法吗？
  • 嵌入式单片机中Flash存储器控制与实现
  • jumpserver docker安装
  • 详细解读SAQ评级
  • 面向微服务的Spring Cloud Gateway的集成解决方案：用户登录认证与访问控制
  • 随时随地编码，高效算法学习工具—E时代IDE
  • PDF书籍《手写调用链监控APM系统-Java版》第10章 插件与链路的结合：SpringBoot环境插件获取应用名
  • Uniapp 微信小程序检测新版本并更新
  • 数据分析的常见问题及解决方案
  • 安全合规遇 AI 强援：深度驱动行业发展新引擎 | 倍孜网络CEO聂子尧出席ICT深度观察报告会！
  • C++-----------映射
  • Java Spring Boot 项目中嵌入前端静态资源：完整教程与实战案例
  • 模板方法、观察者模式、策略模式
  • Security知识点分享之高级安全安装虚拟机
  • 电商数据的安全与隐私保护：API接口的角色
  • 开源代码寻找平台总结
  • 【数据结构】【线性表】栈在算术表达式中的应用
  • McDonald‘s Event-Driven Architecture 麦当劳事件驱动架构
  • 分布式 IO 模块助力冲压机械臂产线实现智能控制
  • 基于python+django的旅游信息网站-旅游景点门票管理系统
  • 树莓集团：数字化产业园建设运营推动数字经济
  • 极狐GitLab 17.7正式发布，可从 GitLab 丝滑迁移至极狐GitLab【二】
  • “鼎和财险一体化数据安全管控实践”入选信通院金融领域优秀案例
  • QT样式学习-侧边栏隐藏和滑出
  • c# RSA加解密工具，.netRSA加解密工具