啊啊啊啊ly-CSDN博客

原创 015（css清除浮动的8种方式及优缺点）

CSS清除浮动的8种方法以及优缺点浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）： 1，父级div定义 height Left Right div2 原理：父级

2022-01-07 16:33:12 61

原创 014（宽高自适应，过滤器、伪对象选择符）

Day008（宽高自适应） 1.宽高自适应的概念和使用网页布局中经常要定义元素的宽和高。但很多时候我们==希望元素的大小能够根据窗口或子元素==自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 (1)宽度自适应元素宽度设置为100%。（块元素宽度默认为100%） width:100%; (2) 高度自适应元素{height:auto;}/高度不写 2.最小宽度、最小高度、最大宽度、最大高度注：height属性在IE6

2022-01-02 19:11:18 215

原创 013（图片整合）

002（图片整合）图片整合的概念，使用图片整合的优势 CSS Sprites的原理（图片整合技术）css精灵一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用**background-position**”来实现背景图片的定位技术。二、图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。 2）通过整合图片来减小图片的体积。实现图片整合的方法和技巧 1)使用ps进行小图片整合； 2)使用相关软件来进行操作。 <!DOC

2021-11-29 15:07:46 73

原创 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 57

原创 011（锚点链接、透明写法）

011（锚点链接、透明写法）一、锚点链接命名锚点链接的应用定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。命名锚点的作用：在同一页面内的不同位置进行跳转。制作锚标记： 1)给元素定义命名锚记名 <div id="div1">asdfasdf</div> 语法：<标记 id=“命名锚记名”> </标记> 2)命名锚记连接语法：二、透明写法（透明存在兼容问题） IE浏览器写法：f

2021-11-29 14:59:45 192

原创 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 54

原创 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 97

原创 008（元素居中）

Day008（元素居中） 1.让一个元素垂直居中 3）行元素垂直居中 line-height:(容器高度); 2）让一个元素垂直居中的要点： 1.当前元素必须是inline-block 2.给当前元素后添加兄弟元素（兄弟必须是inline-block) 3.给兄弟元素添加height与父元素同高 4.给兄弟元素和当前元素添加vertical-align:middle; <!DOCTYPE html> <html lang="en"> <head> <meta ch

2021-11-29 14:28:48 138

原创 007（元素类型的转换）

Day007（元素类型的转换）盒子模型可通过display属性来改变默认的显示类型 1）display属性与属性值 (18个属性值) 属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group 1)Block块状显示：就是让元素竖排显示，变为块元素。 2)inline内联显示：让元素横排显示。 3)当元素设置了float属性后，就相当于该元素具备块状元素显示的特点； 4)Inline-block行

2021-11-29 14:26:27 67

原创 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 63

原创 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 61

原创 004（盒模型）

Day4 盒模型 1.盒模型是css布局的基石它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即包括：边界（margin）、边框（border）、补白（padding）、内容区，这就是盒模型。 padding（补白）： 1.padding是加到盒子内部的，并且会把盒子撑大。 2.padding是用来改变盒子里内容（文本，图片，元素）的位置。 3.如果想保留原有盒子大小，可以用盒子的宽高减去padding的宽高。 4.padding不

2021-11-29 14:19:32 57

原创 MarkDown的基本语法

MarkDown学习一级标题： #+空格+标题名字二级标题： ##+空格+标题名字字体粗体： hello world！两边加** 斜体： hello world！两边加* 删除： hello world！两边加~~ 引用大于号+空格分割线三个减号图片 ![图片名字]（图片地址（用英文符号））超连接点击跳转到淘宝 [链接名字]（链接地址（英文括号））列表有序列表：数字+点+空格无序列表：减号+空格+回车表格名字性别生日张三

2021-01-19 17:16:20 43

m0_46555090的博客