![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS
友人A ㅤ
人的进步在于不断学习
展开
-
布局 - rem适配布局
rem基础媒体查询Less基础rem适配方案原创 2020-05-06 18:19:45 · 389 阅读 · 0 评论 -
布局 - Flex伸缩布局
布局原理flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当为父盒子设置flex布局之后,子元素的 float、clear 和 vertical-align 属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用Flex布局的元素,称为Flex容器,简称“容器”。它的所...原创 2020-05-01 17:51:15 · 272 阅读 · 0 评论 -
布局 - 移动布局(流式布局)
视口视口:浏览器显示页面内容的屏幕区域。视口可分为 布局视口、视觉视口和理想视口。1. 布局视口 layout viewport一般移动设备的浏览器都设置了一个布局视口,用于解决早起的PC端页面在手机上显示的问题。iOS,Android基本都将这个视口分辨率设置为980px,所以PC上大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。2. 视觉视口 visu...原创 2020-04-23 22:40:27 · 615 阅读 · 1 评论 -
CSS3 - 新增选择器
HTML5的新标签及特性字符设定HTML与XHTML中:<meta http-equiv="charset" content="utf-8">HTML5中:<meta charset="utf-8">常用新标签header:定义文档的页眉,头部nav:定义导航链接的部分footer:定义文档或节的页脚、底部article:定义文章section:...原创 2020-02-26 16:09:35 · 522 阅读 · 0 评论 -
CSS - BFC(块级格式化上下文)
BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式元素的显示模式 display分为 块级元素 行内元素 行内块元素 ,但它还有很多其他显示模式。具有BFC的条件的元素不是所有的元素模式都能产生BFC,w3c 规范:display 属性为 block, list-item, table 的元素,会产生BFC...原创 2020-02-23 10:52:39 · 214 阅读 · 2 评论 -
CSS - 制作网页技巧
制作项目ico图标引入ico图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 注意:1、它不是iconfont字体,也不是图片2、位置是放到head标签中间3、type=“image/x-icon” 属性可以忽略4、为了兼容性,将favicon.ico这个图标放到根目录下转换i...原创 2020-02-21 23:46:18 · 389 阅读 · 1 评论 -
CSS - 字体图标
字体图标(icinfont)字体图标的优点1、可以做出跟图片一样的可以做的事情,改变透明度、旋转度等2、本质是文字,可以随意改变颜色、产生阴影、透明效果等3、本身体积更小,但携带的信息没有削减4、几乎支持所有浏览器字体图标使用流程1、设计字体图标2、上传生成字体包当UI设计人员给我们svg文件的时候,我们需要转换成我们页面能使用的字体文件, 而且需要生成的是兼容性的适合各个浏览器...原创 2020-02-21 14:49:30 · 229 阅读 · 0 评论 -
CSS - 元素显示与隐藏、界面样式、精灵图
元素的显示与隐藏CSS中有三个显示和隐藏的单词比较常见,分别是 display、visibility、overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中消失。display 显示display 设置或检索对象是否及如何显示。display: none; 隐藏对象。display:block; 除了转换为块级元素之外,同时还有显示元素的意思。特点:隐...原创 2020-02-19 23:28:08 · 399 阅读 · 0 评论 -
CSS - 浮动
浮动(float)普通流(normal flow)也叫 文档流、普通流、标准流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,如块级元素会独占一行,行内元素会按照顺序依次前后排列。什么是浮动?元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。选择器 {float: 属性值;}属性值描述left元...原创 2020-02-18 18:53:20 · 226 阅读 · 0 评论 -
CSS - 盒子属性、内外边距应用
外边距实现盒子居中可以让盒子实现居中必须满足两个条件:1、必须是块级元素;2、盒子必须指定了宽度(width)。将左右外边距都设置为auto,就可以使块级元素居中。示例:.div {width: 100px; margin: 0 auto;}文字盒子居中图片和背景区别1、文字水平居中 text-align:center;2、盒子水平居中 左右margin改为auto3...原创 2020-02-16 16:38:22 · 910 阅读 · 0 评论 -
CSS - 背景、边框
CSS背景(background)单个属性background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写(符合属性)background背景颜色 背景...原创 2020-02-13 21:50:07 · 225 阅读 · 0 评论 -
CSS - CSS的特性
CSS三大特性CSS层叠性指多种CSS样式叠加。浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候的一个属性就会将另一个属性层覆盖掉。一般情况下,如果出现样式冲突,则会按照CSS书写顺序,以最后的样式为准。CSS继承性指书写CSS样式表时,子标签会继承父标签的某些些样式。想要设置一个可继承的属性,只需将它应用于父元素。注意:恰当地使用继承可以...原创 2020-02-12 13:42:25 · 334 阅读 · 0 评论 -
CSS - 复合选择器、伪类选择器、标签显示模式
复合选择器由两个或多个基础选择器,通过不同的方式组合而成,目的是为了可以选择更准确的更精细的目标标签元素。后代选择器又称包含选择器,用来选择元素或元素组的后代。写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开。子代选择器用来选择写法:把外层标签写在前面,内层标签写在后面,中间用" > "隔开。交集选择器即。。。又。。。的意思。如: p.one 选择的是 类名为...原创 2020-02-10 19:40:19 · 255 阅读 · 0 评论 -
CSS - 字体相关样式、外观属性
字体相关样式font-size:字号大小用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位说明em相对于当前对象内文本的字体尺寸px像素,最常用,推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点font-family:字体用于设置字体,网页中常用的字体有宋体、微软雅黑、黑体等。...原创 2020-02-07 18:21:21 · 260 阅读 · 0 评论 -
CSS - 定位
类选择器使用“.”进行标识,可以重复使用,同一页面内允许相同名字的class。id选择器使用“#”进行标识,在同一个页面内,不允许有相同的id对象出现,是唯一的。类选择器和id选择器的最大区别在于使用次数上通配符选择器使用“ * ”进行标识,是所有选择器中作用范围最广的,能匹配页面中所有元素。...原创 2020-02-05 23:16:17 · 310 阅读 · 0 评论 -
CSS -样式、选择器
表单域用form标签定义,即创建一个表单,以实现用户信息的收集和传递,from中的所有内容都会被提交给服务器。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>常用属性:action:表单收集到信息之后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序...原创 2020-01-30 22:24:38 · 262 阅读 · 0 评论