![](https://img-blog.csdnimg.cn/20190925162019630.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css属性及扩展
LeonGus
漫天繁星,若有若无,时隐时现.
展开
-
less基础
less是一门css扩展语言,也称为css预处理器.作为css的一种形式的扩展,它并没有减少css的功能,而是在现有的css语法上,为css加入程序语言的特性.它在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。less变量@变量名:值;...原创 2019-11-13 20:00:12 · 127 阅读 · 0 评论 -
媒体查询
媒体查询事css3的新语法.使用@media查询,可以针对不同的屏幕尺寸设置不同的样式.@media mediatype and|not|only (media feature) {mediatype 查询类型,值: all用于所有设备,print用于打印机和打印预览.screen用于电脑,平板,手机显示屏幕.关键字 将媒体类型或者多个媒体特性连接到一起做媒体查询条件.and :可...原创 2019-11-13 19:49:56 · 264 阅读 · 0 评论 -
flex布局
flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。因为flex布局可以让子元素一行显示,不需要浮动,所以就不需要清除浮动flex布局还可以设置盒子垂直居中,...原创 2019-11-11 20:49:58 · 637 阅读 · 0 评论 -
移动端常见布局及主流方案
移动端单独制作流式布局(百分比布局)flex 弹性布局(强烈推荐)操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分less+rem+媒体查询布局混合布局响应式媒体查询bootstarp流式布局:流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸...原创 2019-11-11 20:14:06 · 852 阅读 · 0 评论 -
CSS3盒子模型box-sizing及清除移动端特殊样式
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + paddingCSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了/*CSS3盒子模型:border-box,边框盒子,理解:从边框开始计算盒子的大小(包...原创 2019-11-11 20:06:42 · 1218 阅读 · 0 评论 -
移动端技术解决方案
1.移动端浏览器兼容问题移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可2.移动端公共样式移动端 CSS 初始化推荐使用 normalize.css/Normalize.css:保护了有价值的默认值Normalize.css:修复了浏览...原创 2019-11-11 20:04:59 · 467 阅读 · 0 评论 -
背景缩放background-size
background-size属性规定背景图像的尺寸.background-size:背景图片的宽度 背景图片的高度;单位:长度|百分比|cover|contain百分比以元素自身为基准,cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域.(等比例拉伸,完全覆盖)contain把图像扩展至最大尺寸,以使宽度或者高度完全适应内容区域,等比例拉伸,任意一边先与盒子重合即可....原创 2019-11-11 20:03:23 · 260 阅读 · 0 评论 -
css3兼容处理
css3涉及到较多的新属性,某些低版本(如ie8以及以下)的浏览器对css3的支持程度不够,因此需要做以下处理添加对应的浏览器的前缀 常见前缀如下谷歌 -webkit火狐 -mozIE -ms如对 border-radius 进行兼容性处理 -webkit-border-radius: 30px 10px; -moz-border-radius: 30px 10p...原创 2019-11-06 16:39:43 · 253 阅读 · 0 评论 -
动画 animation
制作动画分为两步:在css中定义动画函数给目标元素调用动画函数动画序列:0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 “from” ...原创 2019-11-06 16:38:32 · 370 阅读 · 0 评论 -
2D转换(变换)transform
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。缩放:scale移动:translate旋转:rotate倾斜:skew2d移动 translate给元素添加 转换属性 transform属性值为 translate(x,y) 如 transform:translate(50px,50px);translate...原创 2019-11-06 11:46:44 · 453 阅读 · 0 评论 -
溢出的文字省略号显示
首先设置white-space,强制一行显示.white-space:normal ;默认处理方式white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。超出的部分隐藏 overflow: hidden;text-overflow 文字溢出设置或检索是否使用一个省略标记(…)标示对象内文本的溢出text-ov...原创 2019-10-25 20:00:49 · 223 阅读 · 0 评论 -
vertical-align垂直对齐
有宽度的块级元素居中对齐是margin:0 auto;文字对齐是text-align:center;vertical-align垂直对齐,只针对行内元素或者行内块元素.通过vertical-align 控制图片和文字的垂直关系,默认的图片会和文字基线对齐.vertical-align:baseline 基线|| top 顶部||middle垂直居中||bottom底部应用场景,图片...原创 2019-10-25 19:57:03 · 276 阅读 · 0 评论 -
轮廓线--禁止文本域拖拽
轮廓线是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline: outline-color ||outline-style||outline-width常用的写法:outline:0;或者 outline:none; 来清除轮廓线样式.禁止文本域拖拽开发过程中,一般文本域都是禁止拖拽的.resize:none;...原创 2019-10-25 19:51:28 · 374 阅读 · 0 评论 -
鼠标样式cursor
设置鼠标指针采用何种系统预定义的光标图形.属性值描述default默认pointer小手move移动text文本not-allowed禁止原创 2019-10-25 19:46:14 · 93 阅读 · 0 评论 -
元素的显示与隐藏
1. 使用display显示display:none 隐藏对象.display:block 除了转换层块级元素,同时还有显示元素的意思.特点: 隐藏后不再保留位置,多用于下拉菜单.2. visibility可见性visibility:visible 对象可视visibility:hidden 对象隐藏特点:隐藏后保留位置(停薪留职),3. overflow 溢出...原创 2019-10-25 19:43:43 · 250 阅读 · 0 评论 -
使用定位position实现元素居中
在使用绝对定位时要想实现水平居中,可以按照下图的方法:left: 50%;:让盒子的左侧移动到父级元素的水平中心位置;margin-left: -100px;:让盒子向左移动自身宽度的一半。垂直居中同上...原创 2019-10-24 09:18:29 · 4323 阅读 · 2 评论 -
定位(position)
为什么使用定位让子元素移动,吸引用户的眼球。当我们滚动窗口的时候,盒子是固定屏幕某个位置的将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面定位 = 定位模式 + 边偏移(属性定义元素的边偏移:(方位名词))静态定位(static)静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。静态定位 按照标准流特性...原创 2019-10-24 09:16:14 · 139 阅读 · 0 评论 -
清除浮动
为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响准确地说,并不是清除浮动,而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。...原创 2019-10-21 15:04:11 · 76 阅读 · 0 评论 -
浮动(float)
CSS 布局的三种机制CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)块级元素会独占一行,从上向下顺序排列;常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;常用元素:span、a、i、em等浮动让盒子从普通流...原创 2019-10-21 14:59:14 · 130 阅读 · 0 评论 -
圆角边框和盒子阴影
圆角边框border-radius:length; 其中每一个值可以为 数值或百分比的形式。技巧: 让一个正方形 变成圆圈盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;- 前两个属性是必须写的。其余的可以省略。- 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 ...原创 2019-10-21 14:51:29 · 144 阅读 · 0 评论 -
嵌套块元素垂直外边距的合并(塌陷)
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者解决方案:可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。...原创 2019-10-21 14:43:06 · 775 阅读 · 0 评论 -
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。解决方案:尽量...原创 2019-10-21 14:41:04 · 410 阅读 · 2 评论 -
盒子模型(Box Model)
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距(类似单元格的 cellpadding)盒子与盒子之间的距离是外边距(类似单元格的 cells...原创 2019-10-21 14:39:15 · 1648 阅读 · 1 评论 -
CSS 三大特性
CSS层叠性概念:所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉原则:样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。样式不冲突,不会层叠CSS继承性概念:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将...原创 2019-10-21 14:27:36 · 135 阅读 · 0 评论 -
CSS 背景(background)
背景颜色(color)background-color:颜色值; 默认的值是 transparent 透明的背景图片(image)background-image : none | url (url) 小技巧: 提倡 背景图片后面的地址,url不要加引号。背景平铺(repeat)background-repeat : repeat 背景图像在纵向和横向上平铺(默认的) |...原创 2019-10-21 14:11:47 · 725 阅读 · 0 评论 -
标签显示模式(display)
什么是标签显示模式标签以什么样方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。块级元素(block-level)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li&...原创 2019-10-21 13:45:32 · 231 阅读 · 0 评论 -
css复合选择器
后代选择器概念: 后代选择器又称为包含选择器作用: 用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。.class h3{color:red;font-size:16px;}子元素选择器- 作用: 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。- 其写法就是把父级标签写在前面,子级标...原创 2019-10-21 13:39:24 · 150 阅读 · 0 评论 -
CSS字体样式属性
font字体1. font-size:大小p {font-size:20px; } 单位:可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。2. font-family:字体p{ font-family:“微软雅黑”;}网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑...原创 2019-10-20 19:46:15 · 284 阅读 · 0 评论 -
CSS选择器
CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来CSS基础选择器标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用: 标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签优点: 是能快速为页面中同类型的标签统一样式缺点: 不能设计差异化样式。类选择器.类名 { ...原创 2019-10-20 19:11:09 · 147 阅读 · 0 评论 -
引入CSS样式表(书写位置)
1. 行内式(内联样式)<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>注意:style其实就是标签的属性样式属性和值中间是:多组属性值之间用;隔开。只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余缺点:没有实现样式和结构相分离2.内部样式表(内嵌样式表)<he...原创 2019-10-20 19:03:06 · 196 阅读 · 0 评论