2021-03-21

最新推荐文章于 2024-09-16 23:39:36 发布

梅蝈蝈

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量116

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_44822786/article/details/115048106

版权

                                           **前端学习进度**

行高
line-height

字体加粗font-weight 不需要加px
font-weight:600 ;

Border 边框
:first-child 选中第一个
:nht-child(所需要选中的元素在第几个)

2.26 预课第二天

Header 表示头部标签
Nav 表示导航标签
Article 表示文章或其他可独立页面存在的内容
Aside 表示跟文章主题相关的附加信息
Section 表示一个整体的部分主题
Footer 表示底部标签

注释快捷键 ctrl+？

a超链接
p段落
H 标题

Text align 文字对齐方式
Font-size 字体大小单位 px

预科第三天

盒子的分类

不同元素产生的盒子类型可能不同，但都是矩形

Margin 外边距玉其他和其他盒子之间的距离
Border边框必须跟三个值边框颜色边框样式边框大小(px)
Padding 内边距
Solid 实线 dotted圆点 double 双实线
常规流水平居中方法
1 给一个固定宽高
2 给元素添加 margin: auto

主轴交叉轴
主轴默认情况下水平向右（x轴）左中右
主轴默认情况下垂直向下（y轴）上中下
设置弹性布局 dsiplay flex 针对父元素使用使其变成容器
里面的所有子元素都默认在一行显示当所有项目之和大于容器宽度时所有项目依旧在一行显示但每个项目都自动缩小

弹性布局
Display flex (使用前提是项目宽度之和大于容器之和)
Flex-wrap : wrap 换行
Flex-wrap: wrap-reverse 换行且第一行在最下面显示

justify-content: center; /* 主轴居中对齐 /
justify-content: flex-start;/ 主轴右对齐 /
justify-content:flex-end ;/ 主轴居左对齐 */

justify-content: space-around;/* 项目和容器之间的

距离=项目和容器占据的距离的一半 /
justify-content: space-between; / 项目和容器之

间的距离为0 /
justify-content: space-evenly;/ 项目和容器之间的

距离=项目和容器占据的距离*/

align-items: flex-end;/*底部对齐

align-items: center;/* 居中对齐*/

align-items: flex-start;/*顶点对齐齐

3.14

1.让浏览器知道用哪个版本的html去解析里面的内容
2. 给页面添加附加信息 >
3. charset 字符编码集告诉浏览器用哪个版本来解析文本
4 viewport 可视区域（页面中能看到的区域）
5.前端第一天整个网页标题
6 空元素又叫（自闭合元素）没有元素内容和结束标记
1.
html 全称 Hypertext Markup Language
2.
3.
css 全称 Cascading Style Sheets
4.

3.15（实体字符跳转）

一.
给我打电话
 给我发邮件
注意引号和冒号

二.
跳转新的页面
跳转页面2（注意格式 target=“ _blank”）

跳转页面

超链接a来实现 herf后面接需要跳转的地址

三
四.实体字符
书写格式为 &实体名称；或者&#实体编号；
显示结果描述实体名称实体编号
空格 &nbsp； &#160；
< 小于符合 &lt； &#60；

大于符号 &gt； &#62；
& 并且符合 &map； &#38；
© 版权符号 &copy； &#169；

3.16 选择器

5.伪类选择器（以:开始）
1.选中某一个元素
（1）格式:元素标签+:nth-chird（n）n代表某一个起始值为0
注:适用于所有兄弟元素的名字相同
（2）当兄弟元素不同时
格式:ntf-of-type（n）（筛选同一类型元素）
（3）当（）内是odd所有奇数项元素会被选中或者为（2n+1）
格式元素标签+:nth-chird（2n+1）
（4）当（）内是even所有偶数项元素会被选中或者为（2n）
格式元素标签+:nth-chird（2n）
2.选中第一个元素 p:first-child{ color: rgb(37, 218, 148);}
3.选中你最后一个元素p:last-child{ color: rgb(37, 218, 148);}
6.否定伪类选择器
p:not(:nth-child(3)) {color: red;}
6.动态伪类选择器
a标签的四种状态（必须按顺序书写代码 1和2可以互换位置）
1.未访问 link
2.以访问 visited
3.悬停 hover
4.点击 active
==============================================================================================================================================

3.17 （盒模型边框）

盒子类型
1.display:none 不生成盒子
2.display:inile 行盒（多个元素在一行显示）（span）
3.display:block 块盒

取三角形
width: 0px;
border:transparent 5px solid;
border-top-color: black;

圆角边框
圆角边框border-radius:10px 后面的值指的是弧度（属于css3 新增内容）
border（边框）实线solid 虚线dashed 双实线 double
圆点线（dotted）

字体加粗
Font-weigth: ;
行高
line-height:

取三角形
width: 0px;
border:transparent 5px solid;川四拍润特
border-top-color: black;

3.18

设置超出部分的展现方式
Overflow: :(hidden 超出部分隐藏)
Overflow: :（scroll 一个方向超出（溢出）都出现滚动条）
Overflow: :(auto 自动 Y轴出现超出出现滚动条 X轴出现超出出现滚动条 )
二断词规则（换行）

英文（空格标点符号）

中文（空格标点符号）

数字（空格标点符号）

word-break: break-all;（宽度占满了自动换行）

单行注释多行注释

三. 盒子拓展

(子盒子类型)（1）

1.border-box 边框盒由边框内边距内容组成（背景色默认为边框盒）

2.padding-box填充盒由内边距内容组成

content-box 内容盒由内容组成background-image: url("…/img/banner.jpg");

（改变当前盒子的渲染区域）（2）

background-clip:

ur l统一资源路径 url（""）括号里是图片的地址需要加引号

引入背景图片

background-image: url("…/img/banner.jpg");
box-sizing:border-box IE盒模型
background-clip: border-box;（设置背景的显示区域）
background-origin: content-box；（设置背景的渲染区域）
IE盒模型（box-sizing）的默认值是content-box 当默认值变成border-box时

整个盒子的大小border+padding+content=所给的宽高
（IE盒模型的使用场景）

在宽度给100%的基础上右添加了其他盒子的尺寸

为解决横向滚动条的问题因此更改盒子的计算规则来实现效果

outline 轮廓

优点：不占像素

缺点：不可以分别设置四个方向的值（即是个方向方式统一）

3.19继承和层叠

基础和层叠

继承

取值单位分类

固定单位绝对单位 px

兄弟单位 em rem vw vh %

属性值计算后的值

em 是前所在标签的字体大小
rem：相对长度单位。相对于根元素(即html元素) font-size 值的倍数

（使用场景 1.移动端开发）

3.vw：相对于视口的宽度。视口被均分为100单位的vw，取视口的百分比

4.vh：相对于视口的高度。视口被均分为100单位的vh（示例如上）。取视口的百分比

inherit 继承

指子元素会自动拥有父元素的某些css属性

前提

1.属性是能够继承的

2.子元素没有声明