html与css基础

最新推荐文章于 2024-10-14 16:05:05 发布

V________

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量152

点赞数

分类专栏： web前端文章标签： html css

本文链接：https://blog.csdn.net/V________/article/details/108522617

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

8.7 总结
1.flex与flex-grow区别（建议使用flex-grow）
 Flex设置的项目，会忽略本身尺寸，将剩余空间与本身宽度和 / 份数，再分配
 Flex-grow则只计算剩余宽度，将剩余宽度 / 份数，再分配
 但多个项目若二者的值相同，则没有区别
2.设置背景图片
Background-image：url（“”）；
雪碧图的操作步骤：

设置标签雪碧图中图片的尺寸（宽高）
已背景图方式引用图片
设置雪碧图图片位置 background-position：- X - Y
行盒
可替换元素：音频，视频，图片（原本行盒设置宽高是无效的，但是行盒中的可替换元素设置宽高有效）
不可替换元素：文本类
图片的alt属性，是为图片加载不出来时给用户看，和给浏览器与搜索引擎看，相当于关键字
设置图片尺寸的规则：只设置宽 / 高，使其等比例缩放
HTML5关于图片新增的标签：

Figcaption是块盒，并且img与figcaption可换，显示方式与代码顺序匹配 8.10总结 1.text-shadow：设置文本阴影。 1px 2px 2px red X轴 Y轴模糊值颜色 2. text-decoration 向文本添加修饰。 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线（贯穿线/删除线）。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 3. text-transform 控制元素中的字母。 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 4. text-indent 缩进元素中文本的首行。 length 定义固定的缩进。默认值：0。 % 定义基于父元素宽度的百分比的缩进。 inherit 规定应该从父元素继承 text-indent 属性的值。 5.text-align 对齐元素中的文本。 left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。 6.line-height 设置行高。 normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。 7. word-spacing 设置字间距。 normal 默认。定义单词间的标准空间。 length 定义单词间的固定空间。 inherit 规定应该从父元素继承 word-spacing 属性的值。 8. letter-spacing 设置字符间距。 normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。 9. font-weight 规定字体的粗细。 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100 200 300 400 500 600 700 800 900 定义由粗到细的字符。 400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。 10. font-style 规定文本的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。 11. font-family 规定文本的字体系列。有两种类型的字体系列名称：指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"，建议使用非衬线字体 12. font-variant 规定是否以小型大写字母的字体显示文本。 normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。 13.@font-face  把引用字体放到站内  14.border-radius 简写属性，设置圆角边框取一个值：四个角以该值为半径画圆，取两个值（分隔符为空格）：第一个值为左上角和右下角的圆弧半径，第二个值为左下角和右上角的圆弧半径取两个值（分隔符为/）第一个值为四个角的水平半径，第二个值为垂直半径，即四个角弧度一致适用场景：  正圆形：1.设置宽高一致 2.border-radius：50%  圆弧搜索框：1.设置宽高 2.border-radius：（高度的一半）px 15. background-size 规定背景图片的尺寸。  通常只给一个值100%，撑满整个元素  给两个值：第一个值背景图宽度，第二个值背景图高度 16. background-repeat 设置是否及如何重复背景图像。（背景图尺寸小于当前元素的尺寸） repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 17. background-clip 规定背景的绘制区域。 border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 18. background-origin 规定背景图片的定位区域。 padding-box 背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 19.设置多张背景图的书写格式： Background-image：url（“。。。。”），url（“。。。。”），。。。。；设置多张背景图的位置： Background-position：top left（第一张），第二张，。。。。； 20．background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。 21.box-shadow：盒子阴影 1px 2px 2px red X轴 Y轴模糊值颜色 22.背景渐变色  线性渐变 1.background-image: linear-gradient(to right bottom,red,yellow,green); 2.background-image: repeating-linear-gradient(to top,red 0px,red 20px,yellow 20px,yellow 40px); 3.background-image: repeating-linear-gradient(to top,red 0px,yellow 20px,red 20px,yellow 40px); 4.background-image: linear-gradient(to top,transparent 50%,rgba(255,0,0,0.2) 50%),linear-gradient(to left,transparent 50%,rgba(255,0,0,0.2) 50%); background-size: 30px 30px;  颜色的设置方式 1. 关键词，关键字 2. 十六进制 3. Rgb取值 4. Rgba（其中a为透明度，取值 0-1，越小越透明） ----1----opacity：（取值 0-1），内部所有都会改变透明度 ----2----让元素在页面上消失 a。display：none（占位置） b。透明（不占位置） c。visibility：hidden（不占位置）

8.7 总结
1.flex与flex-grow区别（建议使用flex-grow）
	Flex设置的项目，会忽略本身尺寸，将剩余空间与本身宽度和 / 份数，再分配
	Flex-grow则只计算剩余宽度，将剩余宽度 / 份数，再分配
	但多个项目若二者的值相同，则没有区别
2.设置背景图片
Background-image：url（“”）；
雪碧图的操作步骤：
1.	设置标签雪碧图中图片的尺寸（宽高）
2.	已背景图方式引用图片
3.	设置雪碧图图片位置   background-position：- X  - Y
4.	行盒
可替换元素：音频，视频，图片（原本行盒设置宽高是无效的，但是行盒中的可替换元素设置宽高有效）
不可替换元素：文本类
图片的alt属性，是为图片加载不出来时给用户看，和给浏览器与搜索引擎看，相当于关键字
设置图片尺寸的规则：只设置宽 / 高，使其等比例缩放 
HTML5关于图片新增的标签：
<figure>         <img src="./img/7.jpg" alt="信息" title="柴犬">         <figcaption>柴犬</figcaption> </figure>
Figcaption是块盒，并且img与figcaption可换，显示方式与代码顺序匹配
8.10总结
1.text-shadow： 设置文本阴影。
1px   2px   2px  red
X轴  Y轴   模糊值  颜色
2. text-decoration 向文本添加修饰。
none 默认。定义标准的文本。 
underline 定义文本下的一条线。 
overline 定义文本上的一条线。 
line-through 定义穿过文本下的一条线（贯穿线/删除线）。 
blink 定义闪烁的文本。
 inherit 规定应该从父元素继承 text-decoration 属性的值。
3. text-transform 控制元素中的字母。
none 默认。定义带有小写字母和大写字母的标准的文本。 
capitalize 文本中的每个单词以大写字母开头。
 uppercase 定义仅有大写字母。 
lowercase 定义无大写字母，仅有小写字母。 
inherit 规定应该从父元素继承 text-transform 属性的值。
4. text-indent 缩进元素中文本的首行。
length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。 
inherit 规定应该从父元素继承 text-indent 属性的值。
5.text-align 对齐元素中的文本。
left 把文本排列到左边。默认值：由浏览器决定。 
right 把文本排列到右边。 
center 把文本排列到中间。
 justify 实现两端对齐文本效果。 
inherit 规定应该从父元素继承 text-align 属性的值。
6.line-height 设置行高。
normal 默认。设置合理的行间距。 
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 
length 设置固定的行间距。 
% 基于当前字体尺寸的百分比行间距。 
inherit 规定应该从父元素继承 line-height 属性的值。
7. word-spacing 设置字间距。
normal 默认。定义单词间的标准空间。 
length 定义单词间的固定空间。 
inherit 规定应该从父元素继承 word-spacing 属性的值。
8. letter-spacing 设置字符间距。
normal 默认。规定字符间没有额外的空间。
 length 定义字符间的固定空间（允许使用负值）。 
inherit 规定应该从父元素继承 letter-spacing 属性的值。
9. font-weight 规定字体的粗细。
normal 默认值。定义标准的字符。 
bold 定义粗体字符。 
bolder 定义更粗的字符。 
lighter 定义更细的字符。 
100 200 300 400 500 600 700 800 900 定义由粗到细的字符。
400 等同于 normal，而 700 等同于 bold。 
inherit 规定应该从父元素继承字体的粗细。
10. font-style 规定文本的字体样式。
normal 默认值。浏览器显示一个标准的字体样式。 
italic 浏览器会显示一个斜体的字体样式。 
oblique 浏览器会显示一个倾斜的字体样式。 
inherit 规定应该从父元素继承字体样式。
11. font-family 规定文本的字体系列。
有两种类型的字体系列名称： 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"，建议使用非衬线字体
12.	font-variant 规定是否以小型大写字母的字体显示文本。
normal 默认值。浏览器会显示一个标准的字体。 
small-caps 浏览器会显示小型大写字母的字体。 
inherit 规定应该从父元素继承 font-variant 属性的值。
13.@font-face   
	把引用字体放到站内
	 
14.border-radius 简写属性，设置圆角边框
取一个值：四个角以该值为半径画圆，
取两个值（分隔符为空格）：第一个值为左上角和右下角的圆弧半径，第二个值为左下角和右上角的圆弧半径
取两个值（分隔符为/）第一个值为四个角的水平半径，第二个值为垂直半径，即四个角弧度一致
适用场景：
	正圆形：1.设置宽高一致  2.border-radius：50%
	圆弧搜索框：1.设置宽高   2.border-radius：（高度的一半）px
15. background-size 规定背景图片的尺寸。
	通常只给一个值100%，撑满整个元素
	给两个值：第一个值背景图宽度，第二个值背景图高度
16. background-repeat 设置是否及如何重复背景图像。（背景图尺寸小于当前元素的尺寸）
repeat 默认。背景图像将在垂直方向和水平方向重复。 
repeat-x 背景图像将在水平方向重复。 
repeat-y 背景图像将在垂直方向重复。 
no-repeat 背景图像将仅显示一次。
17. background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。 
content-box 背景被裁剪到内容框。
18. background-origin 规定背景图片的定位区域。
padding-box 背景图像相对于内边距框来定位。 
border-box 背景图像相对于边框盒来定位。 
content-box 背景图像相对于内容框来定位。
19.设置多张背景图的书写格式：
Background-image：url（“。。。。”），url（“。。。。”），。。。。；
设置多张背景图的位置：
Background-position：top left（第一张），第二张，。。。。；
20．background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 
fixed 当页面的其余部分滚动时，背景图像不会移动。 
inherit 规定应该从父元素继承 background-attachment 属性的设置。
21.box-shadow：盒子阴影
1px   2px   2px  red
X轴  Y轴   模糊值  颜色
22.背景渐变色
	线性渐变
1.background-image: linear-gradient(to right bottom,red,yellow,green); 2.background-image:  repeating-linear-gradient(to top,red 0px,red 20px,yellow 20px,yellow 40px); 3.background-image:  repeating-linear-gradient(to top,red 0px,yellow 20px,red 20px,yellow 40px);    4.background-image: linear-gradient(to top,transparent 50%,rgba(255,0,0,0.2) 50%),linear-gradient(to left,transparent 50%,rgba(255,0,0,0.2) 50%); background-size: 30px 30px;
	颜色的设置方式
1.	关键词，关键字
2.	十六进制
3.	Rgb取值
4.	Rgba（其中a为透明度，取值 0-1，越小越透明）
----1----opacity：（取值 0-1），内部所有都会改变透明度
----2----让元素在页面上消失  a。display：none（占位置）  
 b。透明（不占位置）   c。visibility：hidden（不占位置）