每天一个小知识
文章平均质量分 59
一起学前端吧,每天一个不起眼的小知识,一起成长,一起快乐。
啊啊啊啊ly
这个作者很懒,什么都没留下…
展开
-
015(css清除浮动的8种方式及优缺点)
CSS清除浮动的8种方法以及优缺点浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):1,父级div定义 height Left Right div2 原理:父级原创 2022-01-07 16:33:12 · 74 阅读 · 0 评论 -
014(宽高自适应,过滤器、伪对象选择符)
Day008(宽高自适应)1.宽高自适应的概念和使用网页布局中经常要定义元素的宽和高。但很多时候我们==希望元素的大小能够根据窗口或子元素==自动调整,这就是自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应元素宽度设置为100%。(块元素宽度默认为100%) width:100%;(2) 高度自适应元素{height:auto;}/高度不写2.最小宽度、最小高度、最大宽度、最大高度注:height属性在IE6原创 2022-01-02 19:11:18 · 232 阅读 · 0 评论 -
013(图片整合)
002(图片整合)图片整合的概念,使用图片整合的优势CSS Sprites的原理(图片整合技术)css精灵一、将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用**background-position**”来实现背景图片的定位技术。二、图片整合的优势:1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。2)通过整合图片来减小图片的体积。实现图片整合的方法和技巧1)使用ps进行小图片整合;2)使用相关软件来进行操作。<!DOC原创 2021-11-29 15:07:46 · 87 阅读 · 0 评论 -
012(图片切换案例)
012(图片切换案例)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type=text/css> *{ margin:0; padding:0; } .showBox{ width:500px; height:375px; border原创 2021-11-29 15:02:11 · 70 阅读 · 0 评论 -
011(锚点链接、透明写法)
011(锚点链接、透明写法)一、锚点链接命名锚点链接的应用 定义:是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。命名锚点的作用:在同一页面内的不同位置进行跳转。制作锚标记:1)给元素定义命名锚记名<div id="div1">asdfasdf</div>语法:<标记 id=“命名锚记名”> </标记>2)命名锚记连接 语法:二、透明写法(透明存在兼容问题)IE浏览器写法:f原创 2021-11-29 14:59:45 · 216 阅读 · 0 评论 -
010(元素的垂直水平居中)
Day010(元素的垂直水平居中)一、元素在浏览器可视窗口垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type=text/css> *{ margin:0; padding:0; } /* 第一种方法:让一个元素在浏览器可视窗口垂直居中原创 2021-11-29 14:59:10 · 65 阅读 · 0 评论 -
008(元素居中)
Day008(元素居中)1.让一个元素垂直居中3)行元素垂直居中line-height:(容器高度);2)让一个元素垂直居中的要点:1.当前元素必须是inline-block2.给当前元素后添加兄弟元素(兄弟必须是inline-block)3.给兄弟元素添加height与父元素同高4.给兄弟元素和当前元素添加vertical-align:middle;<!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-11-29 14:28:48 · 152 阅读 · 0 评论 -
005(文本溢出)
Day5 文本溢出相关属性一、溢出属性(容器的)overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;1.visible:默认值,内容不会被修剪,会成现在元素框之外;2.hidden:内容会被修剪,并且多余内容是不可见的;3.scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;4.auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;5.inherit:规定应该从父元素继承overflow属性的值。二、空余空原创 2021-11-29 14:21:00 · 74 阅读 · 0 评论 -
006(css元素类型)
Day6(元素类型分类依据和元素类型分类)根据css显示分类,XHTML元素被分为三种类型:块状元素、内联元素(行内元素)、内联块级元素(行内块元素)1.块状元素(blockelement)\color{skyblue}{1.块状元素(block element)}1.块状元素(blockelement)a)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域。常用的块状元素包括**div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgr原创 2021-11-29 14:23:14 · 74 阅读 · 0 评论 -
007(元素类型的转换)
Day007(元素类型的转换)盒子模型可通过display属性来改变默认的显示类型1)display属性与属性值 (18个属性值)属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group1)Block块状显示:就是让元素竖排显示,变为块元素。2)inline内联显示:让元素横排显示。3)当元素设置了float属性后,就相当于该元素具备块状元素显示的特点;4)Inline-block行原创 2021-11-29 14:26:27 · 78 阅读 · 0 评论 -
004(盒模型)
Day4 盒模型1.盒模型是css布局的基石它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即包括:边界(margin)、边框(border)、补白(padding)、内容区,这就是盒模型。padding(补白): 1.padding是加到盒子内部的,并且会把盒子撑大。 2.padding是用来改变盒子里内容(文本,图片,元素)的位置。 3.如果想保留原有盒子大小,可以用盒子的宽高减去padding的宽高。 4.padding不原创 2021-11-29 14:19:32 · 64 阅读 · 0 评论 -
009 (定位属性)
Day009 (定位属性)一.position定位属性和属性值position 定位属性,检索对象的定位方式;语法:position:static /absolute/relative/fixed取值:\color{red}{取值:}取值:1、static:默认值,无特殊定位,对象遵循HTML原则;2、absolute:绝对定位,将对象从文档流中拖离出来,使用top/right/bottom/left等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;**如果不存在这样的父对象,则依据根元原创 2021-11-29 14:31:02 · 111 阅读 · 0 评论