032021-9

CSS3实现自定义Checkbox和Radiobox

我们知道浏览器自带的Checkbox复选框不怎么美观（这或许是我们看习惯了的缘故），而且复选框在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式，个人觉得比浏览器自带的Checkbox美观不少。

下面先来看一下最终实现效果

效果演示地址

效果图如下

下面来分析一下源代码，原理很简单，先把页面上<input type="checkbox" />的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox邻近的label元素：

HTML代码：

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

CSS3代码：

.regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;
}

下面的CSS代码可以让checkbox选中后出现阴影的效果，主要利用了box-shadow属性：

.regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

radiobox的实现也是同样的原理，具体实现方式大家可以在线演示研究，也可以下载源码，非常简单实用。

分类: HTML5/CSS3

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1091)

102021-5

用css实现文字抖动特效

前端达人

html:<span class="shaky">你在说什么( ,,´･ω･)ﾉ"(´っω･｀｡)</span>

css:.shaky { display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes shaky-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg) } 12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg) } 26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg) } 30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { -webkit-transform: translate(-1px, 0px) rotate(2deg) } 34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg) } 56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg) } 70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg) } 80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg) } 88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg) } } @keyframes shaky-slow { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { transform: translate(1.4px, 0px) rotate(-2deg) } 12% { transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { transform: translate(1px, 1px) rotate(-0.5deg) } 22% { transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { transform: translate(-1.4px, -1px) rotate(2deg) } 26% { transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg) } 30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { transform: translate(-1px, 0px) rotate(2deg) } 34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { transform: translate(1.6px, -1px) rotate(-2deg) } 56% { transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { transform: translate(0px, 0px) rotate(-1.5deg) } 64% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { transform: translate(0px, -1.6px) rotate(-2deg) } 70% { transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { transform: translate(-1px, 1.4px) rotate(2deg) } 80% { transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { transform: translate(1px, 1.4px) rotate(-2deg) } 88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { transform: translate(-1.4px, 1.6px) rotate(2deg) } 94% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { transform: translate(1.3px, 1px) rotate(-0.5deg) } }

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

文章来源：网络某处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

评论(0) 浏览(1283)

012020-3

html5+css3实现2D-3D动画效果实例

前端达人

html5+css3实现2D-3D动画效果实例

主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。

文章目录

html5+css3实现2D-3D动画效果实例

2D变换

3D变换

2D中应用实现案例

3D中应用实现案例

css3动画

2D变换

是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

1

2

*2d对下面面坐标系简单分析如下：

（1）.默认状态下，x轴是水平的，向右为正。

（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

下面首先需要了解2D、3D中的功能函数：

位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变

2D中应用实现案例
位移 translate()
效果图：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：实现位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共样式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠标滑过覆盖上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*设置定位，挡住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互样式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

————————————————
版权声明：本文为CSDN博主「weixin_43513126」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43513126/article/details/104570062

评论(0) 浏览(2567)

272019-9

CSS3 终极布局指南

seo达人

对于同一个页面布局，几乎每个人的写法都不一样，有人喜欢Flex弹性盒子布局，有的人则喜欢Float浮动布局，有些人喜欢Margin负值布局，等等。从来就没有一种统一的布局方案，现在大伙写代码也就放飞自我，只要能在规定的环境上跑起来，不会乱就行了。但是，身为脑瘫正经前端，我们还是有必要分出在不同情况应使用的布局。

这一篇博客比起作为文章，不如作为工具书。当你对布局迷茫时，不妨打开看看。我们可以不求甚解，只需要先把所有布局掌握熟练。

文章目录

CSS3 终极布局指南

正常布局（语义化布局）

正常布局，按照浏览器的内置CSS渲染

应用场景

带来的问题

挫

不兼容

没有自适应

解决方案

Float浮动布局

什么是浮动？

浮动元素的排列

浮动解决的布局问题

浮动带来的问题

父元素高度坍缩

不希望浮动时清除浮动

总结

定位布局

定位的应用

static

relative

absolute

高度坍缩

对比float

总结

fixed

祖先未使用transform:none

使用

sticky 粘性定位

Flex布局

浏览器支持

Flex使用介绍

Flex容器属性

flex-direction 排布方向

flex-wrap 控制换行

flex-flow [排布方向/控制换行]的简称

justify-content 子项目在主轴上的排布

align-items 子项目在交叉轴排布

align-content 定义多根轴线排布

Flex子项属性

order 子项排布靠前排名

flex-grow 子项放大比例

flex-shrink 子项缩小比例

flex-basis

flex

align-self

Grid 布局

参考

声明

正常布局（语义化布局）

正常布局，按照浏览器的内置CSS渲染

大道至简在远古时代，CSS还有没被发明，浏览器渲染HTML的时候，只是按照规定好的如标题、段落、表格等格式渲染。且不同的浏览器对于相同元素的渲染也是不同的，现在这项传统艺能保留到了今天。

不过到了今天，正常布局也稍微被W3C重视了一下。在HTML5的规定中，新增加了不少语义化的元素。所谓语义化元素就是让大家规定它就是来做这件事的。

新增加的语义化元素。

标签名称作用

hearder header 标签定义文档的页面组合，通常是一些引导和导航信息。

nav nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

article article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

section section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

aside aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

hgroup hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

time time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

mark mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

figure figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

可以看到HTML5规定中增加了不少新的标签，但是这些标签大部分并不是为了补充正常的文档布局的，而是服务于搜索引擎的爬虫。不要觉得页面布局只是给人看的！对于布局清晰地页面，搜索引擎的爬虫也会给出更高的分数。

应用场景

作为布局的基石。

开发较为单一的页面，比如电子书阅读页面，面向视力障碍人士的报纸页面等。

带来的问题

挫

使用浏览器默认的CSS意味着你不可定制自己的页面，对于像<ul>、<table>这样的标签，你也只能忍受上世纪的设计风格了。

不兼容

先前说了，每个浏览器对于基础的HTML节点的渲染都不一样，也就是说你写的页面在IE上是一个风格，换到Safari上又是一种风格。

没有自适应

有一说一，正常布局（语义化）还是用来当基石比较好，对于响应式、自适应那还得看下面伙计的发挥。

解决方案

解决挫的方法就是使用style属性，也就是使用CSS美化我们的页面。解决不兼容的问题则需要初始化CSS，大伙应该在不少的页面的头部见过一大坨css代码吧，就像下面Google页面。(部分)

body{color:#000;margin:0}body{background:#fff}a.gb1,a.gb2,a.gb3,.link{color:#1a0dab !important}.ts{border-collapse:collapse}.ts td{padding:0}#res,#res .j{line-height:1.2}.g{line-height:1.2;text-align:left;}.ti,.bl{display:inline}.ti{display:inline-table}#rhs_block{padding-bottom:15px}a:link,.w,#prs a:visited,#prs a:active,.q:active,.q:visited,.kl:active,.tbotu{color:#1a0dab}.mblink:visited,a:visited{color:#609}.cur,.b{font-weight:bold}.j{width:42em;font-size:82%}.s{max-width:48em}.sl{font-size:82%}

1

页面初始化也是很重要的，它可以使我们的代码健壮的运行在各个环境的浏览器上。

Float浮动布局

什么是浮动？

如果首先要认识一个物品，认识一个东西的最好方式是了解为什么会产生它，也就是要翻它的历史。——NaoTan·Ma·Nong

看上图，啊，报社最爱的环绕，一堆文字环绕一张图片，这样的布局使得页面紧凑，并且有较好的阅读体验。如果我们要在HTML中实现这样的布局应当怎么设置呢？手动设置换行？不行，缺少灵魂。如果能使文字绕过图片排列下来就好了。

于是Float属性出世，它不仅解决了文字环绕问题，并且带来了新的布局方案。

如上面的布局，我们用代码实现主要部分。

.side-bar{

float:left;

}

.main-content{

float:left;

}

1

2

3

4

5

6

浮动元素的排列

当一个元素被设置为浮动元素时，首先，它会被移除文档流，设置float:left|right则元素会向设置方向排列，直到遇到父元素边框(或者说最大宽度)或者另一个浮动元素时停止。

当设置父元素display:flex时，子元素的浮动值无效！

浮动解决的布局问题

使用浮动我们可以解决传统的两列布局、三列布局的自适应。下面代码是用浮动实现的两列布局。

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>两列布局</title>

<style>

body,

html {

margin: 0;

background-color: rgb(228, 228, 228);

}

header {

margin-bottom: 20px;

}

footer {

margin-top: 20px;

}

.layout {

height: 50px;

border: 1px solid black;

}

aside {

width: 25%;

float: left;

border: solid 1px black;

height: 500px;

}

article {

width: 70%;

border: solid 1px black;

height: 500px;

float: right;

}

</style>

</head>

<body>

<header class="layout"></header>

<div style="overflow:auto;">

<aside>

</aside>

<article>

</article>

</div>

<footer class="layout"></footer>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

效果如下

浮动带来的问题

父元素高度坍缩

一般来说新手在学习浮动布局之后，遇到的第一个问题就是父元素高度坍缩。什么是高度坍缩？

看上图，在父元素的四个子元素均为浮动元素，由于浮动元素的特性浮动元素脱离文档流，所以父元素不会被撑起高度。

如何解决？答案很简单，使用BFC块级格式上下文。当父元素为BFC的时候，内部计算高度会带上浮动元素的高度。

不希望浮动时清除浮动

使用clear属性可以使元素清除周围的浮动。

如上图，对段落文字清除浮动，导致原本环绕的文字，另起一行。顺便解决了高度坍缩的问题。

总结

浮动在带来方便的同时也引入了新的问题，如果能处理好这些问题那么浮动也可以当做布局的主力，但是都已经9102年了，我们应该追随CSS3的布局方案，尽量少使用浮动。

定位布局

收拾房子的时候总会把物品按照相应的位置放置，这样会让房间看上去更加整洁。所以，我们CSS也是可以这样做的。

使用position属性，调整元素的位置。position一共有四种定位类型：定位元素、相对定位、绝对定位、粘性定位，五种取值：static、relative、absolute、fixed、sticky。

名称描述定位类型

static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。定位元素

relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。相对定位

absolute 不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。绝对定位

fixed 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。绝对定位

sticky 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table 元素的效果与 position: relative相同。粘性定位

一般使用position属性时，会使用其相对定位与绝对定位、粘性定位，它们都使用top、bottom、left、right来调整自身位置，但是调整的基准不一样。

定位的应用

static

static是元素正常出现在文档流中的定位，文档流中的排列为自上而下，自左至右。一般来说block元素自占一行，inline元素横向排列。

正常情况下在我们的页面中大部分元素为static定位，对于一些特殊需求我们需要使用其他定位。比如像wiki中的关键词，鼠标移动上去的时候，关键词下面显示式卡片。

relative

relative是在实现一些特殊布局的时候经常使用的一种定位方式。设置为relative的元素并不会脱离文档流，但是可以通过top、bottom、left、right调整元素对于默认基准的位置。

.box {

display: inline-block;

width: 100px;

height: 100px;

background: red;

color: white;

}

two {

position: relative;

top: 20px;

left: 20px;

background: blue;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

使用相对定位可以实现一些炫酷的效果。

.content{

text-align: center;

margin: 20px;

}

.card{

position: relative;

display: inline-block;

width: 200px;

height: 200px;

background-color: darkgray;

top: 210px;

right: 170px;

visibility: hidden;

}

span:hover+.card{

visibility:visible;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<div class="content">

<span>鼠标移到我身上！</span>

<div class="card">

</div>

</div>

1

2

3

4

5

6

效果

但是，使用相对定位依然会出现一些问题。relative定位并不会脱离文档流，所以.content元素的高度为200px。

absolute

与relative定位不同的是absolute是脱离文档流的，而且相对基准是position属性不为static的祖先元素，如果祖先都是static则元素相对body定位。并且，对于absolute元素，如果不设置top/bottom/left/right的话依然排列在正常布局位置。

html,

body {

margin: 0;

}

.content {

position: relative;

/ top: 50px; /

margin-top: 50px;

}

.static {

position: static;

}

.relative {

position: relative;

margin: 20px 0;

}

.absolute {

display: inline-block;

width: 50px;

height: 50px;

background-color: lightcoral;

position: absolute;

}

.non-ab {

display: inline-block;

width: 50px;

height: 50px;

background-color: darkblue;

margin-left: 100px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<div class="content">

<div style="height: 50px;"></div>

<div class="static">

<div class="non-ab">

</div>

<div class="absolute">

</div>

</div>

<div class="relative">

<div class="absolute">

</div>

<div class="non-ab">

</div>

</div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

上面的代码很有意思，有兴趣的同学可以放在codepen上面跑一下子。这个例子验证了absolute的排列方式。当我们知道我们在做什的时候，也就不需要墨守成规（对于absolute元素的父元素统一设置relative属性）了。

高度坍缩

只要是脱离了文档流的元素都会出现高度坍缩，所以在使用absolute属性时，请确保父元素不会因此而改变。

对比float

Float与absolute都会使元素脱离文档流，但是众所周知对相同元素设置float与设置absolute会出现不同的效果。这是因为float与absolute本身的排列不一样。

float：脱离文档流，排列时以父元素为基准，并且会为占用其他浮动元素的位置。

absolute：脱离文档流，排列时分情况：第一种情况，对于未设置left、right、top、bottom属性的元素，排列在正常显示位置，并不占用空间。第二种情况，设置位置属性的元素，基于非static祖先元素排列。

上面两者比较显著的差异为float会影响下一个float元素，但是absolute元素不会。

总结

说absolute为绝对定位也并不贴切，它也是基于祖先元素定位的，只是脱离了文档流。我个人还是比较推荐在处理元素相对位置问题上使用absolute属性的，但前提是您已经深刻理解了absolute的排列方式。

fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

fixed元素也会脱离文档流，并且和absolute元素一样，当不设置任何left、top、bottom、right值的时候，元素依然按照正常定位的位置放置。

祖先未使用transform:none

当祖先元素未使用transform:none的时候，fixed元素相对于该祖先元素进行定位。

在上面的图片中，我设置小黄块为fiexd属性，并让父元素设置为使用transform:matrix(1, 0, 0, 1, 0, 0);，这时候小黄块并没有相对于body进行定位，当滚动条下拉时，小黄块定位固定在父元素左上角。

使用

fiexd元素一般用在如：to-top按钮，或者侧边悬浮面板，或者悬浮导航栏之中。

sticky 粘性定位

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table 元素的效果与 position: relative相同。

上面我们使用了fiexd与transform，发生了我们意想不到的效果，那就是fixed元素并未相对于body进行移动，也没有在父元素中进行标准的fixed定位。现在我们使用以下sticky属性来看一下效果。

<style>

.box{

box-sizing: border-box;

height: 150px;

border:solid 3px black;

margin: 0 0 20px 0;

overflow: auto;

}

.block{

width: 50px;

height: 50px;

background-color: orange;

}

.sticky-1{

position:sticky;

top: 0px;

}

</style>

<div class="box box-1">

<p>下面这个小黄块设置为sticky</p>

<div class="sticky-1 block">

</div>

<p>

hahah

</p>

<p>

hahah

</p>

<p>hahaha</p>

<p>hahaha</p>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

当我们向下滚动的时候神奇的事情发生了。

小黄块固定到了父元素的top:0位置了，不仅如此，再向上滑动后，小黄块又回复了当时的位置，而且占用了文档本身的位置。

使用这个特性我们可以制作浮动的Header组件，当用户向下滑动至窗口上侧的时候，Header组件也跟随窗口滑动。

Flex布局

对于前端工程师来说，最让人头疼的莫过于自适应布局。对于不同分辨率的设备要做到页面统一，在CSS3出现之前，还是挺不容易的。还有就是前端工程师头疼的一个布局问题：垂直居中。

CSS3中新出了一种布局技术：CSS弹性盒子布局，我们来看一下MDN是如何介绍的。

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

接下来，我会使用Flex布局技术，设计一些我们常使用页面布局，并指出优点与缺点。但是，我们首先要来看一下浏览器的支持程度。

浏览器支持

特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari

基础支持 20.0 (20.0) 21.0-webkit 29.0 10.0-ms 11.0 12.10 6.1-webkit

主流的浏览器全部支持Flex属性。注：与社会脱轨的IE9并不支持Flex，如果想写出兼容IE9的页面，请不要使用Flex。

Flex使用介绍

使用flex务必清楚一些属性概念。

Flex容器：对于一个基本元素(不含任何CSS属性，如div)，设置display:flex，即可创建一个Flex容器。

Flex子项：父元素为Flex容器的元素，称之为Flex子项，其排布受到父元素影响。注：一定是父元素为Flex容器的元素，祖先不算。

排布方向：指Flex子项在Flex容器中的排布方向。排布方向有两种：column、row。在Flex容器上使用flex-direction: column|row(默认);即可设置。

主轴：指的Flex容器中是与排列方式相同的方向的轴。如设置Flex容器direction: column;则其主轴为竖直方向。

交叉轴：指的Flex容器中是与排列方式相反的方向的轴。如设置Flex容器direction: column;则其主轴为水平方向。

我们一定要清楚上面的基础概念，这对深入使用Flex有很大的帮助。下面我会介绍一些Flex常用的属性，主要分为两部分：对Flex容器、对Flex子项。

Flex容器属性

flex-direction 排布方向

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

flex-direction属性接受以下值：

row:子项目在flex容器中横向，从左至右排列。

row-reverse:表现和row相同，也是横向，但是是从右到左。

column:子项在容器中竖向排列，从上至下。

这里不贴图了

column-reverse:表现和column相同，子项在容器中竖向排列，从下至上。

这里不贴图了

flex-wrap 控制换行

CSS flex-wrap 指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值:

nowrap(默认)

flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值相当于 start 或 before。

wrap

flex 元素被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。

wrap-reverse

和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

flex-flow [排布方向/控制换行]的简称

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

示例：flex-flow: column-reverse wrap;

justify-content 子项目在主轴上的排布

CSS justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

justify-content同时受到父容器主轴的影响。

取值：

start

从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。

flex-start（默认）

从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end

从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

left

伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于start

right

元素以容器右边缘为基准, 一个挨着一个对齐,如果属性轴与内联轴不平行,则right的行为类似于start.

space-between

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly

flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,主轴结束位置到最后一个flex项的间距，都完全一样。

看上去与space-around的排布很相似，但其实还是有一些区别的。space-evenly会在每一行均匀分布间隙，而space-around是均匀分布项目。

借一张图

看上去我们要学的属性很多，但是其实我们只需要记住我们常用的几个属性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上这几个就是我们常用的属性值，通过设置主轴方向、设置排列方式，我们可以灵活地组织我们的元素。

align-items 子项目在交叉轴排布

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

取值：

normal

这个关键字的效果取决于我们处在什么布局模式中：在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。在绝对定位布局的静态位置上，效果和stretch一样。对于那些弹性项目而言，效果和stretch一样。对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。这个属性不适用于会计盒子和表格。

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

因为align-items其实和justify-content我这里就不放一些图片凑字数了。

align-content 定义多根轴线排布

该属性对单行弹性盒子模型无效。（即：带有flex-wrap: nowrap）。

CSS的align-content属性设置了浏览器如何沿着伸缩盒子容器（flexbox container）的纵轴和网格容器（Grid Container）的主轴在内容项之间和周围分配空间。

它的取值和align-items差不多，经常有人会把他们搞混。

align-content一般定义多行的交叉轴排列。

绝大多数情况下我们使用align-items即可实现我们的需求。

Flex子项属性

order 子项排布靠前排名

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

取值：

<integer>

表示此可伸缩项目所在的次序组。

flex-grow 子项放大比例

CSS flex-grow 属性定义弹性盒子项（flex item）的拉伸因子

取值：

<number>

默认值0，即如果存在剩余空间，也不放大。负值无效。

flex-shrink 子项缩小比例

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

总而言之，你定了这个属性，其他项目会先压榨你的空间，然后再均匀缩小其他项目。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

注：分配多余空间之前！！

也就是说你给的flex-basis值大于当前分配空间时，依然会被压缩。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

这个属性了不得，它也是我们经常用的子项目属性之一。

.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

1

2

3

就像上面的图，他可以决定子项目的交叉轴单独排列方式。

Grid 布局

未完待续…明天补上

参考

HTML5语义化标签属性-HTML5属性手册

All About Floats | CSS-Tricks

清除浮动的四种方式及其原理理解

【前端Talkking】CSS系列——CSS深入理解之absolute定位

CSS 弹性盒子布局

Flex 布局教程：语法篇

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(2341)

302018-5

css的多行省略号处理

周周

在我们的页面布局的时候，经常会有这样的需求，超过指定行文本的时候会进行（省略号...）的处理，那么我们改怎么设置css呢？如下：

设置盒子的css为：

overflow:hidden;;
text-overflow:ellipsis;
white-space:nowrap;

但是这样只能显示一行而不能实现指定行，所以还要其他的方法来实现指定行处理的。

WebKit浏览器或移动端的页面（大部分移动端都是webkit）

可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性，它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

css 代码:

overflow：hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;/*这里控制着显示多少行*/
-webkit-box-orient:vertical;

评论(0) 浏览(2730)

252018-5

前端常用class命名

周周

头：header

内容：content/container

尾：footer

导航：nav

侧边栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左中右：left center right

登录条：loginbar

标志：logo

版心：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinUS

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

评论(0) 浏览(2490)

162018-5

利用 CSS 变量实现令人震惊的悬浮效果

周周

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
.button {
   position: relative;
   appearance: none;
   background: #f72359;
   padding: 1em 2em;
   border: none;
   color: white;
   font-size: 1.2em;
   cursor: pointer;
   outline: none;
   overflow: hidden;
   border-radius: 100px;
span {
position: relative;
  }
&::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
&:hover::before {
--size: 400px;
}