web前端——html+css知识点总结(中)

最新推荐文章于 2021-08-31 20:24:43 发布

软哈哈

最新推荐文章于 2021-08-31 20:24:43 发布

阅读量458

点赞数 2

文章标签：前端 HTML+css

本文链接：https://blog.csdn.net/qq_40198420/article/details/102933255

版权

背景

background-color: 背景颜色
background-image: url(img/pic.gif); 背景图片
background-repeat:  背景是否平铺
no-repeat; 不平铺
repeat-x; 沿x轴平铺
repeat-y; 沿y轴平铺

background-position:x y ；背景图片的位置
单位 px % left right top bottom center
两个值的时候：x轴的位置 y轴的位置
一个值的时候：第二个值默认是center

复合写法：
background：背景颜色背景图片是否平铺背景位置
都可以省略不写，但是背景颜色和图片至少留一个

background-attachment:背景图片是否跟随页面其他部分滚动而滚动
fixed; 不滚动固定在指定位置
scroll 滚动

边框

border-top-width: 10px; 上边框的宽度
border-top-style: ; 上边框的样式
solid 实线、dotted 点状、dashed 虚线、double 双线
border-top-color: 上边框的颜色
组合方式
border-top:10px solid red;
设置上边框：10px 实线颜色
border:10px solid red;
所有边框的样式一样
其他样式
border-width: 10px 20px 30px 40px; 边框的宽度
border-style: solid dashed dotted double;边框的样式
border-color: red yellow skyblue green; 边框的颜色
一个值：四个边框
两个值：上下左右
三个值：上左右下
四个值：上右下左（从上边框开始，顺时针一圈）

内边距 padding

内容和边框之间的距离
padding-left: 左边的内边距
padding-top: 上边的内边距
padding-right: 右边的内边距
padding-bottom: 下边的内边距
复合写法：
padding：
一个值：四个方向的内边距
两个值：上下左右
三个值：上左右下
四个值：上右下左

外边距margin

边框以外的距离
margin-top: 上边的外边距
margin-bottom: 下边的外边距
margin-left: 左边的外边距
margin-right: 右边的外边距
复合写法：
margin：
一个值：四个方向的外边距
两个值：上下左右
三个值：上左右下
四个值：上右下左

盒子居中margin: 0 auto;

使用margin时会遇到两个问题
margin的两个问题

问题一:margin-top和margin-bottom相遇的时候，会出现重叠的情况，谁的值大取谁的值，两个值相等的时候，取其中一个
解决办法：给其中一个加margin值
问题二、给大盒子里的小盒子加margin-top 会出现带着大盒子向下移动的情况（如果大盒子有边框，有padding-top, 小盒子不是大盒子的第一个子元素，都不会出现这个情况）
解决办法：给大盒子加padding-top
margin和padding使用需注意:
内联元素可设置margin和padding , 左右margin和左右padding可以设置 , 上下margin没有作用
上下padding不会把上下的内容挤走，但是背景可以延伸出去，padding-top会把上面的内容覆盖住，padding-bottom会在下面内容的后面 , 可以给内联块标签设置margin和padding值 , 但是设置margin：0 auto没有作用

盒模型（盒子模型）

本质就是一个盒子，用来封装周围的html标签
包含：内容（width，height），padding，border，margin
标准盒模型
盒模型的宽度=内容的宽度+左右的padding+左右border+左右margin
盒模型的高度=内容的高度+上下的padding+上下的border+上下margin

怪异盒模型
width包含了内容，左右padding，左右border
height包含内容，上下padding，上下border
宽度=width+左右margin
高度=height+上下margin

块标签，内联标签，内联块标签互相转换

块标签

单独占一行
不设置宽度的时候，宽度是一整行
可以设置宽度高度padding margin等样式
块元素里面可以放块元素，内联元素，内联块元素，但是p标签除外，p标签里面不能放块元素

内联标签

在同一行里显示
宽度和高度有内容决定
不能设置宽高上下margin padding等样式
内联标签里不要放块标签，但是a标签特殊，a标签里面还不能放表单的提交按钮等有交互功能的标签，a标签里也不能放a标签

内联块标签

在同一行显示
可以设置宽度高度padding margin等样式

display: block; 把元素转换成块
display: inline;把元素转换成内联
display: inline-block;把元素转换成内联块
display: none; 隐藏元素元素不占位
visibility: hidden;隐藏元素占位

浮动

float：left
float:right

标准流（文档流）：文档中可显示对象，在排列时所占的位置

特点:

浮动元素脱离文档流不占位，不脱离文本流
浮动会让元素按照指定的方向浮动
浮动元素碰到父元素的边缘就换行
内联元素设置浮动，就可以支持宽高了
块元素不设置宽度的话，设置浮动，宽度就变成由内容撑开

使用浮动时会出现的问题
浮动产生的问题：子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素往上移动

解决办法：

给浮动元素的父元素设置高度
给浮动元素的父元素设置overflow：hidden/scroll/auto
在浮动元素的后面加一个空的块元素，给这个元素设置clear：both
给浮动元素的父元素加.clearfix的class名

.clearfix:after{
	content: '';
	display: block;
	clear: both;
}
.clearfix{
	*zoom: 1;
}

给浮动元素的父元素也加浮动

用途:
6. 利用浮动元素脱离文档流但是不脱离文本流这个特点，可以实现文字环绕图片
7. 给图片设置浮动

相对定位

position: relative;

相对于自己原来的位置进行定位
如果只加了相对定位，没有加具体的位置，对这个元素没有什么影响
配合left right top bottom使用
提升层级
z-index只用加了定位的元素上

绝对定位

position: absolute;

如果只给这个元素加绝对定位，父元素（父元素的父元素）没有加相对定位，相对于初始包含块定位，根据用户代理的不同，初始包含块可能是html也可能是画布
通常绝对定位要配合相对定位使用，给子元素加绝对定位，父元素加相对定位（子绝父相），如果父元素身上有其他定位也可以
配合left right top bottom使用
提升层级

设置小盒子在大盒子中间的位置

小盒子和大盒子宽高都已知的情况
使用padding
使用margin
给小盒子设置绝对定位，大盒子设置相对定位
小盒子宽高已知，大盒子宽高未知
给大盒子设置相对定位。
给小盒子设置绝对定位，left:50%;top:50%; margin-left:负小盒子宽度的一半；margin-top:负小盒子高度的一半
小盒子和大盒子宽高都未知
给大盒子设置相对定位
给小盒子设置绝对定位，left：0；top:0; right:0; bottom:0; margin:auto;

固定定位

position: fixed;

相对于浏览器的窗口进行定位的
配合着left top right bottom一起使用
提升层级

不透明度

opacity
取值：0 到1
数值越大，越不透明

脱离文档流的属性
浮动
绝对定位
固定定位
都能让内联元素支持宽高

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。
指页面中的渲染区域，并且拥有一套渲染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。

如何生成BFC
（1）根元素 html
（2）float的值为left或right
（3）overflow的值为hidden或scroll或auto
（4）display的值为inline-block
（5）position的值为absolute或fixed
BFC的特性（约束规则）
（1）内部的标签会在垂直方向上一个接一个的放置
（2）垂直方向上距离由margin决定，属于同一个BFC的两个相邻的标签的margin会发生重叠
（3）每个标签的左外边距与包含块的左外边界相接触（从左向右），即使浮动标签也是如此。
（4）BFC的区域不会与float的标签区域重叠
（5）计算BFC高度的时候，浮动子元素也参与计算
（6）BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的标签，反之亦然
BFC的主要用途（解决的问题）
（1）外边距重叠
（2）自适应两栏或三栏布局
（3）防止字体环绕
（4）清除浮动
ie兼容问题单独描述

css hack(可以处理ie不同版本之间的显示情况)

属性hack

_ 在属性名前面加下划线 ie6及以下版本认识
*在属性名前面加星号 ie7及以下版本认识
\9 在属性值的后面加 ie6 及以上版本认识
\0 在属性值的后面加 ie8 9 认识

选择符级hack
在选择器前面加html ie5 ie6里面认识
在选择器前面加+html 只有ie7认识
条件hack
gt 大于
gte 大于等于
lt 小于
lte 小于等于
！非

<!--[if ! ie 8]>
<p>除了ie8以外的ie版本会显示这句话</p>
<![endif]-->
 
<!--[if lt ie 8]>
<p>在小于ie8的版本显示这句话</p>
<![endif]-->

雪碧图 css sprites 精灵图

把许多小图标整理到一张大图片上（只有小图标整理到大图片上，大的图片不再整理），通过background-image， background-repeat，background-position 配合，在页面中漏出想要漏出的图标

好处：

减少http的请求
减少图片命名的好处
页面更换风格方便

缺点：
4. 制作麻烦，需要设置盒子的宽度和测量背景的位置
5. 如果需要改变其中一个图标，需要重新整合这张图片
6.
页面布局单独详细描述

网页标题前面的小图标

把图片转换为.ico的后缀（可以去比特虫的网站）
<link rel="icon" href="plane.ico">

鼠标变手型

cursor: pointer;

tdk

都写到head标签里面
<meta name="keywords" content=""> 关键字
<meta name="description" content=""> 描述

常用图片格式及特点

格式	优点	缺点	使用场景
jpg	色彩丰富,文件小	有损压缩,反复保存图片质量下降明显	色彩丰富的图片/渐变图片
gif	文件小、支持动画、透明无兼容性问题	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩、支持透明、简单图片尺寸小	不支持动画,色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小、支持有损和无损压缩、支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

SVG单独描述

新建字体

@font-face{
            /* 给新的字体起的名字 */
            font-family: 'yourfont';
            /* 引入新字体的路径 */
            src: url(FZLTCXHJW.TTF)
        }
        
 .box{
            font-size: 50px;
            /* 使用字体 */
            font-family: 'yourfont';
        }

html5

html5的新特性

内容结构更加简洁
（1）声明文档更加简洁
（2）编码格式更加简洁
（3） html head body都可以省略不写
（4）有的标签的结束标签可以省略不写
（5）属性名和属性值是相同的时候可以把属性值省略不写
（6）属性值是true的时候也可以省略不写
（7）属性值的引号可以省略不写
新增了结构元素
新增了表单相关内容
音频和视频
canvas
地图
拖放
对本地离线存储有更好的支持

表单外元素提交

<form id="sigequan">
</form>
 
<input type="text" form="sigequan">

HTML5新增元素

<header></header> 页头
<footer></footer>页脚
<nav></nav>导航
<article></article>文档中独立的内容
<section></section>页面中内容的章节
<aside></aside>侧边栏
<hgroup></hgroup>标题组
<figure></figure>设置独立的流内容
<mark></mark>定义带有记号的文本
<time></time>时间

HTML5新增多媒体标签

音频
autoplay自动播放 preload="auto"页面打开就开始加载音频或视频
src属性：规定要播放的音频/视频的 URL
controls属性：规定浏览器应该为音频/视频提供播放控件
loop属性：规定当音频/视频结束后将重新开始播放
muted属性：规定要播放的音频/视频为静音
<video></video> 视频
src属性：规定要播放的音频/视频的 URL
controls属性：规定浏览器应该为音频/视频提供播放控件
loop属性：规定当音频/视频结束后将重新开始播放
muted属性：规定要播放的音频/视频为静音
height属性：规定视频播放器的高度
width属性：规定视频播放器的宽度
poster属性：预览图片
<source>媒介元素
4.src属性：规定要播放的音频/视频的 URL
type属性：规定媒体资源的MIME类型

HTML5新增表单元素

<input type="url">用于包含URL地址的输入域（移动端会弹出带.com的键盘）
<input type="email">用于包含e-mail地址的输入域（移动端会弹出带@键盘）
<input type="search">用于搜索域
<input type="tel">用于输入电话号码的文本域（移动端会弹数字键盘）
<input type="number" min="1" max="5" step="1" value="3" >用于包含数值的输入域（有效值是和最小值和步长有关）
<input type="range" value="5" max="20" min="1" step="2">用于包含一定范围内数字值的输入域
<input type="color">用于选取颜色
<input type="date">选择年月日
<input type="datetime">用于手动输入一个日期时间
<input type="datetime-local">用于选择一个日期和时间
<input type="month">用于选择一个月份
<input type="time">用于选择一个时间
<input type="week">用户可以选择一整个周
<datalist>选项列表

<input id="myCar" list="cars"/>
<datalist id="cars">
    <option value="WEB"></option>
    <option value="ASD"></option>
</datalist>

HTML5新增表单属性

max 属性规定输入域所允许的最大值
min 属性规定输入域所允许的最小值
step 属性为输入域规定合法的数字间隔
placeholder 属性描述输入域所期待的值
autofocus属性自动获取焦点
autocomplete属性自动完成自动填充
form属性规定输入域所属的表单
required 必填项
pattern 属性规定用于验证 input 域的模式
multiple 属性规定输入域中可选择多个值
list属性实现数据列表的下拉效果

软哈哈

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
web前端——html+css知识点总结(中)

背景background-color: 背景颜色background-image: url(img/pic.gif); 背景图片background-repeat: 背景是否平铺no-repeat; 不平铺repeat-x; 沿x轴平铺repeat-y; 沿y轴平铺background-position:x y ；背景图片的位置单位 px % left right top...
复制链接

扫一扫