前端基础学习——CSS样式表制作设计基础

╰半橙微兮° 2023-09-28 13:41 119阅读 0赞

> 前面还有一章，想了解的朋友可以往前面看看：[前端基础学习——你必须掌握的CSS的知识][CSS]

--------------------

**目录**

一. 盒子模型

1.1.外边距样式

1.2.边框样式

1.3.内边距样式

1.4.总结：盒子模型尺寸

二. 元素默认样式与CSS重置

三. 元素分类

3.1.三种元素

3.1.1 块级元素（block level）

3.1.2 内联元素（inline 行内元素）

3.1.3 块级内联元素

3.2.块状元素与内联元素的盒子模型

四. 盒子模型中的其他样式

4.1.显示与隐藏

4.2.内容溢出处理

五. 新盒子模型

六. 元素定位

6.1 静态定位（文档流定位）

6.2 相对定位

1.3.绝对定位

1.4.固定定位

6.5 元素定位总结

6.6 z-index样式

七. 页面布局概述

八. 弹性布局（弹性盒子）

8.1 重要概念：主轴与侧轴

8.2 flex-direction样式

8.3 flex-wrap样式

8.4 justify-content样式

8.5 align-items与align-content样式

8.6 flex样式

九. 布局实例

9.1 典型1-3-1布局

9.2 典型自适应高度后台管理布局

十. 前端学习专栏

--------------------

## 一. 盒子模型 ##

> 每个HTML元素都可以看作一个装了东西的盒子：
> 
>  *  宽度、高度：盒子本身具有宽度（width）和高度（height）
>  *  内边距：盒子里面的内容到盒子边框之间的距离即内边距（padding）
>  *  边框：盒子本身有边框（border）。
>  *  外边距：盒子边框外和其他盒子之间，还有外边距（margin）

> 标准盒子模型示意图：

![41adec66c3163fe3df352eadeaaf14cd.png][]

### 1.1.外边距样式 ###

![69117d786fe9c834c2d75dc221e6e827.png][]

> 外边距实战应用：盒子水平居中

p{
        width:200px;
        margin:0 auto;
    }
    <p>这是一个段落</p>

### 1.2.边框样式 ###

> 边框样式主要有三种：
> 
>  *  border-width： 设置或检索对象边框宽度。
>  *  border-style： 设置或检索对象边框样式。
>  *  border-color： 设置或检索对象边框颜色。

![0bf118aaaed1f14f1ef680ba0389d651.png][]

![35f5fa583c4d97063c562d31c5781ac3.png][]

![a5fbb1c792c0a5202a3aa7a9197e4085.png][]

> **注意：**也可以同时设置边框的宽度、样式、颜色属性： border: \#00FF00 4px double; （属性设置没有顺序）

### 1.3.内边距样式 ###

![cff344f0634ad6b1b79a3f554f90cc7d.png][]

### 1.4.总结：盒子模型尺寸 ###

>  *  盒子模型总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度
>  *  盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

--------------------

## 二. 元素默认样式与CSS重置 ##

> 常用元素默认样式：
> 
> 1.  标签的margin为8px
> 2.  p标签的上下外边距为16px
> 3.  h1标签的上下外边距为21.440px
> 4.  ul标签的上下外边距也为16px，左内边距也为40px

> **CSS重置：**在实际开发中，为了兼容性，也为了开发者更好的设置自己想要的样式，那么凡是浏览默认的样式，都不会使用，这就是CSS重置。

/********************** 这是一个最简单的CSS重置 **********************/
    body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,span,a,img,form{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }

--------------------

## 三. 元素分类 ##

### 3.1.三种元素 ###

> 元素分类有三种：行级元素（内联元素）、块级元素、行内块级元素

#### **3.1.1 块级元素（block level）** ####

<div></div>
    <p></p>
    <ul></ul>
    <h1></h1>
    ... ...

#### **3.1.2 内联元素（inline 行内元素）** ####

<span></span>
    <a></a>
    <strong>
    一段文字(匿名内联元素)
    ... ...

#### **3.1.3 块级内联元素** ####

<img>
    <table></table>
    <form></form>
    ... ...

### 3.2.块状元素与内联元素的盒子模型 ###

>  *  内联元素从左到右横向排列，到最右端自动折行，即不独占一行 块级以块状显现，并和同级块依次垂直排列，左右撑满，即独占一行。
>  *  块级元素可以包含内联元素和块级元素(P标签不能包含P标签)。 但内联元素不能包含块级元素。
>  *  内联元素与块级元素属性的不同，还主要体现在盒模型属性上。
> 
> 1.  内联元素它的宽度和高度是自动的、也就是由内容撑开的。因此设置width无效，height无效。但可以设置line-height。
> 2.  内联元素的border无效，margin上下无效，padding上下无效。也就是padding和margin的left和right是可以设置的 。
> 
>  *  img比较特殊，它的border，margin，padding是有效的。

--------------------

## 四. 盒子模型中的其他样式 ##

### 4.1.显示与隐藏 ###

> display样式有两个功能：
> 
>  *  控制元素的显示和隐藏
>  *  块级元素与行级（内联）元素的转变

> display样式的值有如下几种：

![bdf569595c83dc36318452fce6157d9c.png][]

### 4.2.内容溢出处理 ###

> 如果块的尺寸是固定的，而内容却有可能超出其尺寸时，可以使用overflow。

> overflow属性：设置当对象的内容超过其指定的高度或宽度时如何处理内容。

![d08858e2e55d7047928bf86dc0341cb6.png][]

--------------------

## 五. 新盒子模型 ##

> CSS3之前的盒子模型，可以说是content-box型盒子，即宽和高为内容，我们通常称为内容盒子。如果一个盒子有边框、或内边距等设置，那么就要注意了，内容盒子的总体宽和高就会比width与height的实际尺寸要大。这种现象给我们在网页布局中造成了一定的困扰。
> 
> CSS3之后新增了一种盒子模型，可以说是border-box型盒子，即宽和高为边框，我们通常称为边框盒子。边框盒子的总体尺寸不会受到边框、或内边距的影响，总体尺寸始终等于width与height的设置。
> 
> 那么，可以使用box-sizing属性来设置盒子模型类型，此属性值有两个：
> 
>  *  border-box：边框盒子。
>  *  content-box：内容盒子（默认）。

div{
        width: 200px;
        height: 200px;
        /*值有两个： border-box：边框盒子； content-box：内容盒子（默认）*/
        box-sizing: border-box;   
        padding: 30px;
        background-color: orange;
        border: solid 30px blue;
        margin: 50px;
    }

> 总结：使用了边框盒子，就可以任意设置内边距、边框了，而且不用担心会改变盒子的总体尺寸。

--------------------

## 六. 元素定位 ##

> 为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。

> 元素定位有四种，可以使用position样式来设置元素定位，所以此属性值有四种：
> 
>  *  static：静态定位（默认）。依据文档流定位。
>  *  relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
>  *  absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。
>  *  fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

### 6.1 静态定位（文档流定位） ###

> 静态定位：默认。依据文档流定位。

> 特点：
> 
>  *  将页面上的元素，按照html的书写顺序，从上到下，从左到右，依次排列。
>  *  内联元素不独占一行，块级元素独占一行。

![11eac30945b493f0ad71eb4289c98891.png][]

<p>这是一个p标签</p>
    <a href="">跳转百度</a>
    <span>这是一个内联的span标签</span>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>

### 6.2 相对定位 ###

> 相对定位：以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。

> 特点：
> 
> 1.  以自身为基准定位。
> 2.  不脱离文档流。也就是说：相对定位元素仍然会被文档流中的其它元素所影响。
> 3.  根据坐标定位到新位置之后，并不回收原位置空间。

![4656954622f6990a19e9045127599c9d.png][]

### 1.3.绝对定位 ###

> 绝对定位：以父元素为基准，设置坐标，脱离文档流。

> 特点：
> 
> 1.  脱离文档流。也就是说：绝对定位元素将不在被文档流中的其它元素所影响。
> 2.  根据坐标定位到新位置之后，原位置空间会被回收。
> 3.  如果父元素也为relative或absolute定位，那么就以父元素为基准。
> 4.  如果父元素不是relative定位，也不是absolute定位，那么一律以body为基准。

![d8dde6a98117650a4f5eb877e4ea9ea3.png][]

### 1.4.固定定位 ###

> 固定定位：以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

> 特点：
> 
>  *  元素始终固定在某个坐标位置，body以及body中的任何元素都不会对其产生任何影响。

![ffd5a93eda0a5ba14424e8c6296ebf79.png][]

### 6.5 元素定位总结 ###

>  *  绝对定位不能有效扩展和维护。只能应用在某个局部。
>  *  相对定位只限制自身，只能应用在某个局部。
>  *  固定定位只限制自身，只能应用在某个局部。
>  *  所以在实际开发中，都使用文档流定位来进行页面布局，就是静态定位（默认）。它能够随着页面元素的变化而自动调节。

### 6.6 z-index样式 ###

> 绝对定位元素与固定定位元素脱离了文档流，可以把它想象为：此元素漂浮在网页上方。 那么，当这些元素位置有重叠时，就会出现：元素之间如何覆盖的问题。此问题可以使用z-index样式来解决。

> z-index样式的值是一个整形数，就表示元素所在的层级。

![6b11b9dc7bba35dfd7db02d492d10eaa.png][]

--------------------

## 七. 页面布局概述 ##

> 网页布局方式有很多，各有各的特点：
> 
>  *  传统的 DIV+CSS+float（浮动） 布局方式，适用于PC端。
>  *  自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面。
>  *  响应式布局方式，开发一套页面，根据媒体查询返回的结果，跳转布局以适用不同的客户端。
>  *  多列布局方式，类似报纸排版的样式。
>  *  弹性布局，适用与PC端与移动端。
>  *  ... ...

--------------------

## 八. 弹性布局（弹性盒子） ##

> 一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。

display:flex  /*flex是flexible box的缩写*/

> 此时，这个元素就可以称为是一个弹性布局容器（弹性容器），它内部的子元素，将只按照弹性布局的规则来排列和对齐，以前的**float、clear、块状与内联、vertical-align属性**都不能用了。

### 8.1 重要概念：主轴与侧轴 ###

> 弹性布局中的一个重要概念：主轴与侧轴：
> 
> 弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。

![8fd4fa07606c5cdc9d389676e37c88fb.png][]

> 注意点：
> 
> 1.  主轴的开始位置叫做 main start、 结束位置叫做 main end；
> 2.  侧轴的开始位置叫做cross start、结束位置叫做cross end；
> 3.  侧轴永远垂直于主轴；

### 8.2 flex-direction样式 ###

> flex-direction属性就是用来设置主轴方向的。

flex-direction:row        /*子元素沿主轴方向排列，也就是水平方向。 row为默认值*/

flex-direction:column     /*子元素沿侧轴方向排列，也就是垂直方向。*/

> 一个完整的例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                body{
                    display: flex;           /*将body设置为弹性布局*/
                    flex-direction: column;  /*这里设置为侧轴方向排列*/
                }
                .son{
                    width: 100px;
                    height: 100px;
                    border: solid 2px #f90;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div class="son">1</div>
            <div class="son">2</div>
            <div class="son">3</div>
            <div class="son">4</div>
            <div class="son">5</div>
        </body>
    </html>

![499136f4ea8e96693814c0667fa9c70f.png][]

> 总结：
> 
>  *  在弹性容器中，子元素想要水平方向排列，那就在弹性盒子中设置：flex-direction:row
>  *  在弹性容器中，子元素想要垂直方向排列，那就在弹性盒子中设置：flex-direction:column
>  *  在弹性容器中，以前的“块状元素独占一行”，“内联元素不独占一行”，“元素水平排列时需要浮> 动”等等规则，一律不再有效。

### 8.3 flex-wrap样式 ###

> 由于弹性布局中的子元素能自动伸缩，所以，当父容器此次小于子元素整体尺寸时，子元素不会自动换行，而是自动收缩。

body{
        display: flex;
    }

![7359673abec42b1ec3d7154341bc813a.png][]

> 那么，如果想要让子元素自动换行，可以使用flex-wrap:wrap

body{
        display: flex;
        flex-wrap: wrap;   /*当弹性布局容器尺寸小于所以子元素尺寸时，子元素会自动换行*/
    }

![d515af0672decd245f676f3ba06a42de.png][]

> 总结：
> 
> 1.  在弹性盒子中，默认子元素不换行，即使是容器宽度不够时，子元素也不换行，只是宽度缩小。
> 2.  如果在父容器宽度不够时想要自动换行，那么设置：flex-wrap:wrap

### 8.4 justify-content样式 ###

> 以主轴方向为例：子元素水平方向排列后，默认依次靠左排列。如果想让子元素居中、居右等，那么就可以设置justify-content样式。值有五种：
> 
>  *  flex-start（默认）：左对齐。
>  *  flex-end：右对齐。
>  *  center：居中。
>  *  space-between：两端对齐，子元素之间间距都相等。
>  *  space-around：每个子元素两侧的间距相等。所以子元素之间间距比子元素到边框 间距大一倍。

body{
        display: flex;
        justify-content: space-between;    /*两端对齐，子元素之间间距都相等。*/
    }

![44860dd0ca2d484b8fa2803422503c95.png][]

> 总结：在弹性盒子中，子元素主轴对齐方式使用justify-content来设置

### 8.5 align-items与align-content样式 ###

> 以主轴方向为例：子元素水平方向排列后，如果想让子元素垂直居中，那么就可以设置align-items样式。常用值有三种：
> 
>  *  flex-start（默认）：上对齐。
>  *  flex-end：下对齐。
>  *  center：居中。

html,body{
        height: 100%;               /*html与body的高度默认为0，所以要设置高度*/
    }
    body{
        display: flex;
        flex-wrap: wrap;           /*如果允许换行，那么换行后，多行元素中的每一行也会垂直居中*/
        justify-content: center;
        align-items: center;       /*不论是一行，还是多行，都会垂直居中*/
    }

![f01c586d3c9a22975684110f5a6ecdf5.png][]

> 再来看align-content样式：align-content样式对单行没有效果，对多行有效果，而且是将多行整体作为一个整体附加效果的。

![b271340dac86f67abe1b2a9d3276f615.png][]

> 总结：在弹性盒子中，子元素侧轴对齐方式可以使用align-items或align-content
> 
>  *  align-items对单行和多行都有效，align-content对单行无效。
>  *  在多行中，align-items让每一行都在各自范围内垂直居中。 align-content将多行作为一个整> 体，然后居中。

### 8.6 flex样式 ###

> 如果想让每个子元素所占空间不一致，那么可以使用flex给子元素分配空间。 使用flex时要注意一下两点：
> 
>  *  flex样式是设置在子元素上的。
>  *  如果设置了flex，那就说明要给子元素按比例分配空间，因此width与height就失效了。

**实例1：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                html,body{
                    height: 100%;
                }
                body{
                    display: flex;
                }
                .son{
                    width: 100px;
                    height: 100px;
                    border: solid 2px #f90;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div class="son" style="flex:1;">1</div>
            <div class="son" style="flex:1;">2</div>
            <div class="son" style="flex:2;">3</div>
            <div class="son" style="flex:2;">3</div>
        </body>
    </html>

![b93c5b11551ef91c9fbef1a05e339011.png][]

> 上面实例中：flex样式后跟1个值：表示子元素所占空间的比例。三个div的宽度分别是窗口宽度的：1/4、1/2、1/4

**实例2：**

<body>
        <div class="son" style="flex:0 0 400px;">1</div>
        <div class="son" style="flex:1;">2</div>
        <div class="son" style="flex:2;">3</div>
    </body>

![7ed343f24b281ddae1757b231216935c.png][]

> 上面实例中：flex样式后跟3个值：
> 
> 1.  第一个值：子元素尺寸自动放大值
> 2.  第二个值：子元素尺寸自动缩小值
> 3.  第三个值：子元素尺寸（"auto"或"%"、"px"、"em" 或任何其他长度单位的数字。）

**例如：**

>  *  0 1 auto（默认）：父元素尺寸变化时，子元素不放大，只缩小，尺寸自动充满。
>  *  1 1 auto： 父元素尺寸变化时，子元素自动放大缩小，尺寸自动充满。
>  *  0 0 300px： 父元素尺寸变化时，子元素不放大缩小，尺寸固定。
> 
> **总结：**可以使用flex让一行内的所有子元素自动撑满窗口宽度。而且每个子元素的宽度可以按比例> 进行分配。

--------------------

## 九. 布局实例 ##

### 9.1 典型1-3-1布局 ###

![f816d0ed7dbadcd2329f074f37629d15.png][]

> 注意点：
> 
> 1.  由于PC端屏幕尺寸相对固定，所以采用定宽不定高的原则。
> 2.  所有页面元素都放在一个总容器中，然后就可以使总容器水平居中了。
> 3.  网页主要内容部分不能设置高度，而应该是由内容撑开的。

### 9.2 典型自适应高度后台管理布局 ###

![be22495025d184572657d600a33bacd1.png][]

> 注意点：
> 
>  *  后台管理页面布局的宽度和高度，一般都会自动撑满整个窗口。
>  *  header和footer的高度可以固定，中间内容部分撑满剩余高度。

--------------------

## **十. 前端学习专栏** ##

[https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482![icon-default.png?t=M5H6][icon-default.png_t_M5H6]https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482][https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]

[CSS]: https://blog.csdn.net/weixin_53919192/article/details/125611018?spm=1001.2014.3001.5502
[41adec66c3163fe3df352eadeaaf14cd.png]: https://img-blog.csdnimg.cn/img_convert/41adec66c3163fe3df352eadeaaf14cd.png
[69117d786fe9c834c2d75dc221e6e827.png]: https://img-blog.csdnimg.cn/img_convert/69117d786fe9c834c2d75dc221e6e827.png
[0bf118aaaed1f14f1ef680ba0389d651.png]: https://img-blog.csdnimg.cn/img_convert/0bf118aaaed1f14f1ef680ba0389d651.png
[35f5fa583c4d97063c562d31c5781ac3.png]: https://img-blog.csdnimg.cn/img_convert/35f5fa583c4d97063c562d31c5781ac3.png
[a5fbb1c792c0a5202a3aa7a9197e4085.png]: https://img-blog.csdnimg.cn/img_convert/a5fbb1c792c0a5202a3aa7a9197e4085.png
[cff344f0634ad6b1b79a3f554f90cc7d.png]: https://img-blog.csdnimg.cn/img_convert/cff344f0634ad6b1b79a3f554f90cc7d.png
[bdf569595c83dc36318452fce6157d9c.png]: https://img-blog.csdnimg.cn/img_convert/bdf569595c83dc36318452fce6157d9c.png
[d08858e2e55d7047928bf86dc0341cb6.png]: https://img-blog.csdnimg.cn/img_convert/d08858e2e55d7047928bf86dc0341cb6.png
[11eac30945b493f0ad71eb4289c98891.png]: https://img-blog.csdnimg.cn/img_convert/11eac30945b493f0ad71eb4289c98891.png
[4656954622f6990a19e9045127599c9d.png]: https://img-blog.csdnimg.cn/img_convert/4656954622f6990a19e9045127599c9d.png
[d8dde6a98117650a4f5eb877e4ea9ea3.png]: https://img-blog.csdnimg.cn/img_convert/d8dde6a98117650a4f5eb877e4ea9ea3.png
[ffd5a93eda0a5ba14424e8c6296ebf79.png]: https://img-blog.csdnimg.cn/img_convert/ffd5a93eda0a5ba14424e8c6296ebf79.png
[6b11b9dc7bba35dfd7db02d492d10eaa.png]: https://img-blog.csdnimg.cn/img_convert/6b11b9dc7bba35dfd7db02d492d10eaa.png
[8fd4fa07606c5cdc9d389676e37c88fb.png]: https://img-blog.csdnimg.cn/img_convert/8fd4fa07606c5cdc9d389676e37c88fb.png
[499136f4ea8e96693814c0667fa9c70f.png]: https://img-blog.csdnimg.cn/img_convert/499136f4ea8e96693814c0667fa9c70f.png
[7359673abec42b1ec3d7154341bc813a.png]: https://img-blog.csdnimg.cn/img_convert/7359673abec42b1ec3d7154341bc813a.png
[d515af0672decd245f676f3ba06a42de.png]: https://img-blog.csdnimg.cn/img_convert/d515af0672decd245f676f3ba06a42de.png
[44860dd0ca2d484b8fa2803422503c95.png]: https://img-blog.csdnimg.cn/44860dd0ca2d484b8fa2803422503c95.png
[f01c586d3c9a22975684110f5a6ecdf5.png]: https://img-blog.csdnimg.cn/img_convert/f01c586d3c9a22975684110f5a6ecdf5.png
[b271340dac86f67abe1b2a9d3276f615.png]: https://img-blog.csdnimg.cn/img_convert/b271340dac86f67abe1b2a9d3276f615.png
[b93c5b11551ef91c9fbef1a05e339011.png]: https://img-blog.csdnimg.cn/img_convert/b93c5b11551ef91c9fbef1a05e339011.png
[7ed343f24b281ddae1757b231216935c.png]: https://img-blog.csdnimg.cn/img_convert/7ed343f24b281ddae1757b231216935c.png
[f816d0ed7dbadcd2329f074f37629d15.png]: https://img-blog.csdnimg.cn/img_convert/f816d0ed7dbadcd2329f074f37629d15.png
[be22495025d184572657d600a33bacd1.png]: https://img-blog.csdnimg.cn/img_convert/be22495025d184572657d600a33bacd1.png
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482