前端知识总结

目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

想要制作一个精美的网页，首当其冲的还是要好好掌握前端知识。基本的标签属性要记牢，这是我上课时的一些笔记，希望能对诸位有所帮助。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS 特性

1、CSS三大特性：

继承性：子级默认继承父级的文字控制属性。
层叠性:相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效
**优先级😗*选择器优先级高的样式生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）

2、显示模式：

1、块元素block：可设宽高,独占一行–h1~h6 p div ul li

​ 2、行内元素inline：不可设宽高,不能独占一行—a span img(可替代元素，内有宽高属性)

​ 3、行内块元素：不独占一行，可设宽高—img input

​ 4、 Css显示模式转换方案：

​ 1.display:block

​ 2.display:inline-block

​ 3.display:inline;

二、伪类结构选择器：

   1、 第一个子元素：E：first-child

​ 最后一个子元素:last-child E:nth-child(数字)

​ 基数odd 2n+1 E:nth-child(2n+1) E:nth-child(odd)

​ 偶数： even 2n E:nth-child(even)

​ （了解）前n个子元素:nth-child(-n + n)

​ （了解）后n个子元素:nth-child(n + n)

伪元素选择器：

​ 1、：before 在元素的最前面添加一个元素

​ :after 在元素的最后面添加一个元素

2、div {

​ /* 边框：边框粗细 细线 颜色 */

​ width: 200px;

​ /* border: 1px solid red; */

​ text-align: center;

​ }

​ div::before {

​ content: “----***”;

​ }

​ div::after {

​ content: “***----”;

​ }

三、盒子模型：

1、div+css盒子模型布局

​ 2、作用：页面布局

​ 3、组成;

​ 3.1内容content：显示内容区域（width:;height:;）

​ 3.2:内边框padding：内容与边框的距离

​ padding:top left&&right botton

​ padding:上右下左

​ 3.3:边框border:边框本身宽度

​ 3.4:外边距margin:边框与外部的距离

​ 盒子的显示宽度:(添加box-sizing之前):

​ 盒子的显示宽度=wideth(内容宽度)+border+padding;

​ 盒子的显示宽度:(添加box-sizing之

​ 后):

​ 盒子的显示宽度=wideth(内容宽度)-border-padding;

4、
$$
Kbox-shawdow：x轴偏移量 y轴偏移量 阴影程度 颜色；

1、盒子间距取最大值

​ 浮动干扰

​ 1、padding-top

​ 2、 overflow: hidden; margin-top 解决盒子塌陷功能

​ 3、 border-top: 50px solid transparent;(边框宽度增加50)

四、定位

定位:将盒子放在页面任意指定的位置

​        定位的属性：

​            position: relative | absolute | fixed

​            relative: 相对定位，相对于自己原来的位置进行定位

​            absolute: 绝对定位，相对于父元素进行定位

​            fixed: 固定定位，相对于浏览器窗口进行定位

​        定位位移：px像素,  %百分比 

​            top: 距离上边的距离---下正，上负

​            bottom: 距离下边的距离--- 上正，下负

​            left: 距离左边的距离--- 右正，左负

​            right: 距离右边的距离--- 左正，右负

子绝父相：

相对定位：相对自己原来位置进行定位，不会脱离文档流，位置空间不会被释放

绝对定位：相对于最近的一个祖先进行定位，如果没有定位祖先，作为相对于body定位

五、弹性布局

弹性盒子布局—
1、作用：实现子元素标签在父元素标签中空间排列
2、属性：
2.1、父属性：
display:flex; //定义flex弹性盒子布局模型
flex-direction：主轴方向
– row:默认值 column:垂直方向
– row-reverse:反向排列 column-reverse:反向排列
flex-wrap ：换行
– nowrap:默认值 wrap:换行
– wrap-reverse:反向换行

    flex-flow：主轴方向+换行
        -- flex-direction+flex-wrap

    justify-content：主轴对齐方式-- 水平方向
        -- flex-start:默认值  
        -- flex-end:尾部对齐
        -- center:居中对齐  
        -- space-between:两端对齐
        -- space-around:每个元素两侧的间隔相等
        -- space-evenly:每个元素两侧的间隔相等，包括首尾元素

        /* y轴交叉周边 单行*/
    /* align-items: flex-start; */
    align-items: center;
    /* align-items: flex-end; */
    /* align-items: stretch; 拉伸对其（子元素五高度时） */
    /* align-items: baseline;基线对齐 */

          /* 多轴对齐  多行*/
    /* align-content: flex-start; */
    /* align-content: center; */
    /* align-content: flex-end; */
    /* align-content: space-between;
     -- space-between:两端对齐
        -- space-around:每个元素两侧的间隔相等
        -- space-evenly:每个元素两侧的间隔相等，包括首尾元素
    *
 
    2.2 子属性：
    order：子元素排列顺序--- 数值越小，排列越靠前
    flex:子元素占据的空间比例--- 数值越大，占据的空间越大

    3.特点：
    3.1 父元素定义为flex属性后，所有的子元素都会横向排列，并且子元素的宽度会根据子元素的内容自动调整

    vw--- viewport width  视口宽度-- 1vw=视口宽度的1%
    vh--- viewport height  视口高度-- 1vh=视口高度的1%
    3、特点
    3.1、父元素定义为flex属性后，所有的子元素都会横向排列，且子元素宽度也会根据子元素内容自动调整


    
    /* flex-direction: row; */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
    /* 换行 */
    /* 满了就换行 
    /* flex-wrap: wrap; */ */
    /* flex-wrap: nowrap; */
    /* 换行+方向 */

/* flex-flow: row-reverse nowrap; /
/ flex-flow:row wrap;

总结

这是我后部分前端的笔记总结，有些凌乱，运用好html基础知识能做出一个静态的网页，需要加上js才能成为动态的，下篇博客我会总结js知识及相关应用。