css
文章平均质量分 88
yummyH
做一个积极,乐观,充满理想的人
展开
-
利用 CSS3 实现一个转动立体六边形 <一>
利用CSS3实现一个立体六边形结果示例图:示例代码:.test{ font-size:20px;}.container{ width: 500px; height: 420px; position: relative; margin: 0 auto; padding-top: 200px; perspect原创 2017-08-29 09:45:35 · 2556 阅读 · 0 评论 -
利用 CSS3 实现一个转动立体六边形 <二>
实现一个转动的立体六边形结果示例图:示例代码:.test{ font-size:20px;}.container{ width: 500px; height: 420px; position: relative; margin: 0 auto; padding-top: 200px; perspective: 2000px; -webkit-perspe原创 2017-08-31 09:55:00 · 1570 阅读 · 1 评论 -
关于CSS实现水平垂直居中
行内元素:1.text-align:center 对文本,图片,按钮等行内元素进行水平居中2.line-height:行高 当只有一行文字元素时,将line-height设为行高可实现垂直居中 块元素:3.margin:0 auto 对于有宽度的块元素,设置margin:0 auto,相对于父元素水平居中 4.绝对定位与负边距实现 利用绝对定位,将元素的top和left属性都设为50%...原创 2017-08-21 16:32:50 · 251 阅读 · 0 评论 -
回流 与 重绘
浏览器的渲染过程:具体过程:1. 浏览器回把html解析成DOM树,DOM树的构建是一个深度遍历的过程(当前节点的所有子节点遍历完成才会去构建当前节点的下一个兄弟节点)2. 在构建DOM树的同时,浏览器也会把CSS解析成 CSS树3. 合并DOM树和CSS树,生成render树(注:在这个过程,浏览器会自动忽略 head 元素,以及 display 属性值为none的元素)4. 浏览器在拿...原创 2018-05-02 16:52:28 · 1011 阅读 · 0 评论 -
移动端1像素问题(未完)
移动端1像素问题:目标:1px高,100px宽的线条<div className="border"></div>1.通过scale调整缩放比例.border { border-bottom: 1px solid #ddd; transform: scale(.5); width: 200px;}2.通过图片实现,在代码中引用图片...原创 2018-08-09 15:26:07 · 400 阅读 · 0 评论