wordpress多站点命名,上海 互联网公司,恩施seo,天猫商城html 元素
html元素是HTML的根元素#xff0c;一个文档只能有一个#xff0c;其他所有元素都是其后代元素
html有一个属性为lang#xff0c;其作用是#xff1a;
帮助语言合成工具确定要使用的发音帮助翻译工具确定要使用的翻译规则
当属性lang“en”则表示告诉其浏览器…
html 元素
html元素是HTML的根元素一个·文档·只能有一个其他所有元素都是其后代元素
html有一个属性为lang其作用是
帮助语言合成工具确定要使用的发音帮助翻译工具确定要使用的翻译规则
当属性lang“en”则表示告诉其浏览器HTML文档的语言是英文。
当属性lang“zh”则表示告诉其浏览器HTML文档的语言是中文。
head元素
head元素中的内容是一些“元数据”也就是描述数据的数据一般用于描述网页各种信息比如字符编码网页标题网页图标。
title元素其功能是设置网页的标题。
meta元素设置网页的字符编码一般都使用utf-8。
body元素
里面存放网页可浏览的信息也是网页内容的具体构成
h元素和seo
h元素有助于网站的seo优化可以促进关键字的排名。但是一般一个网页最多使用一个h1元素倘若乱用不会给网站带来权重还会被搜索引擎认为作弊导致k站
code元素
将内容变成等宽字体
p元素
表示一个段落
span元素
默认情况下,跟普通文本几乎没差别 用于区分特殊文本和普通文本,比如用来显示一些关键字。对普通文本进行归类的
div元素
一般作为其他元素的父容器,把其他元素包住,代表一个整体 用于把网页分割为多个独立的部分
img元素
用来显示图片的为单标签。
src属性(src是source的缩写)用来设置图片的路径(URL) 绝对路径:完整的描述文件位置的路径本地图片地址(路径) 特点:从根路径下面开始找 缺点:一旦位置位置发生改变,那么就有可能出现文件(图片)找不到的情况 相对路径:由这个文件所在的文件夹引起的跟其它文件的路径关系 .代表当前文件夹(1个.),可以省略 .. 代表上级文件夹(2个.) 对于网页来说,不管什么操作系统(Windows、Mac、Linux),路径分隔符都是/,而不是\
alt属性 当图片无法加载时则显示alt中的内容。
字符实体 常用图片格式
web中常用的图片格式有 png:静态图片,支持透明
jpg:静态图片,不支持透明
gif:动态图片、静态图片,支持透明
注意 img元素如果只设置了width(或height),浏览器会自动根据图片宽高比计算出height(或width)
在HTML5规范中,alt是img元素的必要属性
width、height的默认单位是px,像素
a元素
定义超链接,用于打开新的URL点击链接就会自动跳转相应的页面
常用属性
href:指定要打开的URLHypertext Reference的简称target URL打开的位置。
其中属性有
_self(默认值) :· 表示在当前页面位置打开
_blank:新开一个页面打开
和iframe一起使用时,才有效果的属性 _parent:使用iframe嵌套后在当前页面的父级页面打开也就是该页面的上一个 _top:再最顶层打开也就是浏览器 具体的name:使用iframe可能嵌套很多页面可指定在哪个页面打开当前的这个 思考:如何打开本地页面? 使用相对路径
锚点链接
点击超链接会到定位到id为该超链接的href的值,比如href#one那么点击该超链接就会到对应的id为one的地方 伪链接 当href的值没有时点击无反应
当无href属性时就不会是个链接形式就是个普通文本
当href的值为#时点击该链接会跳到页面顶部 a链接不一定是跳转新网页他是打开一个新新链接他可以是下载资源也可以发送邮件 URL 常见协议 一般是有·端口的但是一般默认省略了 base元素
单标签用于拼接比如在base中写入了一个网站那么再在a中写入的不带完整网站的链接就会跟base中的拼接在一起
标签语义化 css 简史 属性 文档 中文文档 书写格式 css样式应用格式 内联样式
直接在需要样式的元素中写内容 文档样式/内嵌样式
在head中使用style然后在style中写样式写样式的方法又分几种不同的可以直接写元素明加大括号在大括号中写需要的属性这样所有该元素都会应用该属性。也可以用标签使带有该标签的使用其效果等 外部样式
在外部创建一个css文件然后在其中写属性切记要写明字符编码。
应用方式有两种要么使用link引用在link中的href中输入css文件位置。
要么使用import。在url中输入css地址 当同时应用两个 不同的css文件两个文件对同元素进行设计如果设计的部分不同则会拼接否则就会覆盖 需要引用的够多时可以在css里引用其他需要引用的css import css选择器 通用选择器
关键字符 * 使用*则文件中所有元素都会使用*中设计的内容 元素选择器
直接用一个元素名如div加大括号在大括号中写的内容就会被应用到所有div元素中 类选择器 在某个元素中使用class给class等号后加上一个自定义的名再用.自定义的class类的名加上大括号此时大括号中的内容就会应用在元素中的class该自定义的类名中。如 .box{colorred;}则所有带class“box”的元素都会应用到属性colorred 另外一个元素是可以有多个类的用空格隔开即可,例如 p classbox box1 注意 类的命名规范 id选择器
给需要设置属性的元素设置id 并自定义id名id不可重复。再设置时需要加上#符号在#符号后写上想要写属性的id即可此时大括号的内容就会应用到对应的id属性 当使用了id选择器和类选择器的叠加时表示在id为header中的title color属性为red 注意点 注释 html和css的编写准则 设置网页图标 最常用的css属性 color
前景色除了字体颜色会改变关于字的效果也会改变 ccs属性-backgroud -color
背景颜色 width和height
设计内容高宽的
不适应于非替换行内元素而span刚好就是所以这两对其无效果 span为行内元素所以width设置对他无效
span元素 div元素 作业 快捷方式 颜色 颜色空间rgbredgreenblue 颜色表达方式 十六进制 颜色规律 RGBA颜色a为透明度 css属性-文本属性
text-decoration
underline-下划线
overline-下划线
line-through-中划线 letter-spacing和word-spacing
字母间隔和单词间隔 text-transform
capitalize首字母大写
uppercase所有都大写
lowercase所有都小写 text-indent
第一行文本的缩进 text-align
设置文本对齐方式 之所以有这种现象的原因是因为div虽然被设置了宽但是他本质仍然默认是一行所以在继承box3时自然而然的把内部div当成跟自己一样的一整行是把一整行居中的。如果没有单独设置内部div的宽度那么内部div的文本就没限制在那一小块就会跟随外部的设置而居中.设置了div的wight其实相当于在div取那么宽存放相应的数据而已。 将两端的空间平分到没个字之间想最后一行也有效就可以使用
css属性--文字属性
font-size
设置文字大小 相当于外部的div字体20的百分之50也就是10但是谷歌浏览器默认最小为12所以显示的会是12大小
font-family
文字类型
英文字体类型只适应于英文中文两者都适应所以如果要分别使用中英字体先写英字体。 最好英文都加单引号
font-weight
设置文字粗细 font -stlye
设置文字风格 font -variant line-height height和line-height的区别 font
可以一次性将font-stylevariantweightsize/line-heightfamily写下且size和family不可换位置和省略但是其他可以但line-height不省略的话必须在size后面 属性选择器
设置属性title如果未要求属性title的‘值’那么有该属性的所以元素都可应用其设置的内容· 如果带有该属性的且后的内容完全一致就会应用其设置如果想控制属性后含有某个内容则需要在等号前加上*号加上*代表只要你title属性的值带有该内容就可应用 加上^代表以该字母开头就可应用$表示以该内容结尾的可应用 [tiltle] [title 内容] [tilte*内容] [title^one] [title|内容] [title~内容] [title$内容] 后代选择器 直接或间接子元素
一定要加空格不加空格就是交集选择器了 子选择器
直接子元素间接不算 p不要包div 相邻兄弟选择器
后面紧挨着的元素为兄弟关系的 全体兄弟选择器
后面所有的且为兄弟~ 交集和并集选择器 交集选择器
共同有的才行 并集选择器
有就行要用逗号隔开 伪类 动态伪类 鼠标放上的效果 点下去 focus
聚焦就是被选中例如被table键选中就是聚焦在那个地方或者像input输入框点击输入时也是聚焦状态想要在被聚焦的时候改变样式也是可以动态伪类来实现的 当input被聚焦时就会改变样式当使用table键来到超链接时样式也会改变 去掉a元素默认的focus效果 因为被聚焦会默认有个蓝色的框如果想去掉这个框可以用动态伪类使用outlinenone即可
如果想实现不被聚焦无法聚焦的话a元素可以使用它有的一种属性tabindex-1因为tabindex是用来调整tab键选择顺序的如果改为-1则代表永远选不上。 细节 目标伪类
加上target点击锚点链接点哪个到达的相应地址就会应用伪类设置的效果如下图就点击锚点链接标题1就会来到内容标题一上并且标题一文本变红 语言伪类
元素状态伪类
disabled为button元素的一个属性当设置了该属性则表示这个按钮不可用且会变灰如果我们想让有这个属性的按钮的文字颜色改变直接使用伪类来将该元素这个属性时颜色为红即可 结构伪类 快捷输入方式*几就生成几个 nth-child具体数字
nth可以理解为 第n个而child又是孩子的意思所以可以理解为第n个子元素。而括号内填写的代表指定想操作的第几个子元素。 解析
因为从body元素来看divpdiv都是他的子元素所以第三个div的内容就都会被之前设置的第三个子元素效果影响 nth-child(含n的式子) p的2n偶数会变偶数有特殊的关键字代替-》even所以可以用2n也可以even
同理奇数也可以设计将其改成2n-1或者2n1同样也有关键字odd 还可以灵活应用例如你想要取前三前五就可以用-n进行加减来完成n代表的是从0开始的自然数 nth-last-child
从最后开始数的第n个子元素同样括号内可以是具体数也可以是含n的算式 nth-of-type具体数字
表示指定类型中的第n个无视其他类型只看指定的类型。入过不指定类型那么代表的就是每个类型的第n个。注意是从一个元素的子类中数第n个。所以图中文字内容6是body元素的子类为p类型的第二个则生效而文字内容5是div元素子类类型为p的第二个所以也生效 其他 only child 解析因为html元素是整个文档的根元素也是整个文档唯一的子元素所以所有内容都会变红
所以我们需要根据需求来加条件 only-of-type
父类唯一类型的元素 root
两种表达方式都一样都可以 empty
表示选中没有内容的元素注意如果元素中有子元素或者有空格那么都不属于空白元素 否定伪类 解析因为bodyhtml也是一个元素且不为div所以所有的都会应用 解析 这两种表达的意思是一样的因为nothtml代表不是html冰不否了他的子类所以你可以是body所以就相当于除了html 然后子类除了body且除了div也可为body子类除了body且除了div
伪元素 first-letter和first-line befor和after 所以无法设置width和height。想要设置需要用到display后面会细说display。
注意就算写一个空的content“”也不能将content删除 Emmet语法
和html5 想要快速写一个元素的直接子代可以直接使用符号如想直接生成div的直接子代p时可以divp然后回车 兄弟使用号 结合使用 如果要建上一级的兄弟就可以用上^ 也可以使用 快捷给元素加属性 加值的方式 添加多个属性 一起使用 快捷添加内容 结合使用 一次性自定义生成带属性的元素个数 数字$ {}(内容) 隐式标签 ‘’ altshiftf格式化快捷键
css的emmet语法 CSS特性
继承 width这个属性给的值是一个百分号为单位时他表示的是以包括他的元素宽度为基准的比如包裹他的是width是100他设置的是20那么就是100的百分之20的width 像这种不能继承的属性可以通过inherit强制继承 继承的注意点 层叠和权重 css属性优先级 比如·这个在这个中权重最高的是id由于两个都有id所以就开始比较舍得id多可见两个id都是有两个那么就看他们第二个大的权重可见是类选择器第一个有两个第二个只有一个所以第一个的权重会高于第二个 第一个是因为a元素的字是默认有颜色属性的所以不会继承父类的属性只要自身有属性的会优先使用自身的。
第二个是因为不允许p中包含div
css属性使用经验 列表 有序列表-ol li
块元素独占一行 快捷方式 无序列表-ul li 定义列表-dl dt dd 列表相关的css属性 list-style-type list-style-image list-style-position
是不是内容之内还是之外 list-style 作业 表格
快捷方式 常用元素 加边框可以这样但是不推荐默认单位为px table常用属性 tr的常用属性
如果距离不够效果就不会展示出来 td和th常用属性 细线边框的设计
使用border-collapsecollapse将边框合并成一像素 居中设计 第一行加粗设计 其他元素 th会默认加粗 单元格的合并 可见多了一个格子所以需要把单元格2删除 css属性-border-spacing 表单 常用元素 input的常用属性 name的作用除了使选项互斥之外想提交数据时每个数据都需要一个name因为提交的是键值对url是协议地址路径query而query就是键值对-keyvalue其中那么就充当key的值而value就是对应的key的值 \
无法输入只能看 默认选择某个选项 自动聚焦 默认选择设置 multiple可以实现多选 cols设置宽rows设置直接显示几行字 布尔属性 按钮 按钮-button元素 action是写入提交的地址的当提交时也需要键值对提交的内容那块需要写上一个name这样就可以实现提交动作 可以看出百度搜索的key值设置的是wd那么我们想引用他的搜索内容时也将name的值设置为wd就可以了 如果使用span的话那么点击文字没反应的所以我们可以使用label但是是使用label的话点击文本他不会聚焦到输入框上这个时候要使对应的文本有对应的输入框就需要在输入框上加id并在label使用for将其关联起来实现点击文本也可以聚焦输入框 选择框同理 去除input的tab键选中效果 textarea
水平垂直缩放是默认值 select和option size1时就代表显示一个 fieldset和legend 因为单选时name设置都是一样的无法区分两种区别所以想要选择不同时上传不同的value就需要手动添加个value因为他与输入框属性的不同不用自己输入值进去像text属性时value就是用户自己输入的值 多选·同样 form的常用属性 get和post 如果使用post服务器会从这里获取数据而不会像get一样在链接那了。 元素划分
块级行内级元素 替换非替换元素 总结 css属性-display inline-block 因为块元素都加了这个属性所以才是块元素的 注意点 设置了ul displaynone属性想要显示就得再改ul 该属性 css属性--visibility css属性-overflow 从左上角开始的X轴和y轴 颜色网站 元素之间的空格 盒子 行内元素auto表示宽度包裹内容 内容相关属性 当使用max-width时设置了做大宽度他就会在你设置的内容超过所设置的宽度时自动换行如果不设置就会一直延伸变大 若果设置了最大高度或者宽度内容过多溢出时可以选择使用溢出overflow来实现滑动查看 内边距相关属性 padding的取值规律 可以用padding简写写四个值代表上右下左可以删最后那个左边的值和·下边的值如果删了那么左和下的值就会对应右和上的值也可以是写一个值这样上右下左都为一个值 当输入一长串的英文字母时超出宽度了也不会自动换行但是汉字却可以原因是因为默认吧无空格分隔的字母串当成一个整体的单词而不允许单词被拆分 所以在使用一串字母时想让他超出宽度就换行可以手动在其中加入空格或者换行分隔也可以使用此属性work-break、break-all 外边距相关属性 简写也是上右下左规则跟padding一样的
上下两个盒子都设置同样的边距就会重叠在一起并不会从相加在一起所以两个上下外边距还是20值得注意的是折叠的效果只针对上下。但是如果一个为20一个为40则取大的那个来实现效果 上下margin传递 给子类div设置左外边距20px只有子类div的左边距改变了。 给子类div设置上外边距20px连着父类div一起上外边距变成了20因为上下外边距会进行传递 当子元素父元素底部重叠并且为设置高度那么这个时候子元素设置底部外边距也会出现传递现象 在父类元素添加内部的上边距 此时给子元素加上部外边距将不会与父元素进行传递 除了添加内边距外还可以添加边框这样也能实现取消父元素传递 在父元素设置一个overflow属性且不是visible属性的 也可以实现取消传递该方法最优 上下margin折叠 父子之间也是取大的那个 border边框 边框项相关属性 后写的会把之写的层叠。 值得注意的是border不区分顺序 边框样式的取值 边框相关的属性 边框的形状 边框妙用-实现三角形 盒子宽高为0 transform旋转的 旋转前 旋转后 行内非替换元素的注意点 加padding-bottom10px前 后因为多的10px不占空间。 边框也同理 解决办法是将行内元素改成这个属性即可 csss属性-border-*-*-radius 通过该图可知前面案例中10px为图中水平的值也就是55pt那另一个为垂直的也就是25pt
border-top-left-radius55pt 25pt border-radius 也可以缩写效果跟上卖弄的一样的 原本是个正方形且边长为200设置成⚪取一半边长即可 当你想要给设计好的图像加边框比如如上的圆那么边框的宽度会加在图像上会让导致原来的图像跟现在的有出处所以在加边框改边框的宽度时也要改设置图像时的值但是这样十分麻烦所以我们可以用到比分比 css属性-outline span内容并没向下移动所以outline并不占空间 css属性-box-shadow 表示inset可以写也可以不写表示可以写2-4个值必须写可写也可不写具体的颜色 添加模糊值后 写上第四个值 添加color后。 加上inset 注意阴影可以有多个所以是可以实现全方位都有阴影的 灵活设置使上面“无阴影”周围有 css属性-text-shadow 使用规则跟box-shadow差不多只是没有inset以及取值只取2个到3个 因为可以添加多个 一段文字的指定的行和字也就可以单独设置阴影效果这是设置的是第一行的和第一个字 css属性-box-sizing 每个盒子都某认有一个这样的属性而属性content-box含义是设置的width和height只是指定内容的宽高而已 而属性border-box含义是设置的width和height只是指定内容的宽高以及内边距和边框,又称为盒子的内减 box-sizingcontent-box 普通文本居中 行内元素同理 行内替换元素居中 行内块级元素居中 之所以居中是触发了继承机制将父元素设置的文本居中继承到了子类所以可以使其文字也居中但是不是让子元素整块居中因为其宽度与父元素是一致的 即使设置了子类盒子的宽度使用文本居中也不过是将设置宽度内的文本居中不会让该宽度的盒子居中因为实际上该子类盒子还是一整行的设置的宽度只是说取该盒子那个宽度的内容设置罢了 想要使设置宽度的盒子居中显示只能在该盒子使用margin0 auto实现效果 margin0 auto实际就代表margin-top0margin-bottom0margin-leftautomargin-rightauto。
设置一个指定宽度的盒子不设置他的margin-leftmargin-right的值就会都默认为0可见设置好后右边其实有很多空间如图
那么如果margin-leftmargin-right有一个设置了auto就会把右边的空间长度全部给他,如图 如果margin-left和margin-right都设置成auto那么多的空间就会平方给他们实现居中。 如果想让盒子垂直也是居中的上下单纯将margin-top和margin-bottom设置为auto是不行的因为垂直居中他有一个条件就是必须父元素高度为auto时才可以生效但是如果父元素设auto的话父元素的高度就看的是子元素的来的这样一来就无垂直居中一说了。
要想真的实现垂直居中那么就可以先将子元素向下移动父元素的高度的一半再向上移动自己的一半就可以实现垂直居中显示了 背景设置
css属性-background-imge 背景图是盖住背景颜色如果图片不够大会平铺多张效果从而实现将背景颜色都盖住。可以设置多张背景图图片会层叠在一起但是会优先选择显示第一张只有在第一张图片无法使用的时候才会显示第二张。 background-repeat 设置平铺效果的默认值就是repeat所以刚才可以看到不足的地方用同样的图平铺填满 x代表横轴也叫水平方向那么那么就会水平平铺垂直的就不会 css属性-background-size 写一个值的时候是水平的占比写两个就是水平和垂直的如下为水平的百分之33垂直的百分之80 background-position background-position可以给具体值也可以给center第一个center是水平居中第二个是垂直居中 css sprite 公共的放到一个类里。在需要的地方使用他。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul{list-style: none;}body,ul,h5,p{padding: 0px;margin: 0px;}.mir{width: 1000px;margin: 0 auto;}li,p,h5{display: inline-block}.box{height: 180px;line-height: 180px;}.box ul li{margin-left: 12px;margin-right: 25px;}.box ul li p{height: 42px;line-height: 42px;font-size: 18px;font-weight: 700;}.box ul li h5{vertical-align: middle;width: 36px;height: 42px;background-image: url(imge/cc1d8d291ea917c0.png);background-repeat: no-repeat;text-indent: -999px;/* background-size: 113px 86.5px; */}.box ul li:nth-child(1) h5{background-position: 0 -192px;}.box ul .kuai{background-position: -41px -192px;}.box ul .hao{background-position: -82px -192px;}.box ul .sheng{background-position: -123px -192px;}/style
/head
bodydiv classbox mirullih5多/h5p品类齐全轻松购物/p/lilih5 classkuai快/h5p多仓直发快速配送/p/lili h5 classhao好/h5p正品行货精致服务/p/lilih5 classsheng省/h5p天天优价畅优精选/p/li/ul/div/body
/html 实现背景图不管显示的浏览器有多小多大画面都是居中显示的 css属性-background-attachment 如果有文本在背景上设置好这样只会文字滚动图片不会跟随一起滚动 一起滚动的意思是浏览器滚动的时候元素背景会跟着一起滚 css属性-background background-img和img的选择 css样式-cursor css属性-定位
标准流 margin,padding定位 css属性-position static-静态定位 relative-相对定位 相对定位数 是相对当前的相对当前的位置进行调整比如left20px是相对当前位置最向右边再移动20px而不是当前位置最左边的边距离外部元素的边的距离right20px就是当前位置最右边的边那开始向左边移动20px
如下图left20px时一p1距离为起点p2方向移动20px 为right20px时 移动并不会挤动别的元素 absolute是先看父元素的position的值是不是Static如果是非static就会从父元素的左上角位置进行调整如果是static那就一直向上父级元素找非static的position直到找到如果一直找不到那么就会在浏览器的左上角位置进行调整
这些属性伴随toprightbottomleft一起使用的而在设计这些属性的时候如right20px时是代表该元素距离右边边框20px就比如一般新写的一个元素都是靠左边的但是设置了right20px他就会靠右边去且离右边的边框距离为设置的20px
sub为下标sup为上标 不满意位置还可以进行调整 当设置的图片太大超过了电脑浏览器屏幕可以这样设置使图片大小与其一样 但是他是隐藏多余的地方当我们需要他展示中间的部分可以进行微调 margin-left的百分比是相对父元素来设置的 在使用上图方法时我们得left写死了不是那么好。想要灵活起来使用百分比来实现的话直接设置left的百分比是不行的因为left也是相对父元素的此时就得使用transform了他是相对自己的 fixed-固定定位 fixed是直接相对浏览器开始调整。 she 给a元素设置了fixed他就会脱离标准流其他的元素就会感受不到他的存在他后面的元素就会覆盖他如图 而如果给fixed设置top和right等属性时是相对视口而言的距离视口的上面右边的px值 并且滚动画布他也不会跟其他的一样滚动而是一直在那个位置
滑动前 滑动后 脱标元素的特点 如果设置·了·display设置了none那么盒子不成立直接没有如果display非none那么把position的值设置为absolute/fixed变化会根据如表所示变如inline会变成blockinline-block会变成bloke absolute-绝对定位 子绝父相 父元素都是positionstatic的所以会按视口调整 父元素设置了非static后就会以父元素来调整 div太大到时候不好子元素定位所以可以给他设置成inlineyuansu sh设置完后多了一点。所以所有的image都需要这样重置 需要等分的时候可以使用该属性 现在可以看到字也被等分了因为该属性被继承了 所以乐使用在该类也上覆盖其属性 十个块状可以使用margin来居中但是又是绝对定位的需要将leftright设置成0具体原因设计到一个公式后会细说 字体的一点五倍 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea{text-decoration: none;color: black;margin: 0;padding: 0;font-size: 12px;}.sqcode{position: relative;margin: 200px;}.sqcode span{/* display: block; */}.sqcode .phone{position:absolute;left: 0;top: 27px;transform: translate(-50%);left: 50%;border: 1px solid gray;padding: 5px 5px 0px;}.sqcode .phone span{display: block;text-align: center;}.arrow{position: absolute;width: 8px;height: 8px;border:1px solid grey;border-right: transparent;border-bottom: transparent;transform: rotate(45deg);top: -5px;left: 0px;right: 0px;background-color: #fff;margin: 0 auto;}/style
/head
bodya href# classsqcodespan手机考拉/spanspan classphonediv classarrow/divspanimg srcimge/image.png alt/spanspan下载app/spanspan领1000元礼包/span
/span/a/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea{text-decoration: none;color: black;}body{padding: 0;}ul{list-style: none;padding: 0;}.beauty{display: inline-block;position: relative;}.beauty ul li {display: inline-block;}.beauty ul li a{display: inline-block; width: 80px;height: 40px;line-height: 40px;border: 1px solid gray;border-radius: 50px;text-align: center;text-align-last: center;font-size: 12px; margin: 5px;}.beauty ul {position: absolute;bottom: 40px;width: 285px;/* background: yellowgreen; */text-align: justify;text-align-last: justify;right: 0;left: 0;margin: 0 auto;}.beauty ul li a:hover{color: rebeccapurple;}/style/head
bodydiv classbeautya href# img srcimge/image.png alt/aullia href#精致护肤/a/lilia href#精致护肤/a/lilia href#精致护肤/a/lilia href#精致护肤/a/lilia href#精致护肤/a/lilia href#精致护肤/a/li/ul/div/body
/html 绝对定位技巧 margin-left和margin-right默认是0
因为设置了绝对定位且没有给该元素设置宽度所以他的宽度是被内容撑起来的。因为margin-left和margin-right的值默认是0且right和left默认值是auto所以这时只需要将right和left的值设置为0那么通过公式将值代入就可使该元素的宽与父元素一样参照元素 想要高度也一样公式也是大相径庭的只需要把top和bottom设置为0即可 当我们给绝对定位的元素设置了指定的宽度和高度时想要将他居中展示在参照元素中时可以将left和right设置为相同的值一般为0因为他们默认值是auto这个的auto是不会默认给他们平分宽度的但是我们得margin-left和margin-right设置为auto时会平分所以就可以将他们设置为auto实现平分达到居中的目的 设置垂直居中也是同理 定位的对比 元素的层叠 后面的元素会盖住前面的元素 css属性-z-index 默认值是auto 浮动
定位方案 css属性-float 浮动的规则一 左浮动之后 浮动元素要么碰到父元素停下来要么碰到同样的浮动元素就停下来 浮动的规则二 浮动规则三 浮动规则四 浮动规则五 浮动的规则 浮动元素会脱离标准流。会 脱离标准流设置了float就不用设置display了因为当元素float不为none那么大部分情况都为block属性所以不用再设置display不然会有警告 当黄色设置了floatleft时因为紫色不是行内元素是div元素所以他不会被挤开而是会被覆盖 虽然div元素为块元素但是块元素内的文字是行内元素所以会被浮动元素挤开 都设置成左浮动的就会这样因为浮动元素不会重叠 将父类的高度取消将不在显示出父元素因为高度由内容撑着的内容的元素都浮动就没有将其撑起的元素自然不会显示了 当给这三个元素都设置左浮动那么在父元素空间宽度不够的时候最后浮动的元素不够空间的时候会换行浮动 当前两个元素设置了左浮动后其中第二个因为父元素空间不够换行浮动了第三个元素也设置左浮动浮动的位置顶部的位置不可超过第二个的高度所以会像第二个看齐。 哪怕是设置了右浮动也是如此
浮动的应用 在项目的时候使用浮动可以避免多余的间隔和混乱的对齐方式 ‘margin-left’‘border-left-width’‘padding-left’‘padding-right’‘border-right-width’‘margin-right’包含块的宽度。如果width不是‘auto’和 给前面的元素设置margin的负值时后面的元素会往前挤 所以当边框重叠时可以将margin设置-1这样后面的边框就会像前挤一个一个像素覆盖掉多的像素
