html和css
文章平均质量分 66
鲤忆
这个作者很懒,什么都没留下…
展开
-
页面的布局
{ //>=1200的设备 } 大显示器。原理:专门针对移动端设计一套html和css代码,移动端一套代码,pc端单独一套代码,移动端只在移动端显示,不在pc端显示。原理:为了很好的适应不同的屏幕,主要内容区域是百分比代替固定的像素,不同屏幕会有不同的页面效果,有良好的适应性一般用于移。原理:利用媒体查询技术,实现不同的屏幕采用不同的css代码,一套代码多种css样式,多端使用,多个平台用。概念:是利用媒体查询技术实现不同的屏幕采用不同的css代码,不同设备就有不同的用户体验的一种布局模式。原创 2023-02-22 09:45:00 · 93 阅读 · 0 评论 -
简单的链接
哔哩哔哩搜狗--超链接点击下载原创 2023-02-21 16:30:00 · 89 阅读 · 0 评论 -
浮动 页面布局
2.对于浮动元素来讲,浮动元素会在一行上显示,并且元素顶部对齐,浮动元素是互相贴靠在一起(不会有缝隙) 如果父容器装不下这些浮动的盒子多出的盒子会另起一行。这种方式不能很准确的说是清除浮动,只是取消了浮动带来的影响,借助bfc(块格式化上下文)的特点,这个容器里面的浮动元素会参与父盒子的高度的计算。浮动元素具有行内块元素的特性 任何元素都可以浮动,不管原来是什么模式的元素,添加浮动以后有行内块元素的相似特性。浮动元素只会压住下面标准流的盒子,但是不会压住下面标准流盒子里面的文字或者是图片。原创 2023-02-21 15:00:00 · 303 阅读 · 0 评论 -
过渡动画 css3渐变
background: linear-gradient(red 0%, green 50%, blue 50%) 和 background: linear-gradient(red 0%, green 50%, blue 10%)默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。10% 到 85% 是 red-green 的过渡色,85%-90% 是 green-blue 的过渡色。原创 2023-02-21 10:00:00 · 377 阅读 · 0 评论 -
精灵图的用法
精灵图:一个网页当中往往会应用很多的小的背景图片作为装饰,当网页图片过多时,服务器会频繁接收和发送请求图片,会造成服务器压力过大,这样会将低页面加载速度,(background-position:x y;因此为了有效减少服务器接收和请求的次数,提高页面的加载速度,就出现了css精灵技术。核心原理:将网页中的一些小的背景图整合到一张大图上,这样服务器只需要请求一次就可以了。3.通过移动背景图位置来实现 background-position。主要通过 x y 移动位置 网页往右是正值 往下是正值。原创 2023-02-20 23:18:19 · 180 阅读 · 0 评论 -
css三大特性 层叠性 继承性 优先级
子元素可以继承元素的样式(text-/font-/line-这些元素开头的可以继承以及color类型也是可以被继承的)子元素继承父元素的行高 例如:1.5倍 这里有个算法:当前子元素文字大小的1.5倍为行高大小。继承权重为0 如果该元素没有被直接选中不管父元素的权重有多高,子元素得到的权重都是0。层叠性:相同选择器给设置相同样式,此时一个样式就会覆盖(层叠)另一个样式。层叠性原则:1.样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式。important 无穷大。原创 2023-02-20 23:17:46 · 121 阅读 · 0 评论 -
表单(各类按钮)
textarea name="" id="" cols="30" rows="10">多行文本输入框上海。男:女:value:可以修改按钮提示字。原创 2023-02-20 23:17:14 · 512 阅读 · 0 评论 -
Margin 穿透
破坏文档流:在页面布局过程中,元素在移动过程里不遵循标准流规范,移动完成后仍然在标准流中。标准流中,在页面布局过程中遵循标准流规范,元素是从左到右,从上到下,块元素独占一行,行元素共享一行。2.给子元素设置 display:inline-black 转化为行内块。当两个块级元素嵌套时,如果内部块元素设置了margin-top 属性,内部的块元素会击穿父级元素。脱离文档流:在页面布局过程中,元素不遵循标准流的规范,有自己的排列方式。3.给父元素设置 overglow:auto。允许给margin设置负值。原创 2023-02-20 23:15:27 · 334 阅读 · 0 评论 -
html和css 定位 总结
static(静态的) 元素的默认值,即没有定位,遵循正常的文档流对象 静态定位的元素不会受到 top, bottom, left, right影响。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。relative (相关的 相对的) 相对定位元素的定位是相对其正常位置。2.元素只设置绝对定位,当前位置脱离文档流一旦设置偏移量,绝对定位元素进行移动。8.定位父级:通过设置相对定位,绝对定位,固定定位 决定了元素的参考位置。原创 2023-02-21 19:10:32 · 176 阅读 · 0 评论 -
伪类和伪类选择器(总结)
nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素。:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素。:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素。:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素。原创 2023-02-18 21:19:38 · 560 阅读 · 0 评论 -
2D和3D移动变化
- 给父元素添加一个固定的perspective,子元素添加transform: translateZ()才有3D效果,必须配合使用, -->-- 在css中3D其实就是2D的一种补充,在2D屏幕基础上,新增了z轴,形成了三维坐标系 -->-- 透视:视距,就是眼睛距离屏幕的距离,距离视觉点越近的在屏幕上成像越大,越远的成像越小 -->-- z,物体距离屏幕的距离,z的值越大物体越大,成正比 -->-- 三维坐标系概念:在x轴,y轴基础上新增z轴 -->-- 视距,就是眼睛距离屏幕的距离 成反比 -->原创 2023-02-18 21:11:45 · 55 阅读 · 0 评论 -
背景图的用法
利用背景图像属性可以改变图片在背景中的位置 x y 可以是数字(具体数值)也可以是方位名词。background-image 用来描述元素的背景图像 实际开发过程中常用于logo 或者小的一些装饰图像或者超大的背景图像。background-position: center(中心) center(中心);background: 背景颜色 背景图像的路径 背景是否平铺 背景是否滚动 背景图像位置;原创 2023-02-18 20:59:08 · 117 阅读 · 0 评论 -
弹性盒子和网页
否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。原创 2023-02-18 20:54:46 · 65 阅读 · 0 评论 -
html和css杂点知识
*清除表单轮廓*/ input 点击有黑框可以删除 border-bottom: 1px dashed #333;但是当元素没有内容时,设置 height:100% 该元素不会被撑开,此时高度为0 但是设置 height:100vh;内联元素(行内元素):为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。1vh就是当前屏幕可见高度的1%,也就是说height:100vh;两者都可以设置高度100%,但是设置height: 100vh;原创 2023-02-18 20:09:24 · 57 阅读 · 0 评论 -
初学html
在行内元素中有几个特殊的标签--img input(可以设定文本的大小) td 它们同时具有块级元素和行内元素的特点。文字类的元素内不能使用块级元素,p h1-h6等都是文字类的块级元素,里面不可以放其他的块级元素。使用它可以将行内元素或者块级元素变为行内块元素。1.和相邻行内元素(行内块)在一行上,但是它们之间有空白间隙,一行上可以显示多个(行内元素特点)4.是一个容器或者盒子,里面放块级元素或者行内元素(内联元素)2.宽度默认是它本身内容的宽度(行内元素的特点)2.宽/高/内/外边距都可控制;原创 2023-02-18 19:41:29 · 38 阅读 · 0 评论 -
html和css的选择器总结(下列用h3和p 标签演示)
p:nth-of-type(n){} 选择器匹配属于父元素的特定类型的第N个子元素的每个元素,它也可以理解为按照类型来选择 冒号前面为类型如:p(查找的类型标签)p:nth-child(){} 选择器与类型无关只选择其父元素的第n个子元素,不论类型 按照元素的个数来计算。并集选择器可以选择多组标签,同时定义相同样式,通过使用逗号隔开,任何形式的选择器都可以作为并集选择器的一部分。6. 子选择器 仅仅找到子元素 div>p (这样只会选择到 div下方的p 而不会选择到 ul里面的p)原创 2023-02-18 19:56:41 · 277 阅读 · 0 评论 -
html 隐藏和显示
但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。overflow:scroll 属性的时候,下面和右边都有滚动条 (scroll是下边和右边都有框) visible : 默认属性,内容会溢出黄色框 hidden: 内容被修剪, 65后面的内容看不见了。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。原创 2023-02-18 19:45:22 · 3200 阅读 · 0 评论