HTML和CSS简单整理
前言：hello 家人们，本文章用于自己整理笔记使用，逻辑会有点混乱，不建议小白入手从上往下查看，有什么指导欢迎评论区畅聊 (｡･∀･)ﾉﾞ
基本结构
结构 – html
表现 – css
行为 – js
html的常用标记
文本标题（h1-h6）
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
<p></p>段落文本
标识一个段落(段落与段落之间有段间距)
换行(br)
<hr />水平线
加粗：
<b>
<strong>
倾斜：
</em>强调文本
<i>倾斜文本
<u>文本下划线
<s>删除线
<del>删除线
<sub>下标
<sup>上标
CSS
层叠样式表 英文全名：cascading style sheets WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
引入CSS
两种方式：
第一种：
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /> (链接的方法写给html文件)
rel（relation）：用于定义文档关联，表示关联样式表；
type：定义文档类型；
第二种：
<style type="text/css">@import url(目标文件的路径及文件名全称);</style>
两种引入外部样式表link和import之间的区别：
差别1：
本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：
加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
第三种：
行内样式（内联样式）-- 标签内部写style属性
CSS选择器
层级：
e>f 子选择器
e+f 相邻兄弟选择器
e~F 通用
E:hover>F f是e的后代 f的样式发生改变
E:hover+F F是紧挨着E f的样式发生改变
E:hover~F F是E后面的元素 f的样式发生改变
属性：
[属性名]
标签[属性名]
(E)[属性名=“属性值”]
(E)[属性名~=“属性值”]
定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
(E)[属性名^=“属性值”] 以什么开头的属性名
(E)[属性名$=“属性值”] 以什么结尾的属性值
(E)[属性名*=“属性值”] 包含属性名不要求单独词，也就是可识别属性值
(E)[属性名|=“属性值”] 以-开头，zh-cn
伪类：
结构伪类：寻找子标签
：first-child 选择第一个元素
：last-child-选择最后一个元素
：nth-child(){}小括号里面可以是 even/odd/number(数字）/2n-1 选择第几个或者是某一类型
:nth-last-child(){}小括号里面可以是 even/odd/number(数字）/2n-1 从后面开始数选择第几个或者是某一类型
：first-of-type 选择某一类型的第一元素
：last-of-type 选择某一类型的最后一个元素
:nth-of-type(){}小括号里面可以是 even/odd/number(数字）/2n-1 同一类型的第几个或者具备某一条件的元素
;nth-last-of-type(){}小括号里面可以是 even/odd/number(数字）/2n-1 从后面开始数选择同一类型的第几个或者具备某一条件的元素
：only-child 元素是父级元素里面的唯一一个元素
：only-of-type 元素是父级元素里面同一类型的唯一一个子元素
：root匹配根元素html
:empty匹配空元素
目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
UI状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分
案例：多选框隐藏，lable背景色变色
否定伪类选择器
E:not(s) （IE6-8浏览器不支持:not()选择器。）
匹配所有不匹配简单选择符s的元素E
动态伪类选择器
E:link：
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited ：
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active：
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
鼠标按下的超链接的状态
E:hover：
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
鼠标划过超链接时的状态
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点：
焦点之后
群组选择器 ，逗号
选择器权重：
/* 通配符选择器: * 代表页面中所有标签，权重是0000 /
/ id选择器 > 类名选择器 > 标签选择器 /
/ 标签选择器权重： 0001 /
/ 类名选择器权重： 0010 /
/ id选择器权重： 0100 /
/ 行内样式权重： 1000 /
/ !important权重最高: 10000 */
继承样式的权重为0000
伪元素选择符的权重为0001
包含选择符的权重：为包含选择符的权重之和
伪类选择符的权重为0010 如 :link :visited…
CSS文本属性
文本大小
{font-size:12px;}单位还可以是em，是父级元素的font-size的倍数；/系统默认的字号大小为16px
16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;
文本字体
{font-family:字体1，字体2，字体3；}
多个字体浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体由多个单词组成时，需加双引号如（“Times New Roman”）
文本颜色
{color:颜色值;}red/#f00/rgb(255,0,0)
用十六进制(是计算机中数据的一种表示方法)表示颜色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式
R G B
FF 00 00
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#”
# fa 00 00
RGB表示方式：color:rgb(255,0,0);
rgba：颜色的透明color:rgba(255,0,0,0.5);透明度值表示范围0-1之间，如：0.1，0.2
文字加粗
font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;从细到粗的变化**
文本倾斜
font-style：italic/oblique/normal（取消倾斜，常规显示）;
italic和oblique都是倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
水平对齐方式
{text-align:left左/right右/center居中/justify两端对齐(在部分浏览器中，对于中文不起作用);} 只针对文本或图片**
垂直对齐方式
{vertical-align:top上/bottom下/middle居中/baseline基线（某些特定的元素类型起作用）;}
文字行高
{line-height:normal/50px;}line-height:20px; line-height:2em; (当行高的单位省略时，默认为em)
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下
文本修饰
text-decoration:none/underline/overline/line-through
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
首行缩进
{text-indent:20px/2em;}
1）text-indent可以取负值；
2）text-indent属性只对第一行起作用。
font复合属性
font:weight style size/line-height family
单行文本溢出 超出的部分变成省略号
容器宽度：width：200px；
white-space: nowrap; 文本不换行
text-overflow: ellipsis; 超出的部分变成省略号
overflow: hidden; 超出的部分隐藏起来
扩展知识点：实现多行文本溢出时产生省略号：不能给高度！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
挨个儿介绍：
text-overflow:
属性值clip 裁切，超出的部分被截取
属性值ellipsis 超出的部分变成省略号
white-space:属性值: normal默认值，文本自动换行，有换行和连续多个空格时，只保留一个空格
nowrap文本不换行，有换行和连续多个空格时，只保留一个空格
pre保留文本中的换行和空格
pre-line有多个连续空格时，只保留一个，但是保留换行符。
pre-wrap保留一部分空白符序列，但是正常的进行换行
CSS列表
无序列表
ul,li
有序列表
<ol> <li>
自定义列表
<dl>
<dd><dt>
属性：
list-style:none;去掉列表符号
disc/square
circle
边框的属性和属性值
边框样式：*border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)*none(去掉边框);
背景
background-color 背景颜色
background-image: url() 背景图片
background-repeat 背景平埔 repeat平埔 no-repeat不平铺 repeat-x横向平埔 repeat-y 纵向平埔
background-position: 背景定位 两个属性值： 水平位置 竖直位置 数值可以为百分比，px，也可以为left,rihgt,top,bottom,center
background-attachment : scroll (随内容一块滚动)/ fixed（固定，不随内容一块滚动，根据可视窗口固定位置；）
背景图的大小：
conver:覆盖的意思，等比例放大这个图片，铺满这个盒子为止，容易出现裁剪效果
contain:包含的意思，等比例放大这个图片，只要有图片撑满某一个方向就结束，容易出现留白区域
多背景写法
超链接标签a
href属性： 链接的路径可以为本地相对路径或者网络中的路径
target属性：
默认值 _self 在当前窗口打开新页面
_blank 在新的窗口打开页面
title属性： 鼠标放到标签上时出现的提示语
CSS控制单词换行属性
word-break
keep-all不允许文字断开
break-all允许在单词内换行 可以强行截断英文
word-wrap
单词换行
break-word在长单词或URL地址内部进行换行 将内容在边界内换行不截断英文
text-transform 控制文本大小写
capitalize首字母大写
uppercase全部转成大写
lowercase全部转成小写
font-variant
把英文字母转成大写，之前是小写的字母字体大小不变
small-caps
<div>AAAaaaaaaaaaaaaaaabbbbbbccccccccccccccccc</div>div{font-variant:small-caps;}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mvzJJeXr-1653535299599)(file://C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220302121539472.png?lastModify=1653495956)]
盒模型注意事项(margin重叠问题)
margin值的解析：左右边界累加，正常文档流的上下边界重合。
在正常文档流下，子元素（块，独占一行的）直接写margin-top时，会将margin-top属性值加上父元素身上,(子元素或父元素不设置任何浮动及定位的属性，或父元素不设置边框的情况下。)
margin的上下间距重叠问题
现象：2个上下并列结构的时候,如果给上面的盒子添加了margin-bottom,同时给下面的盒子添加了margin-top,此时应该解析的垂直间距是2者之和,但是浏览器解析的时候,会按照最大数值去解析。
解决方法：A、给下面的盒子添加父元素且添加声明overflow:hidden;
浮动
1、浮动会脱离网页文档，与其他不浮动的元素发生重叠
2、但是不会与文字发生重叠，文字会环绕浮动元素显示
使用float出现高度塌陷的原因
1.没有给父标签添加高度
2.所有子标签全部浮动，标签浮动后脱离文档流，不会再页面中占据位置，导致父标签高度塌陷
解决高度塌陷
1.给父标签添加固定高度
2.给父标签添加overflow:hidden
3.在父标签结尾添加一个空标签（不能浮动）并且设置
clear: both; height: 0; display: block;
4.给父标签添加伪元素
::after{content: '';display: block;clear: both;}
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
清除浮动
给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)**
在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;
万能清除浮动法：
选择符:after{
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
overflow:hidden;
}
(缺点：伪元素选择器在IE7及以下浏览器不识别，所以此方法只能解决IE8 及以上浏览器高度塌陷问题）
元素类型
块级元素
独占一行
添加的宽高可以生效
可以正常添加margin-top/bottom,padding-top/bottom
A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。C）块状元素都可以定义自己的宽度和高度。D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
注:p标签是一个块元素，但它只能作为内联元素（inline element）的容器；
标题标签之间不能互相嵌套
常用的块状元素包块div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,td等；
行内元素
可以与其它行内元素共处一行
添加宽高不生效
在添加margin-top/bottom,padding-top/bottom时可能无法正常显示
A) 内联元素的表现形式是始终以行内逐个进行显示； 横着排B) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效
常见的内联元素如：a,span,i,em,strong,b,br,u,del,s,sub,sup等
行内块元素
可以与其它行内元素/行内块元素共处一行
添加宽高可以生效
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
常见的行内块元素如：img，input，select，textarea等
display 可以更改元素类型
block,inline,inline-block,flex,list-item…
块级标签中li标签的display属性值为list-item
只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性
定位
position 定位属性和属性值
固定定位fixed
脱离标准文档流
固定在屏幕的某个位置【以浏览器的视口作为参照物】，会让行内元素转化为块级元素，也可以让之前margin:0 auto 失效，要想让margin:auto重新起作用，必须要配合边偏移量值为0一起使用
粘性定位sticky
粘性定位没有脱离标准文档流
当top值大于前面元素高度时，在滚动到父元素之前正常排布，当滚动到父元素时，这时候按照正常的固定定位执行
position :sticky[必须要配合边偏移量一起使用否则无效]
特性:在有滚动条的父元素中才可以执行向对应的效果，当前面有元素时，会先判断top的跟前面元素剩余高度值的大小，如果top值小于剩余高度值会先随着界面滚动，知道剩余高度值等于top属性值时才会执行固定定位;当top属性值大于前面元素高度时，一滚动到父元素的区域立马执行固定定位不会脱离标准文档流
margin: e auto依然生效不能让span设置宽度高度
相对定位relative
没有脱离文档流
相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
绝对定位absolute
脱离了文档流
margin-方位:参考为参照物的宽度的百分比//*margin-left: 5e%;
width/left/right/margin-方位:参考的是参照物的宽度height/top/bottom:参考的是参照物的高度
定位元素的层级属性
z-index : auto |number
设置定位对象的层叠顺序。
auto：默认值。遵循结构，后写的定位元素层的顺序靠上。
number:无单位的整数值。可为负数，数值越大，层的顺序越靠上
说明：
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed ，sticky的对象。
锚点连接的语法和应用场景
命名锚点的作用：在同一页面内的不同位置进行跳转。
锚点链接语法：
1)给元素定义命名锚记名
语法：<标记 id=“命名锚记名”> </标记>
2)命名锚记连接
语法：
<a href="#命名锚记名称">链接文本或图片</a>
透明
IE9以下浏览器写法：filter:alpha(opacity=value);取值范围 0-100之间的整数值
兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9—1)
rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器
表格
<table border="5px" style="text-align: center;vertical-align: middle;" cellpadding="10px" cellspacing="10px"><tr bgcolor="pink"><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td></tr><tr><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td></tr><tr><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td></tr></table>
table
宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle或bottom";
cellspacing="单元格与单元格之间的间距“ 必须给table
cellpadding=“单元格与内容之间的空隙” 必须给table；如果没有起作用，请查看是否设置了padding:0;
tr
height高度；高度不能同时加在tr和td上，如果同时使用取两者中的较大值
背景颜色bgcolor
文字水平对齐align:left/center/right
垂直对齐valign:top/middle/botton
th
width宽度
height高度
背景颜色bgcolor
文字水平对齐align:left/center/right
垂直对齐valign:top/middle/bottom
表格CSS样式
border-spacing:20px; ：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
border-collapse:separate/collapse;合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)用在日历里面
empty-cells:show/hide;定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；用在日历里面
table-layout:auto/fixed;是否固定单元格的宽度；fixed：固定宽，定义时则宽度会平均分配；高度则会随内容变化；当table上有高度时在使用table-layout；
caption-side:top/bottom；表格标题位置；左右对齐text-align:left/right；
合并单元格属性
colspan=“所要合并的单元格的列数”合并列;必须给td
rowspan=“所要合并单元格的行数”合并行; 必须给td
表格行分组
thead,tbody,tfoot
表单
<form action="" method=""> <!-- min 最小值 max 最大值 step 数字间隔-->数字输入框<input type="number" min="" max="" step="" value="" />滑块控件<input type="range" min="" max="" step="" value="" /><p><!-- multiple 可以书写多个邮箱，邮箱号之间以逗号隔开 --><!-- 注意：在标签属性中，如果属性名和属性值一样，可以省略属性值，只写属性名 -->邮箱： <input type="email" multiple name="" id="" value="" /></p><p><input type="url" name="" id="" value="" /></p><!-- 日期表单 --><p>日<input type="date" name="" id="" value="" /></p><p>周<input type="week" name="" id="" value="" /></p><p>月<input type="month" name="" id="" value="" /></p><p>时间<input type="time" name="" id="" value="" /></p><p>本地时间<input type="datetime-local" name="" id="" value="" /></p><p>(世界统一时间,苹果浏览器中可以使用)时间<input type="datetime" value="" /></p><input type="submit" id="" name="" value="提交" /></form>
<form action="" method="" novalidate="novalidate"><!-- novalidate 取消验证 只能给form标签添加 --><p><!-- required 必填校验，输入框提交时不能为空 -->必填输入框:<input type="text" required="required" id="" value="" /></p><p><!-- placeholder 占位符 -->占位符:<input type="text" placeholder="提示文本" id="" value="" /></p><p><!-- maxlength 最大长度 -->最大长度为10:<input type="text" maxlength="10" id="" value="" /></p><input type="submit" value="提交"></form>
Form中的获取数据的两个方式get和post的区别？
get请求通常是从服务器上获取数据，post请求通常表示向服务器提交数据。
get请求发送的数据都写在地址栏上，用户可见。而post请求发送的数据用户不可见。
get请求不能提交大量的数据，但post可以，因此不要混用。
建议:
get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
BFC
Block Formatting Contexts (块级格式化上下文)
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
成为BFC
根元素 html默认就是一个BFC
float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
position的值为absolute或fixed
有什么影响
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
BFC内部的Box会在垂直方向，一个接一个的放置。
每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
宽高自适应
自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适
宽度自适应高度自适应
宽度自适应
元素宽度的默认值为auto
1.块标签不写宽度 2.使用% 3.设置最小宽度和最大宽度
高度自适应
元素高度的默认值 {height:auto;}
浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)
方法2:在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;
（缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）
方法3:万能清除浮动法
选择符:after{content:" ";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}
(缺点：伪元素选择器在IE7及以下浏览器不识别，所以此方法只能解决IE8 及以上浏览器高度塌陷问题）
伪元素
:after(与content属性一起使用，定义在对象后的内容。)如：div:after{content:url(logo.jpg);} div:after{content:“文本内容”;}
:before:与content属性一起使用，定义在对象前的内容如：div:before{content:“在其前放内容”;}
:first-letter:定义对象内第一个字符的样式
:first-line:定义对象内第一行文本的样式
元素的显示与隐藏和透明
display:none
隐藏后的元素不占页面空间，后面元素上去补位置
visibility:visible(显示)/hidden(隐藏)
隐藏元素，但是隐藏后的元素仍占页面空就按
opcity:0
隐藏元素，占页面空间
height:0px;/不设置高度
隐藏元素可以,不占页面空间,
弊端:如果里卖弄有文本的话,文本会留在原来的位置;可以配合font-size:0px/oveflow:hideen/visibility:hideen
使用缩放====缩放比例为0
transform:scale(0)
透明:
transparent(透明色)===背景
rgba(0,0,0,0)====背景
a==alpha透明度0-1 0代表的是透明；1代表的是不透明
opacity======透明度的意思
这个透明度取值范围0-1；不单纯只透明背景颜色，还能透明内容，文本，图片，边框等等
0=透明 1=不透明
IE浏览器的兼容 filter:alpha(opcity=数值) 数值：1-100
最小最大宽高
min-height属性：最小高度；
min-width:最小宽度
max-height:最大高度
max-width:最大宽度
窗口自适应
盒子根据窗口的大小进行改变
设置方法：html,body{height:100%;}
iframe使用
作用：iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
语法：
frameborder=“1/0” 1代表有框架边框 /0代表无框架边框
滚动条：scrolling=“yes/no/auto” yes :有 no:无 auto：自动
表示超链接的目标地址在框架中打开
calc()函数的使用
calc() 函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
h5新增标签
header头部：表示页面中一内容区域或整个页面的标题
nav导航栏：表示页面中的导航链接部分
main主要部分：
footer尾部：表示页面中一内容区域或整个页面的脚注
section：表示页面中的一个区块
article：表示页面一块与上下文无关的独立内容（类似section某一具体的介绍）
aside：侧边栏
figure：
表示一段独立的内容内容，使用figcaption元素为其添加
标题（第一个或最后一个子元素的位置
类似dl,dt,dd
<div>正常的块标签</div> <nav>导航标签</nav><aside>辅助信息(一般用于侧边栏)</aside><section>内容板块</section><article>文章</article><footer>底部标签</footer><mark>高亮显示文本1</mark><mark>高亮显示文本2</mark><mark>高亮显示文本3</mark><hgroup></hgroup><dialog open=""></dialog><canvas id="" width="" height=""></canvas><main></main>
行内块标签在高度100px的父元素中上下居中，父标签代码怎么设置，子标签怎么设置
父标签：line-height:100px
子标签：vertical-align:middle
新增video audio
video标签属性
autoplay 自动播放属性(在谷歌和火狐浏览器中被禁用)
controls 控制台
loop 循环播放
poster 视频第一帧图片（封面）
preload 预加载
可以设置宽度，高度
muted静音
<video autoplay controls loop width="800" height="" poster="./logo.png" preload="auto"><!-- src:视频路径 type:视频对应格式 --><source src="./3theA.mp4" type="video/mp4"></source><!-- <source src="./3theA.mp4" type="video/ogg"></source><source src="./3theA.mp4" type="video/webm"></source> --></video>
audio标签属性
autoplay 自动播放属性(在谷歌和火狐浏览器中被禁用)
controls 控制台
loop 循环播放
preload 预加载，在有autoplay属性的时候，不起作用
autoplay不兼容使它生效必须添加muted
<audio src="./周杰伦%20-%20Mojito.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
CSS的comment样式
html,body{
height:100%;
}
a{
text-decoration=none;
color:#000;
}
li,ol,ul{
list-style:none;
}
img{
vertival-align:top;
}
清除浮动
.clearfix::after{
content:‘’;
display:block;
clear:both;
}
常用浏览器
常用浏览器：火狐（firefox) ,IE,谷歌(chrome),safari(),Opera()
safari是苹果浏览器
IE -ms-
firefox -moz-
欧朋浏览器 -o-
谷歌/苹果 -webkit-
渐进增强，优雅降级
文本阴影
阴影左右位置，阴影竖直位置，阴影模糊程度，阴影颜色
渐变
径向渐变：
background:linear-gradient(度数或者to right top[右上角],red,right [颜色后面空格可加百分数占比或者px大小值])
兼容性：
background：-ms-linear-gradient(left,red,yellow);
background：-moz-linear-gradient(top,red,yellow);
background：-webkit-linear-gradient(bottom,red,yellow);
background: radial-gradient(circle closest-side at 30% 50%,red 10%,yellow 20%);
线性渐变：
border:1px solid #000000;
radial-gradient（center,circle/ellipsis,不同尺寸[],red 15%,green 60%,blue 100%）
radial-gradient(30% 50%按中心点偏移发散这里是在中心点左偏移20%,closest-side,red,yellow,blue)
farthest-side最远边
closest-corner最近角
farthest-corner最远角
transition过渡
transition
transition-property：过渡的样式，默认是all
transition-duration：运动时间、
transition-delay：延迟时间
transition-time-function：运动形式【linear ease ease-out ease-in ease-in-out cubic-bezier(贝塞尔曲线) steps（）实现一个关键逐帧动画的功能】
transform 2D转换
none 默认
translate() 位移
rotate() 旋转
scale() 缩放
skew()倾斜 单位deg
perspective()景深
matrix()矩阵
transform：rotate3d(0,0,1,30deg)定义3D旋转
transform：scaleX（n）scaleY（n）scaleZ（n）n取负值时元素会进行翻转（顺时针180deg）然后在进行缩放
transform：skew X（）X轴倾斜转换 skewY（）Y轴倾斜转换
例：skew(30deg,30deg)
运动基点：
transform-origin：可以是百分数 px center、left、right、top、bottom
合用
transform:translate(150px,150px) scale(1.5);
动画
animation:play（动画名称） 10s linear 2s 执行次数（1一直执行 infinite无限执行）
animation-name：play
animation-duration：10s
animation-timing-function:linear
animation-delay：2s
animation-iteration-count:执行次数 infinite
@keyframes name(这里的name和animation-name一样){
from{
动画开始第一帧的样式
}
to{
动画最后一帧的样式
}
还可以写作{
百分比{
}
}
}
animation-direction：是否定义应该轮流反向播放动画；alternate：动画会在奇数次数（1，3，5等）正常播放
，而在偶数次数（2，4，6等）向后播放。
animation和transition的区别？
相同点：都随时间改变元素的属性值
不同点：
需要触发一个事件才会随时间改变其CSS属性
animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值，达到一种动画效果，CSS3 的animation就需要明确的动画属性值。
CSS中的3D相关属性
CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
transform-style:flat（默认）/preserve-3d（表示所有子元素都在3D空间中呈现）;
需要设置在父元素中，并且高于任何嵌套的变形元素
perspective：200px;景深
设置用户与元素3D空间Z平面之间的距离。
perspective-origin：用来决定perspective属性的源点角度
backface-visibility属性
旋转背面是否可见：backface-visibility：visible 反面可见/ hidden 反面不可见
CSS弹性盒子
标准盒模型
怪异盒模型
属性：box-sizing
属性值：content-box标准盒
属性值：border-box怪异盒
flex:
父元素成为容器 子标签成为项目
flex布局只会影响第一代子标签
属性：
用来设置子标签排列顺序的
弹性盒模型中子标签的排列顺序按照主轴方向排列
父元素：
1 display：flex：
inline-flex：
2 flex-direction 设置主轴方向 row column column-reverse从下往上 row-reverse从右往左
3 justify-content设置项目在主轴上的排列方式
属性值：
flex-start默认
flex-end
space-between左边右边靠边 中间间隔相等
space-around 环绕对其 左右空间间隔是中间间隔的一半
center 主轴中间排列
4 align-items 设置容器在侧轴上的排列
属性值：
stretch高度拉伸盛满侧轴父元素高度
flex-start项目在侧轴起始段对其
flex-end项目在侧轴末尾对其
center侧轴中间对其
baseline基线对齐
5 flex-wrap换行
属性值：
nowrap默认不换行
wrap换行
wrap-reserve反转行
6 align-content定义主轴在侧轴方向上的排列（限制：有多条主轴可用）
属性值：
默认streth主轴评分侧轴空间
flex-start侧轴起始段排列行和行之间没有间隔
flex-end侧轴末尾端排列
center侧轴中间排列
space-around
space-between
order占比
align-self
定义某个项目自身在侧轴上的对齐方式
属性值：
auto 默认值 继承父标签align-items的属性
flex-start
flex-end
center
9 flex
复合属性 设置或检索弹性盒模型对象的子元素如何分配空间
flex：1 = 1 1 0%
flex:auto = 1 1 auto
flex:none = 0 0 auto
flex: 0 auto 或者flex:initial = 0 1 auto 初始值
10 flex三个属性值介绍
flex-grow：规定项目将相对于其他项目进行扩展的量
主轴上有空余，则把空余的空间给当前项目的长度
flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量
flex-basis：项目的长度
多列布局
父元素中：
column-count：栏数
column-width：栏的宽度 不够改变栏数
column-gap：栏之间的间隔
column-rule 分割线
子标签中：
column-span:1 或者 all 子标签跨多列
break-inside： auto可中断 或者 avoid不可中断
注：
column-span: all;的效果如下图：
column-count和column-width用的时候只能用column-count；
column-count自动给子项目分配大小，
column-width给子项目分配具体的大小
媒体查询
@media媒体查询
screen当前设备宽
min-width最小宽
@media screen and (min-width:1080px){
}
移动端
<meta name="view" width=device-width initial-scale=1 user-scalable=no
设备像素比dpr:物理像素/CSS像素
dpr==2安卓 750/375
dpr==3苹果 1080 1220 /414
布局视口980 1024
视觉视口用户看到一部分，剩下的
理想视口完全适配设备
布局视口-》理想视口
meta name=“viewport”
弹性布局100%
等比缩放布局rem
移动端布局
单位：相对长度
em相对于父标签的字体大小
rem相对于根标签
vw 1vw、vh=视口宽度/高度的1%
使用理想视口
使用rem和vw结合
实现等比缩放的网页布局：
320屏幕为例
dpr==2
font-size:100px ==
1rem ==100px
1vw=3.2px
1rem==31.25vw
640的设计图量出高度88px
88px/dpr == 88/2 == 44px == .44rem
100vw与100%进行对比：
100vw加上滚动条
100%不加滚动条
手机端中：100vw就是350px
100px
7.5
1rem=13.34vw
grid布局
只会影响第一层子标签
添加网格布局的是容器
子标签称为项目
格子组成的线：
m行 n列
需要的线数：m+1+n+1
父元素：
main{width: 1000px;height: 400px;border: 1px solid #000066;display: grid;// 七列grid-template-columns: repeat(7, 100px);// 三行grid-template-rows: repeat(3, 100px) ;// 行间距grid-row-gap: 20px;// 列间距grid-column-gap: 20px;}
子项目：
main>div:nth-child(1){// 将第一条行线和第三条行线划分为一个块，grid-row: 1 / 3;grid-column: 1 / 3;}main>div:nth-child(2){grid-column: 3 / 5;}main>div:nth-child(3){grid-column: 5 / 7;}main>div:nth-child(4){}main>div:nth-child(5){grid-column: 3 / 5;}main>div:nth-child(6){}main>div:nth-child(7){grid-column: 6 / 8;grid-row: 2 / 4;}main>div:nth-child(8){}main>div:nth-child(9){}main>div:nth-child(10){grid-column: 3 / 5;}main>div:nth-child(11){}
效果展示：
让内容限定在第几行显示省略号
转化为伸缩盒子
让子元素或者里面的内容在垂直方向上排布
让内容限定在第几行显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
HTML和CSS简单整理相关推荐
- 哪些CSS是可以被继承的--简单整理
那些CSS是可以被继承的--简单整理 1.文本相关属性是继承的:font-size,font-family,line-height,text-index等 2.列表相关属性是继承的:list-styl ...
- css不换行属性_那些不常见，但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
- HTML CSS 学习整理
HTML CSS 学习整理 码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方 点击链接后退页面: 回到上一个网页 这是一个简单的跳转页面操作 --修改plac ...
- CSS 知识整理(三) 样式
CSS 知识整理(三) 样式 目录 CSS 知识整理(三) 样式 一.字体 二.文本 三.列表 四.背景 一.字体 字体:font-famliy 字号:font-size 粗细:font-weig ...
- LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理
LVGL 之 windows 上 lvgl 模拟器 基于 Visual Studio 搭建方法的简单整理 目录 LVGL 之 windows 上 lvgl 模拟器 基于 Visual Studio 搭 ...
- Web 之 html 如何显示隐藏Html元素的两种方法简单整理
Web 之 html 如何显示隐藏Html元素的两种方法简单整理 目录 Web 之 html 如何显示隐藏Html元素的两种方法简单整理 一.简单介绍 二.实现原理 三.注意事项 四.代码示例 一.简 ...
- linux简单目录,Linux下各目录简单整理
实习之后一直在用Linux,但是对于每个目录并不是很了解,上次阿里的面试问到了,只能靠着自己的使用经验稍作回答,不全面也不准确,所以今天简单整理一下方便以后自己查看- 1./bin 重要的二进制应用程 ...
- java 系统 类_JAVA系统类 System的简单整理
对系统属性看着JDKapi做了简单的记录,尤其是文件分隔符,以及获取系统时间,数组拷贝实用比较多谢,随意正对这几个做下简单整理,需要引入junit单元测试的jar包 //获取所有系统属性 @Test ...
- 网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
最新文章
- linux系统中指定端口连接数限制
- vm虚拟机中 Kali更新后 不能自动适应窗口
- 安装Putty远程终端连接工具
- doctype html h5,HTML DOCTYPE
- Web-DispatcherServletUrlPatterns
- LeetCode 540. 有序数组中的单一元素(Single Element in a Sorted Array) 42
- 又一个查询，哥整了一天，NND有点受不鸟了
- Mac一体化数据库管理和迁移工具Navicat Premium
- files函数提取文件名HTML,Excel小技巧之轻松提取文件夹中的文件名
- 西门子S7-1200系列PLC Modbus通信的踩坑记录
- Spring Validation 验证框架全面总结
- Intelligent Reference Curation for Visual Place Recognition via Bayesian Selective Fusion 论文阅读及注解
- 美国人口的模型预测——非线性最小二乘法
- swift 时间选择器第三方。公历转农历，农历转公历。
- 小程序开发可以用什么语言？
- Poisoning Attack in Adversarial Machine Learning
- LiDAR点云处理软件
- JDK1.8.0_181安装以及环境配置教程（Win10系统）
- Day1-介绍、基本语法、流程控制
- B站哔哩哔哩21届秋招算法岗笔试 假设货币系统包含面值1元、4元、16元、64元共计4种硬币，以及面值1024元的纸币。现在小明使用1024元的纸币购买了一件价值为N（0＜N＜=1024）的商品