css
捕风的紫色鸢尾
这个作者很懒,什么都没留下…
展开
-
position 属性都是相对于什么来定位的?
static:首先position属性的默认值是static,static没有定位,元素出现在正常的流中,会默认忽略top、bottom、left、right。与脱离文档流的元素一起z-index会失效;relative:其次relative也未脱离文档流,relative生成相对定位的元素,相对于自身的正常位置做定位,因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。相当于元...原创 2018-03-30 23:06:40 · 2396 阅读 · 0 评论 -
整理一些用到确想不起来的css样式设置
这些是楼主本人在开发过程中遇到的一些的css样式问题,百度上也很容易查到,并没有说经常用,但是偶尔写到这些都要再问一次度娘,为了不在麻烦度娘,这次索性整理一下。一、input placeholder属性样式设置方式html部分css部分设置placeholder属性值的字体大小为1rem,其他样式设置与字体样式的设置方法一样。input::-webkit-input-placeholder { ...原创 2018-03-27 16:31:27 · 446 阅读 · 0 评论 -
BFC原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Bo...转载 2018-06-04 21:53:51 · 321 阅读 · 0 评论 -
css实现垂直居中
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构:123<div class="box box1"> <span>垂直居中</span></div>css:123...转载 2018-06-05 17:44:01 · 193 阅读 · 0 评论 -
Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布局将成...转载 2018-07-06 14:30:54 · 227 阅读 · 0 评论 -
Grid布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Grid布局</title> <style> .main{ width: 1200px; ...转载 2019-07-18 14:33:18 · 208 阅读 · 0 评论 -
网页实现掷骰子小游戏
首先明确需求: 在网页正中间展示骰子,点数为一点,点击骰子,骰子旋转然后停留在随机点位上。再次点击骰子,骰子可以继续旋转并停留在随机点位上。 这里我们使用css3动画、3d旋转配合js实现效果一,HTML结构 <body> <!-- span是点数 --> <div id="wrapper"&g...原创 2019-07-23 17:02:17 · 6576 阅读 · 1 评论