CSS
文章平均质量分 78
yatsov
GISer
展开
-
翻译 CSS如何水平居中-垂直居中
翻译 如何居中 对这篇文章的翻译https://css-tricks.com/centering-css-complete-guide/水平居中内联元素?文字或者链接?在块级元素内你可以将内联元素水平居中通过:.center-children { text-align: center;}这些在inline, inline-block, inlin...翻译 2018-03-17 11:35:54 · 284 阅读 · 0 评论 -
CSS 浮动为什么会塌陷以及解决方案
CSS 浮动为什么会塌陷浮动浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动脱离文档流,所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动塌陷当元素设置浮动而父元素的宽高没有设置时,高度会塌缩为0。如图 解决方案1 在父元素里面填加一个没宽度高度的元素使用clear:both<!DOCTYPE ht...原创 2018-03-03 22:08:50 · 9239 阅读 · 0 评论 -
学习line-height 和 vertial-align
学习line-height 和 vertial-align1 line-height一个div元素的高度其本质上是由line-height属性决定的下面做实验。<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8">原创 2018-03-18 17:09:04 · 323 阅读 · 0 评论 -
CSS margin 学习笔记
CSS margin 学习笔记margin高度自适应首选margin 和padding在数值为百分比的时候统一计算的是父元素的宽度。这里的一个小栗子是高度自适应。我们可以利用margin和padding来实现高度补全。 <div style="width:50%;padding:25% 25%;background:green;"> </div>...原创 2018-03-25 18:45:43 · 962 阅读 · 0 评论 -
CSS 实现尖角样式
CSS 实现尖角样式实现思路实现一个CSS的尖角样式 ,思路为 用两个尖角,我是用的是一个before一个div、将其放到指定的位置,一个小一点作为尖角另外一个大一点作为尖角的border。然后使用position定位以及负的margin将其定位上去即可代码如下。实现代码<!DOCTYPE html><html><head> ...原创 2018-03-25 18:58:27 · 2034 阅读 · 2 评论 -
CSS八等分圆
简介对于CSS的练习介绍如何绘制八等分的圆。问题1 主要思路这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意:每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对,要么使用z-index问题2 重点代码1 半圆和圆 .cir...原创 2018-08-11 19:23:44 · 6407 阅读 · 0 评论 -
锤子科技效果3D效果原生JS代码练习
http://js.jirengu.com/negor/4/edit?html,output 参照了上面的代码将其js原生写了一下<html> <head> <title>3D Hover效果</title> <meta charset="utf-8" /> <st..原创 2018-08-27 20:14:36 · 449 阅读 · 0 评论 -
用 CSS target属性做一个tab页面
功能简述我的目标是运用CSS做一个tab页面,target属性的用法就是点击某个a标签的href 然后捏,他的href标签指向的id就是就是target。这个IE低版本支持不了下面是can i use 的截图 源代码<html> <head> <meta charset="utf-8" /> <...原创 2018-08-31 15:54:44 · 563 阅读 · 0 评论