css
关注
分享
扫一扫
文章平均质量分 66
zp1996323
web开发养成中
展开
-
css实现六边形
最近在写一个蜂窝式布局,所以研究了一下六边形的实现原理 实现六边形的俩种方式: 方式一： 一个长方形+两个三角形 首先我们要先了解一下border 每个border之间是成45度,利用这点我们可以做出来三角形<div class="triangle"></div>/*css片段*/.triangle{ width: 0; height: 0; border-b原创 2015-09-12 15:13:03 · 2789 阅读 · 1 评论 -
img的间隙
*{ padding: 0px; margin: 0px;}.test{ border: 1px solid red; width: 600px;}<div class="test"> <img src="test.jpg" /></div>上述代码产生的效果如图所示，但是另人感到惊奇的是，img与div之间存在着一个间隙，这个间隙是怎么产生的？应该原创 2016-09-03 20:56:58 · 568 阅读 · 0 评论 -
html语义化
首先来看什么是html语义化：根据内容的结构化（也就是内容的语义化），选择合适的便签便于开发者阅读和写出更优雅的代码，同时更加有利于爬虫和机器很好地解析（有利于SEO功能）。 1.<header>标签代表网页或<section>的页眉 2.<hgroup>代表网页或者<section>的标题，当元素有多个层级时，该元素可以将h1到h6的元素放在其内（只有一个h1~h6时就不用使用了）。 3.<原创 2015-11-29 20:14:54 · 339 阅读 · 0 评论 -
stacking context
注： 本文参考自张鑫旭大神博客：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/今天在sf社区中看到一个问题，在这里简单的还原一下：<!DOCTYPE html><html> <head> <meta charset="utf-8" />原创 2016-05-23 16:37:36 · 1066 阅读 · 0 评论 -
css中的baseline
这是css中的一个容易被人忽略的概念，今天在知乎上看到一个问题，这个问题应该是关于baseline，才去补习了一下关于baseline的知识，首先我来还原一下问题：<div style="position:absolute;left:0;top:0;background:black;color:white;font-size:24px;"> <span style="background:r原创 2016-05-19 22:57:26 · 16761 阅读 · 1 评论 -
谈一谈float
float浮动，我们会常常用于我们的css布局中，提到浮动的行为，我们不得不提及一下BFC，在普通流（normal flow）中所有的盒子会参与一种格式上下文，这个盒子可能是块盒也可能是行内盒，块盒参与的是块级格式化上下文（Block Formatting Context），也就是我们所说的BFC；行内盒参与的是行内级格式化上下文（Inline Formatting Context.），也就是我们所原创 2016-04-09 16:49:35 · 558 阅读 · 0 评论 -
css三列布局（一）
这就是一个三列等高布局的效果，运用了padding补偿法，先上代码： dom结构：<div class="container"> <div class="left"> fefwefew </div> <div class="center"> wefwefwe </div> <div class="right">原创 2015-11-01 14:24:49 · 1047 阅读 · 0 评论 -
CSS垂直居中
注：本文示例来自于百度前端学院的一个任务// 本文的dom结构<body> <div class="container"></div></body>// 共用css*{ margin: 0px; padding: 0px;}.container{ width: 400px; height: 200px; background: #ccc;原创 2016-03-20 13:36:47 · 1707 阅读 · 0 评论 -
圣杯布局&&双飞翼布局
圣杯布局：（Holy Grail Layout）指的是一种最常见的网站布局,起源于距离现在十年的2006年，双飞翼布局：是由淘宝UED部门提出的，与圣杯布局的原理相类似，那就是让左右边栏宽度固定，中间主要内容容器宽度自适应的布局方式,与圣杯布局的区别在于实现方式。 在学习两种布局之前我们首先需要对块状元素的流体特性有一个理解，什么是流体特性？ 流体特性：块级元素（如：div）会默认填满外部的容器原创 2016-01-31 22:51:26 · 946 阅读 · 0 评论 -
flex布局
flex布局（弹性布局），任何一个容器都可以指定flex布局，在webkit内核的浏览器下必须加上-webkit前缀。行内元素也可以使用flex布局.flex-contauner{ /*块级元素写法*/ display: flex; -webkit-display: flex; /*行内元素写法*/ display: inline-flex; -web原创 2016-01-30 15:33:06 · 536 阅读 · 0 评论 -
网页布局—StickyFooter
网页布局中经常会遇到这种问题，那就是我们的网页footer并不能呢一直停留在网页的底部。我们一般的惯用方法就是将网页的footer固定定位。但是如果我们将footer固定定位后，我们的网页内容多，一屏显示不出来时，我们的footer仍在窗口的底部，并且遮挡我们的内容，那么我们今天的这种布局方式，就是来解决这个问题的。 html代码：<div class="container"> 页面主体内原创 2016-02-08 22:48:14 · 883 阅读 · 0 评论 -
CSS的margin塌陷
今天在某论坛看到一个题目，觉得很有意思，下面我们就来看问题：<div class="box1"></div><div class="box2"></div><div class="box3"></div>.box1, .box2, .box3 { width: 200px; height:40px;}.box1, .box3{ margin: 20px;}.box2原创 2015-11-25 23:02:32 · 713 阅读 · 0 评论 -
css权重
css权重是一个很基础的问题，我们应该很清楚这个问题。 css权重可以按照俩种方式来区分， （一） 按照css的引入方式 内嵌样式>内部样式表>外联样式表 测试一下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css权重</title> <link rel="s原创 2015-11-15 22:43:35 · 989 阅读 · 0 评论 -
CSS3实现风车
最近在看实验室在做有关风页的事情，于是自己尝试着拿css3写了一个，这个版本的只支持谷歌浏览器和safari浏览器，原因是用到了css3的animation属性<!DOCTYPE html><html> <head> <meta charset="utf-8"></meta> <title>风车</title> <style type="te原创 2015-09-20 00:59:16 · 1378 阅读 · 0 评论 -
盒模型&&外边距塌陷
文档中每个元素都会被描述为一个矩形盒子，盒子有一个边界，分别为margin edge，border edge，padding-edge，content edge，与之对应的有4个区域： content area：真正包含元素内容的区域。位于content edge的内部，它的大小为内容宽度，高度或者为你指定的宽度或者高度。 padding area：高度为padding所规定，假若没有则为0，通原创 2016-02-29 16:37:25 · 2541 阅读 · 0 评论