随笔分类 -  css相关

伸缩布局flex
摘要：一、伸缩布局的起源 1、之前我们想要适应不同的浏览器，一般采用的是设置宽度、高度为父级元素的百分比，但是有时候百分比的计算是相当复杂的，加上有时候还有规定的宽度要设置，所以，伸缩布局的出现是我们所急需的。 例：将一个section三等分，其中放入3个div 二、伸缩布局的使用 1、可以添加具体宽度 阅读全文
posted @ 2019-03-17 07:31 DHR~小白 阅读(191) 评论(0) 推荐(0)
css3动画
摘要：一、定义动画 @keyframes 动画名{ from{起始时的样式} to{终止时的样式} } @keyframes 动画名{ 0%{起始时的样式} 20%{中间的样式1} 50%{中间的样式2} 。。。。 100%{最后的样式} } 二、使用动画 选择器{ animation: 动画名 动画的执 阅读全文
posted @ 2019-03-16 18:40 DHR~小白 阅读(111) 评论(0) 推荐(0)
css3的3D变形
摘要：一、坐标系 1、是我们熟悉的右手坐标系：伸出右手，让拇指和食指成L形，大拇指向为右，食指向上，中指指向前方，这样，拇指、食指、中指的指向分别是X、Y、Z轴的正方向。 2、是我们CSS3中的3D坐标：伸出左手，让食指和拇指成L形，大拇指指向右，食指向上，中指指向内侧，这样，拇指、食指、中指的指向分别是 阅读全文
posted @ 2019-03-16 11:42 DHR~小白 阅读(226) 评论(0) 推荐(0)
css3的2D变形
摘要：一、2D变形 1、变形 transform:translate();translateX();translateY();translate(,); 2、过渡 transition:all 1s; 二、具体体现的例子 1、位移的实例 2、缩放 3、旋转 4、倾斜 阅读全文
posted @ 2019-03-16 06:37 DHR~小白 阅读(356) 评论(0) 推荐(0)
定位
摘要：一、定位 1、定位的三要素 position top left (right bottom) 2、定位的分类 1》static：静态定位（元素定位的默认方式，说明元素定位在静态位置，即文档流或者标准流中的默认位置） 2》relative：相对定位（相对于自己做的定位。作用：做一些位置的微调；配合绝对 阅读全文
posted @ 2019-03-13 20:15 DHR~小白 阅读(209) 评论(0) 推荐(0)
浮动
摘要：一、知识要点 1、在了解浮动之前，先要了解什么是布局 布局分为3种，标准流、浮动流、定位流 标准流：一个网页的标签元素正常情况下是从上往下，从左往右排列的，块级元素会独占一行，行内元素会按照顺序依次排列。在知道浮动之前，我们使用的一切都是标准流。 浮动：元素设置了浮动属性后会脱离标准流的控制，俗称： 阅读全文
posted @ 2019-03-12 08:53 DHR~小白 阅读(290) 评论(0) 推荐(0)
css的其他相关样式属性
摘要：一、颜色 1、预定义的表示颜色的单词 red,black.gray,pink...... 2、16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如果两两一样可以合并成3个数字 #fff; 3、rgb rgb(,,)0-255的数 4、rgba r 阅读全文
posted @ 2019-03-12 06:43 DHR~小白 阅读(190) 评论(0) 推荐(0)
CSS自动换行、强制不换行、强制断行、超出显示省略号
摘要：一、P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果 但是对于一串的数字或者单词却不具有这样的格式优势 二、各种方式 强制不换行：p { white-space:nowrap; } 自动换行：p { word-wrap:break-word; } 强制英文单词断行：p { word- 阅读全文
posted @ 2019-03-11 16:34 DHR~小白 阅读(6619) 评论(0) 推荐(0)
背景background
摘要：一、背景是一个综合的复合属性 background:#000 url(imgs/imgs.png) no-repeat fixed center - 30px; 背景： 颜色、图片位置、是否平铺、固定、定位。 二、背景相关属性的单独含义 1、背景的颜色 background-color:颜色的16进 阅读全文
posted @ 2019-03-09 08:31 DHR~小白 阅读(367) 评论(0) 推荐(0)
盒子模型
摘要：一、基本结构 一个盒子由内容、内边距、边框、外边距组成。 二、具体显示 1、内容 width height 2、内边距 padding:内容到边框的距离 padding:10px;//四个内边距都是10px padding:10px 20px;//上下内边距是10px 左右内边距是20px padd 阅读全文
posted @ 2019-03-09 08:00 DHR~小白 阅读(458) 评论(0) 推荐(0)
css的层叠性+继承性+优先级+权重
摘要：一、层叠性 1、含义 多种css样式叠加，浏览器处理冲突的能力。 2、原则 1》一般情况下，若出现冲突，会按照css的书写顺序，以最后的样式为准 2》样式不冲突，就不会层叠 二、css的继承性 1、在浏览器的样式栏显示的是inherited from xxx 2、可以继承的属性：1》文本颜色(col 阅读全文
posted @ 2019-03-08 10:56 DHR~小白 阅读(404) 评论(0) 推荐(0)
css的书写位置+元素分类
摘要：1、css的书写位置 1》行内样式： <span style="color:red;">haha</span> 2》内部样式 在style标签中 span{ color:red; } 3》外部样式 <link href="" rel="stylesheet" type="text/css" /> 2 阅读全文
posted @ 2019-03-07 19:13 DHR~小白 阅读(524) 评论(0) 推荐(0)
选择器
摘要：一、基本选择器分为通配符选择器、标签选择器、类选择器、id选择器 1、通配符选择器 *{} 就是一个星号，可以选中页面中的所有元素，但是其优先级是最低的 2、标签选择器 div{} span{} 其实就是写标签名，就可以选择到对应的元素，优先级仅高于通配符选择器 3、类选择器 .nav{} .nam 阅读全文
posted @ 2019-03-04 08:56 DHR~小白 阅读(474) 评论(0) 推荐(0)