HTML+CSS笔记整理

XI.占位 placeholder="内容"XII.按钮 button只起到跳转作⽤，不进⾏提交。 submit是提交按钮 起到提交信息的作⽤XIII.单选框男⼥单选按钮⾥的name属性必须写，同⼀组单选按钮的name属性值必须⼀样。XIV.复选框(disabled="disabled" :禁⽤)(checked="checked" :默认选中)⼆、CSS基础汉译: 层叠样式表，就是如何修饰⽹页信息的显⽰样式。 层叠性：给同⼀个元素添加相同的CSS属性，属性值会存在覆盖问题（代码执⾏顺序从上向下执⾏）语法： CSS由两部分组成：选择符（选择器）例div{}，声明（属性：属性值组成）例：声明{属性：属性值；}语法说明：a.每个CSS样式由两部分组成，即选择符和声明，声明⼜分为属性和属性值；b.属性必须放在花括号中，属性与属性值⽤冒号连接。c.每条声明⽤分号结束。d.当⼀个属性有多个属性值的时候，属性值和属性值不分先后顺序。e.在书写样式过程中，空格，换⾏等操作不影响属性显⽰。样式表a.内部样式表：内部样式的作⽤域是当前⽂件。在head标签内写style标签，在style标签内写选择器和声明。b.外部样式表：外部样式表的作⽤域是有关联的所有⽂件。创建外部CSS⽂件，通过link标签引⼊外部css⽂件。例如：(多数使⽤)或者@import url(路径)c.内联样式表：⾏内（内联）样式的作⽤域是当前标签。在标签⾥写style="属性：属性值；属性：属性值；..."d.样式表的优先级！important>内联>内部/外部内联样式表的优先级别最⾼内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别⾼。选择器选择器：通过class起名字，通过.名字设置样式。b.群组选择器 语法：选择符1，选择符2，选择符3......{属性：属性值;} 说明：当有多个选择符应⽤相同的样式时，可以将选择符⽤“，”分隔的⽅式，合并为⼀组。c.包含选择器语法：选择符1 选择符2{属性：属性值;}说明：选择符1和选择符2⽤空格隔开，含义就是选择符1中包含的所有选择符2;d.伪类选择器 语法： a:link{属性：属性值;}超链接的初始状态; a:visited{属性：属性值;}超链接被访问后的状态; E:hover{属性：属性值;}⿏标划过元素时的状态; E:active{属性：属性值;}即⿏标按下时元素的状态;*当这4个超链接伪类选择符联合使⽤时，应注意他们的顺序选择器 语法：#id名{属性：属性值;} 说明：

当我们使⽤id选择符时，应该为每个元素定义⼀个id属性； 如：

id选择符的语法格式是“#”加上⾃定义的id名； 如：#top{width:300px; height:300px;}

起名时要取英⽂名，不能⽤关键字：(所有的标记和属性都是关键字) ⼀个id名称只能对应⽂档中⼀个具体的元素对象，因为id只能定义页⾯中某⼀个唯⼀的元素 对象。

最⼤的⽤处：创建⽹页的外围结构.f.通配符【*】 作⽤：选中页⾯上所有元素。常⽤来重置样式。如清除默认边距*{margin：0；padding：0；}g.选择符的权重(!important的权重最⾼)css中⽤四位数字表⽰权重，权重的表达⽅式如：0，0，0，0类型选择符的权重为0001class选择符的权重为0010id选择符的权重为0100⼦选择符的权重为0000属性选择符的权重为0010伪类选择符的权重为0010伪元素选择符的权重为0001包含选择符的权重：为包含选择符的权重之和⾏内样式的权重为1000 继承样式的权重为⽂本属性a.字体⼤⼩：选择器（font-size:12px/14px/16px;） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。 单位还可以是pt，9pt=12px； 默认情况下：1em=16px,0.75em=12px,1ppi=16px;b.⽂本字体：{font-family:"宋体"，“⿊体”；}加粗：{font-weight：bolder/bold/normal/100-900;}取值范围100-500不加粗，600-900加粗。-transform:none/capitalize⾸字母⼤写/uppercase将单词全部变成⼤写/lowercase将单词⼤写转变为⼩写。（⿏标滑过）e.字体风格：{font-style:normal常规字体/italic/oblique倾斜;} 说明： 1）italic和oblique都表⽰倾斜，不过oblique的幅度要⼤⼀点。但⼀般浏览器对它们的区分不是很明显。f.⽔平对齐⽅式:{text-align:left/right/center/justify（两端对齐中⽂不起作⽤）;}g.垂直(基线)对齐⽅式{vertical-align:top/bottom/middle;}h.⾏⾼{line-height:normal/数值；} 说明： 当单⾏⽂本的⾏⾼等于容器⾼时，可实现单⾏⽂本在容器中垂直⽅向居中对齐； 当单⾏⽂本的⾏⾼⼩于容器⾼时，可实现单⾏⽂本在容器中垂直中齐以上任意位置的定位； 当单⾏⽂本的⾏⾼⼤于容器⾼时，可实现单⾏⽂本在容器中齐以下任意位置的定位。i.⽂本修饰：text-decoration:none/underline/overline/line-through说明： none：没有修饰 underline：添加下划线 overline：添加上划线 line-through：添加删除线j.⾸⾏缩进：text-indent:..(推荐单位⽤em)；em参考对象是当前字号。可以取负值，只对第⼀⾏起作⽤。k.字间距 {letter-spacing:value;}控制英⽂字母或汉字的字距。l.词间距{word-spacing:value;}控制英⽂单词词距。6 列表相关属性a.定义列表符号样式： list-style-type：disc(实⼼圆)/circle（空⼼圆）/square(实⼼⽅块)/none。 使⽤图⽚作为列表符号：list-style-image:url(所使⽤图⽚的路径及全称); 定义列表符号位置：list-style-position:outside（默认外⾯）/inside⾥⾯;

关于列表属性的简写：list-style:; 7 边框的相关属性a.边框：边框宽度：border-width 边框样式：border-style 边框颜⾊：border-colorb.边框线型：soild:实线； dashed:虚线； dotted:点状线； double:双线； none:没有边框c.单独设置某个⽅向的边框属性：border-top:上边框border-bottom:下边框border-left:左边框border-right:右边框d. transparent 为透明⾊e.边框阴影： 语法：box-shadow:属性值； 属性值：x-offset(右) y-offset(下) blur模糊区域 spread扩展区域 color inset向内 或者简写：box-shadow:0px 0px 0px 0 #ccc inset; ⽔平⽅向（正值为右）垂直⽅向（正值为下）模糊度 放⼤ 颜⾊ 在⾥/外f.边框图⽚ 语法：border-image（1）边框图⽚资源 border-image-source:url().默认会将图⽚显⽰在边框的四个⾓（2）边框图⽚的裁剪 border-image-slice(0 0 0 0上右下左)（3）边框图⽚的宽度,默认为边框宽度。border-image-width（⼀般不写）（4）边框图⽚的平铺border-image-repeat 属性值：stretch拉伸（默认） repeat重复 round缩放后的重复（5）边框图⽚向外延伸 border-image-outset(不能为负值) 。8.引⼊背景图⽚:background-image:url();png⽀持背景透明，jpg不⽀持背景透明。设置背景图⽚⼤⼩：background-sia.背景图⽚的显⽰原则容器尺⼨等于图⽚尺⼨，背景图⽚正好显⽰在容器中；容器尺⼨⼤于图⽚尺⼨，背景图⽚将默认平铺，直⾄铺满元素；容器尺⼨⼩于图⽚尺⼨，只显⽰容器/元素/范围以内的背景图。a.背景图⽚平铺属性语法：background-repeat:no-repeat/repeat/repeat-x/repeat-yno-repeat:不平铺

repeat:平铺

repeat-x:横向平铺repeat-y:纵向平铺b.背景图位置background-position:⽔平⽅向值：left/center/right或数值垂直⽅向值： top/center/bottom或数值c.背景图的固定语法：选择符{background-attachment:scroll(滚动)默认的/fixed(固定);}说明：记得⽤在有滚动条的地⽅；d.各属性的缩写语法：选择符{background：属性值1 属性值2 属性值3;}ound-sizee 渐变gradient（属性值）1.线性渐变background: linear-gradient(yellow, blue,pink,#58bc58,...); 标准语法（必须放在最后）2.对⾓渐变background: -webkit-linear-gradient(left top, red , blue);[ Safari 5.1 - 6.0 ]background: -o-linear-gradient(bottom right, red, blue); [ Opera 11.1 - 12.0 ]background: -moz-linear-gradient(bottom right, red, blue); [ Firefox 3.6 - 15]background: linear-gradient(to bottom right, red , blue); [标准的语法（必须放在最后）]3.⾓度渐变(新版本旋转⽅向正值为顺时针，⽼版本旋转⽅向正值为逆时针）background: -webkit-linear-gradient(0deg, red, blue);[Safari 5.1 - 6.0 ]background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */background: linear-gradient(0deg, red, blue);[标准语法(必须放在最后）]4.颜⾊结点（不均匀分布）background: linear-gradient(red 50%, blue 70%,yellow);5.径向渐变background: -webkit-radial-gradient(red, green, blue);[ Safari 5.1 - 6.0]background: -o-radial-gradient(red, green, blue);[Opera 11.6 - 12.0 ]background: -moz-radial-gradient(red, green, blue);[Firefox 3.6 - 15]background: radial-gradient(red, green, blue);[标准的语法 必须放在最后]颜⾊（不均匀分布） 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表⽰圆形，ellipse 表⽰椭圆形。默认值是 ellipse。7.重复的径向渐变repeating-radial-gradient() 函数⽤于重复径向渐变属性值：（1）数值、百分⽐:⽔平⽅向 垂直⽅向;[可能发⽣扭曲]（2）cover:覆盖，背景图⽚完全覆盖容器[可能会丢失⼀部分图 ⽚,不会发⽣扭曲]（3）contain:包含，容器完全包含背景图⽚[容器可能会出现空 ⽩区域]（背景图不会发⽣扭曲和丢失）*轮播图，ui⼀般会给⼀张超级⼤的图⽚轮播图的做法：引⼊背景图background-image、设置背景图⼤⼩background-size:cover、背景图定位background-position:center center;ound-origin 背景的定位区域换句话说，就是background-position的原点（0，0）在哪个区域的左上⾓注意区分：background-position 背景在容器的定位区域的什么位置摆放属性值：padding-box（padding以内，默认）content-box内容以内border-box边框以内 9.浮动详解1.浮动属性语法：float:none/left/right;注： *浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌。

*浮动后的元素会脱离标准流(不会脱离⽂本流)

*浮动后的元素相当于置换元素（⼀⾏显⽰多个、可以设置宽⾼）2.盒模型的概念盒模型是CSS布局的基⽯，规定了⽹页元素如何显⽰以及元素间相互关系。CSS定义所有的元素都可以拥有像盒⼦⼀样的外形和平⾯空间。3.盒模型的组成内容区content、内填充 padding、边框border、外边距margin内填充：padding,在设定页⾯中⼀个元素内容到元素的边缘(边 框) 之间的距离。 也称补⽩。padding不可以写负值！g作⽤：改变⼦元素或内容在⽗元素的位置。padding值是额外加在元素原有⼤⼩之上的，为保持元素⼤⼩不变，需要从元素宽或⾼上减掉后添加的padding属性值。padding设置⼀个值的时候，为上下左右；padding设置两个值时，为上下、左右；padding设置 为三个值时，上、左右、下；padding设置四个值时，为上、右、下、左；可以设置单独⽅向的paddingpadding-top：value；上padding-bottom：value；下padding-left:value;左padding-right:value;右5.外边距margin，margin可以写负值！ 作⽤：控制盒⼦跟盒⼦之间的间距。说明：可单独设置某⼀⽅向边界 margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界

margin属性值的四种⽅式的表⽰⽅法和Padding相同。10 元素类型元素分类为块状元素，内联（⾏内）元素，置换元素（⾏内块元素）。2.块级元素(div、form、p、ul、ol、dl、dt、dd、li、 特点：独占⼀⾏显⽰，可以写width和height。块状元素⼀般为其他元素的容器，可以容纳其它内联元素和部分块状元素，例如div>p;3.⾏内元素(a,b,br,i,em,label{表单标签}，img等) 特点：多个在⼀⾏显⽰，不可以写width和height。 内联元素⽀持盒模型，但个别属性不能正确显⽰：padding-top、padding-bottom4.元素类型的转换 盒⼦模型可通过display属性来改变默认的显⽰类型 作⽤：该属性设置或检索对象元素应该⽣成的盒模型的类型。 语法：display：block（块状元素）/inline（⾏内元素）/inline-block（⾏内块元素）/none（隐藏元素）

5.>该选择器只会选择第⼀代的元素，⽤法.u1>li:hover {}6.元素添加float属性，就相当于给该元素加了display:inline-block;11 元素定位+锚点1.属性position 属性值：static默认值 ，absolute绝对定位【绝对定位默认依据(html)定位】 ，relative相对定位 ，fixed绝对定位（固定定位） 需要配合⽅向（top,bottom,right,left）使⽤。1.1 绝对定位：如果⽗元素有定位，依据有定位的⽗元素定位（定位值不为static时）。 绝对定位会脱离布局流，不占位。 层级顺序z-index：number；默认为0，数值可以取负值，值越⼤在上层显⽰，需要配合定位使⽤。1.2相对定位 依据⾃⾝原来的位置定位。 ⼦元素依据⽗元素定位⼝令：⼦绝⽗相。 相对定位不会脱离布局流，原来的位置占位。2.元素始终在窗⼝上下左右居中⽅法⼀：position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;⽅法⼆：position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;说明：当⼀个元素有绝对定位（absolute）的情况下，如果该元素的⼦元素需要以该元素为参照物进⾏绝对定位，那么⼦元素可以直接加position:absolute;3.固定定位position：fixed需要配合⽅向使⽤。4.绝对定位和相对定位的区别a参照物不同，绝对定位的参照物是包含块（已定位的⽗元素），相对定位的参照物是元素本⾝默认的位置；

b绝对定位将对象从⽂档流中拖离出来因此不占据空间，相对定位不破坏正常的⽂档流顺序⽆论是否进⾏移动，元素仍然占据原来的空间。5.锚点链接 命名锚点的作⽤：在同⼀页⾯内的不同位置进⾏跳转。 制作锚标记： 1)给元素定义命名锚记名 语法：<标记div id="命名锚记名"> 2)命名锚记连接 语法：y:0.5;(⽂字和背景都透明)（取值范围0~1） background:rgba(,,,透明度)7.滚动条 说明：Overflow内容溢出时的设置 属性： overflow ⽔平及垂直⽅向内容溢出时的设置 overflow-x ⽔平⽅向内容溢出时的设置

overflow-y 垂直⽅向内容溢出时的设置

以上三个属性设置的属性值: visible,scroll,hidden,auto. visible 默认：其中的内容⽆论是否超出范围都将被显⽰。

hidden ：任何超出“width”和“height”的内容都会隐藏。 scroll ：⽆论内容是否超越范围，都将显⽰滚动条。 auto ：当内容超出范围时，显⽰滚动条，否则不显⽰。8.滚动字幕语法：

direction="up/down/left/right" 滚动的⽅向

scrollamount=“value” 滚动速度

height="value" 滚动的范围

width="">behavior（⾏为）="scroll(滚动)/alternate（晃动） direction（⽅向）="up(从下向上)/down（从上向下） /left（从右向左）/right（从左向右）”

scrollamount（滚动速度）="value"height="value(上下滚动范围)" width=""(左右滚动范围) 12 图⽚整合1.精灵图使⽤软件CSS Satyr v1.2,exe图⽚⽣成后，head部分⽤.pic写图⽚位置，再⽤.pic-$的位置。body部分使⽤标签使⽤精灵图。

2.滑动门说明：滑动门是利⽤CSS背景图像可层叠性，并允许彼此之上进⾏滑动来创造⼀些特殊动态效果。特征：使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的⾼效扩展性。13 宽⾼⾃适应1.宽度⾃适应 若块级元素宽度不设置，或者设置成100%，都是占据其⽗级元素的⼀整⾏（继承⽗元素宽度）。 应⽤场景：页⾯最外层的盒⼦⼀般都要占据屏幕的⼤⼩，所以宽度100%。⼦元素使⽤百分⽐表⽰盒模型任意部分⼤⼩的话，代表的是⼦元素盒模型任意部分尺⼨=⽗元素宽度*百分⽐;2.⾼度⾃适应1）⽗元素⾼度由⼦元素撑开(1)若是⼦元素都浮动了，⽗元素不会被撑开（⾼度塌陷）解决办法(清除浮动):* 给⽗元素添加最后⼀个⼦元素(块级元素){ height:0;overflow:hidden;clear:both; (clear:left/both/right)}缺点：造成不必要的浪费* 给⽗元素添加{overflow:hidden;}缺点:可能造成需要的部分被隐藏掉* 伪元素清除法.（万能清除法）.clearfix::after{content:"";display:block;height:0;overflow:hidden;visibility:hidden;clear:both;zoom:1;}备注：使⽤时，给⽗元素添加类名 clearfix即可。clear:both清除浮动 clear:left清除左浮 clear:right清除右浮(2)预防⼦元素会没有内容，撑不开⽗元素的情况 解决办法：给⽗元素添加最⼩⾼度min-height。（当内容⾼度⼩于最⼩⾼度时，按最⼩⾼度显⽰。当内容⾼度⼤于最⼩⾼度时，按内容⾼度显⽰）BFC块级格式化上下⽂14 块级格式化上下⽂ (Block Formatting Context)BFC是⼀个独⽴的布局环境，其中的元素布局是不受外界的影响。满⾜下列条件之⼀就可触发BFC　　【1】根元素，即HTML元素　　【2】float的值不为none　　【3】overflow的值不为visible　　【4】display的值为inline-block　　【5】position的值为absolute或fixed特性【1】阻⽌垂直外边距（margin-top、margin-bottom）重叠属于同⼀个BFC的两个相邻块级⼦元素（元素都要在⽂档流中）的上下margin会发⽣重叠—— 分为两个BFC就可以消除这种margin 重叠解决： 触发其中⼀个div的BFC，使得两个div不在同⼀个 BFC内，这样就可以阻⽌这两个div的margin重叠,display:inline-block;【2】包含浮动元素可以包含它内部的所有元素，包括浮动元素——因此⼀清除内部浮动解决：清除浮动， overflow: hidden;，为其本⾝创建⼀个BFCbfc的作⽤：1.⾃适应两栏布局2.可以阻⽌元素被浮动元素覆盖3.可以包含浮动元素——清除内部浮动4.分别属于不同的BFC时可以阻⽌margin合并 15 浏览器兼容⼀、常⽤的浏览器 1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic / Netscape Navigator(⽹景领航者)（1994-2008）简称NN⼆、五⼤浏览器内核·Trident （MSHTML）（ie 三叉戟；三叉线；三齿鱼叉）·Gecko （壁虎 firefox）·Presto （ 欧朋opera）·Webkit （Safari内核,Chrome内核原型,它是苹果公司⾃⼰的内核，也是苹果的Safari浏览器使⽤的内核）·Blink (由Google和Opera Software开发的浏览器排版引擎)。16 伸缩布局盒模型（弹性盒模型）1.说明： css3引⼊⼀种新的布局模式——flexbox布局，即伸缩布局盒模型，⽤来提供⼀个更有效的⽅式制定、调整和分布⼀个容器⾥的⼦项⽬布局，即使他们的⼤⼩是未知或者动态的。 主要思想是让容器有能⼒让其⼦项⽬能够改变其宽度、⾼度（甚⾄顺序），以最佳的⽅式填充可⽤空间（主要是为了适应所有类型的显⽰设备和屏幕⼤⼩）。flex容器会使⼦项⽬扩展来填充可⽤空间，或缩⼩他们以防⽌溢出容器。 x布局功能主要具有以下⼏点：a.屏幕和浏览器窗⼝⼤⼩发⽣变化也可以灵活调整布局；b.指定伸缩项⽬沿着主轴或侧轴按⽐例分配额外空间，从⽽调增伸缩项⽬的⼤⼩；c.指定伸缩项⽬沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项⽬之前、之后或之间；d.指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；e.控制元素在页⾯上的布局⽅向；f.按照不同于标准流所指定的排序⽅式对屏幕上的元素重新排序。 3.弹性盒⼀、设置在容器：⽗元素上。 1）使其变为弹性盒： 语法：display:flex; 说明：规定⼦项⽬在⽗元素主轴⽅向（默认⽔平）⼀⾏显⽰，不会换⾏。侧轴⽅向（默认垂直）会默认拉伸。 2)设置主轴⽅向： 语法：flex-direction; 属性值：row 默认为⽔平向右 column 垂直向下 row-reverse ⽔平向左 column-reverse垂直向上 3）允许⼦元素伸缩换⾏： 语法：flex-wrap：nowrap； 属性值：nowrap默认不换⾏ 、wrap换⾏ 4）设置⼦项⽬在容器主轴⽅向的对齐⽅式 语法：justify-content：属性值； 属性值：flex-start 默认在主轴⽅向起点位置对齐 flex-end 在主轴⽅向终点位置对齐 center 中间 space-between 将空⽩区域平分在⼦项⽬之间 space-around 将空⽩区域环绕在⼦项⽬两边5）设置⼦项⽬在其所在⾏的侧轴对齐⽅式 语法： align-items（单⾏）：属性值； 属性值：stretch 默认拉伸 flex-start ⼦项⽬在其所在⾏的起始位置摆放 flex-end ⼦项⽬在其所在⾏的结束位置摆放 center 中间6）设置⼦项⽬在侧轴⽅向的对齐⽅式 语法：align-content(控制多⾏)：属性值； 属性值：flex-start 默认在所在⾏起点位置对齐 flex-end 在所在⾏终点位置对齐 center 中间 space-between 将空⽩区域平分在⼦项⽬之间 space-around 将空⽩区域环绕在⼦项⽬两边⼆、设置在⼦项⽬上：1）设置⼦项⽬在⽗元素主轴⽅向的⽐份； 语法：flex:number;2）设置单个⼦项⽬在其所在⾏的侧轴对齐⽅式； 语法：align-self：属性值； 属性值：stretch 默认拉伸 flex-start ⼦项⽬在其所在⾏的起始位置摆放 flex-end ⼦项⽬在其所在⾏的结束位置摆放 center 中间3）设置⼦项⽬的顺序； 语法：order:number; 说明：写了order的排在没有order属性的元素后⾯。 写了order的，属性值越⼩的在越前⾯； 没写order的属性值默认为零，order可以写负值。4）设置⼦元素压缩； 语法：flex-shrink: 0/1; 属性值：0---不压缩； 1---压缩；17 多列布局说明：css多列布局可以⾃动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版⾮常相似。跟瀑布流效果相仿。核⼼属性：（⼀般加在body上） column-width 列宽 ， 定义每列列宽； 类似于最⼩宽度min-width； auto ⾃适应； column-count 列数，定义分列列数；最多列数，auto⾃适应（由列宽、容器宽和列间距决定），也可固定 column-gap：定义列间距； 不能为负数； column-rule：定义列边框；与定义边框⼀样：2px dashed #ccc; column-span： 属性值； 定义多列布局中⼦元素的跨列效果；通常⽤于标题； 属性值：none：不跨列； all：跨所有列； 当出现图⽚与下⽅标签不配对时，使⽤break-inside: avoid;（断点）这类属性加在图⽚的上级⽗元素上；18 媒体查询1.说明：页⾯结构简单使⽤2.屏幕分界点： 超⼩屏幕xs （移动设备）768px以下 ⼩屏设备sm 768px-992px 中等屏幕md 992px-1200px 宽屏设备lg 1200px以上3.语法1）@media screen and (条件：最⼩宽度，最⼤宽度等)2）min-width 若当前页⾯宽度⼤于min-width的值时，则样式⽣ 效。注意！链接的css⽂件的min-width应从⼩写到⼤;19 移动端布局操作顺序：1.链接相应的CSS、JS⽂件。注意所链接⽂件顺序。 使⽤其他编码器时，注意设置2.确定设计稿⼤⼩，改相应rem、js参数；（插件：cssrem） 640px设计稿/rem、js（function）为640，插件（font-size）改为64， 750px设计稿/rem、js为750，插件改为75。3.设置页⾯为⾼度⾃适应； {height：100%}4.根据测量布局；5.当整体产⽣滚动条时，设置position：absolute；脱离布局流、em、和rem的区别1）概念px：绝对单位，页⾯按精确像素展⽰。em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃⾝定义了font-size按⾃⾝来计算（浏览器默认字体是16px），整个页⾯内1em不是⼀个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持。2）特点px特点：字体⼤⼩固定。em特点 ：a. em的值并不是固定的；会继承⽗级元素的字体⼤⼩。rem特点：rem是CSS3新增的⼀个相对单位（root em，根em）,区别在于使⽤rem为元素设定字体⼤⼩时，仍然是相对⼤⼩，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。19 过渡tion-property规定应⽤过渡的 CSS 属性的名称。tion-duration定义过渡效果花费的时间。默认是 0。tion-timing-function规定过渡效果的时间曲线。默认是 "ease"。 规定慢速开始，然后变快，然后慢速结束的过渡效果 规定以相同速度开始⾄结束的过渡效果 c. ease-in规定以慢速开始的过渡效果 d. ease-out规定以慢速结束的过渡效果 -in-out规定以慢速开始和结束的过渡效果 tion-delay规定过渡效果何时开始。默认是 0。 语法：transition:all 2s linear 3s;20 2D转换transform1、translate( X,Y)偏移⽅法 [⽔平（正值为右），垂直（正值为下）]2、rotate(0reg，0reg)旋转⽅法(reg为⾓度)3、scale( X,Y)缩放⽅法，x,y为倍数，可放⼤可缩⼩4、skew(Xdeg,Ydeg)扭曲⽅法21 3D变换orm之3d移动变换: （加在⽗元素上） 语法：transform:translate3d(x,y,z) z:代表在垂直于平⾯的轴上移动，电脑屏幕往⼈眼那个⽅向为正⽅向。 transform:translateY() translateZ(z) 【⼥神上来】orm-style规定变换的样式（加在⽗元素上） 当写3d模式时，要加上这句语法，开进图⽚3D状态。 属性值：flag平⾯（默认） preserve-3d保持3d变换 transform-style: preserve-3d 保持3d变换3.设置观察的距离， 景深 perspective:value(⽗元素) 【案例⼥神向我⾛来】orm之rotate3d transform:rotate3d(x,y,z,⾓度) 此时x、y、z取值为0或1，0代表不旋转，1旋转 transform:rotateX(⾓度) transform:rotateY(⾓度) transform:rotateZ(⾓度) 备注：左⼿定律，⼤拇指指向轴的正⽅向，其他⼿指弯曲的⽅ 向为旋转的正⽅向 【体操】5.⽴⽅体 改变盒⼦变换的基准点语法：perspective-origin ：（ ，）观察的基准点(⾓度deg)属性值：第⼀个值为⽔平⽅向，正值为往右；第⼆值为垂直⽅向，正值为往下；语法：transform-origin：（ ，）改变盒⼦变换的基准点。22 动画1.⾃定义动画（1）通过@keyframes指定动画序列；（2）通过百分⽐将动画序列分割成多个节点；（3）在各节点中分别定义各属性（4）通过animation属性将动画应⽤于相应元素；ion属性(1)animation-name动画名字(必须)(2)animation-duration动画播放时间（必须）(3)animation-timing-function 动画播放的形式 属性值： linear线性 ease ease-in steps(n)(4)animation-delay 动画播放的延迟(5)animation-iteration-count 动画播放的次数

infinite⽆限次播放(6)animation-direction 动画是否轮流反向播放属性值:alternate交替播放 reverse反向播放 alternate-reverse 轮流反向 animation:1 2 3 4 5 6 ;（缩写）补充：(1)animation-play-state:paused; 暂停动画

(2)animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。 属性值：forwards 当动画完成后，保持最后⼀个属性值（在最后⼀个关键帧中定义）三，总结 除语义化标签外，以上便是现阶段学西html和css的主要学习内容

2023年6月20日发(作者：)

HTML+CSS笔记整理⽬录前⾔ HTML和CSS基础内容总结，包含HTML基础和CSS基础两部分。⼀、HTML基础1 HTML概念(Hyper Text Markup Language)称为超⽂本标记语⾔

由⼀套标签组成的语⾔称为标记语⾔ XHTML 可扩展超⽂本标记语⾔II.W3C万维⽹联盟 制定了结构html和表现css的标准 WHATWG ⽹页超⽂本应⽤技术⼯作⼩组，推动H5标准为⽬的的组织 ECMA 制定⾏为的标准 Web标准 结构（html，xhtml），表现(css)，⾏为(DOM，JS)III.⾸页必须命名为，其他页⾯先在html⽂件夹⾥。2 HTML语法I.常规标记/标签

css注释 /*注释内容*/js注释 /*多⾏*/ //单⾏

III.在head部分放置表现(css).IV.在body部分放置结构（⽹页内容）。3 HTML标签I.表格中数字⾃动填充增加{$} 如：table>tr*5>td{$}*5 加Table为表格样式II.段落⽂本内容

....

...

名词

解释

解释

...