CSS
关注
分享
扫一扫
ZhaoYLi
这个作者很懒，什么都没留下…
展开
-
CSS —— 盒子模型（Flexbox 布局方式）
目录传统盒模型Flexbox 布局方式Flexbox 核心概念Flex 容器属性flex-direction ：项目元素排列的方向flex-wrap ：项目元素排列方式justify-content ： 项目在主轴上的对齐方式align-items ：项目在交叉轴上的对齐方式align-content ：多行项目的排列方式Flex 项目属性order ：项...原创 2018-05-11 15:19:19 · 15368 阅读 · 2 评论 -
CSS —— 清除浮动的方法及其原理理解
一、为什么要清除浮动浮动会引起父容器塌陷，导致页面布局出错等问题。例子：<body> <div class="parent_Div"> <div class="float_Div">float left float left float left float left.....</div> <div class=...原创 2018-02-27 00:05:38 · 1249 阅读 · 0 评论 -
CSS —— 背景图片填满DIV、鼠标滑过放大图片
1、让背景图片填满DIV应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下：（1）、background-size:coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪）示例：.case { backgr...原创 2018-11-30 00:22:04 · 10203 阅读 · 0 评论 -
CSS —— rgba与opacity的区别
rgba和opacity都可以设置元素的透明度。两者的区别在于opacity会继承父元素的opacity属性，而rgba设置的元素，其后代元素不会继承父元素的不透明属性。opacity语法：opacity: value | inheritvalue取值为0~1,0为完全透明，1为完全不透明；inherit表示此属性默认为可继承属性，所以子元素会继承父元素的opacity属性值，从而...原创 2018-11-30 21:54:51 · 744 阅读 · 0 评论 -
CSS —— 盒子阴影（box-shadow）
语法 box-shadow: h-shadow v-shadow blur spread color inset;注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。未加阴影效果如下：1、外阴影a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移...原创 2018-12-24 17:54:56 · 29391 阅读 · 0 评论 -
CSS —— 元素水平、垂直、水平垂直居中
一、水平居中1、子元素宽度固定对子元素设置：margin: 0 auto;即可。2、子元素宽度未知①子元素为行内元素：对父元素设置：text-align: center;即可。②子元素是块级元素：a： 单个子元素，无需设置，子元素宽度自动铺满整个父容器。b：多个子元素，把子元素设置为行内块级元素inline-block，父容器使用text-align:center。如下：3、...原创 2019-01-26 00:05:41 · 467 阅读 · 0 评论 -
CSS —— 圣杯、双飞翼布局实现原理
一、圣杯布局1、什么是圣杯布局如下图，圣杯布局就是左右两个div宽度固定，中间div自适应的三栏布局。2、文档结构// 为了安全起见，给body设置一个最小宽度 body { min-width: 600px; }&amp;amp;amp;lt;div class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;amp;gt; &a原创 2019-03-09 00:47:19 · 1148 阅读 · 0 评论