好文分享

在具体场景中，我们可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小，因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body。 （推荐教程：css快速入门） 代码实现： html, body { height: 100%;} （视频教程推荐：css视频教程） 然后将…

常见的几种布局方式： （推荐教程：css快速入门） 固定布局 流式布局（自适应布局） 弹性布局（伸缩布局） 立即学习“前端免费学习笔记（深入）”； 定位布局 浮动布局 响应式布局（媒体查询） 固定布局的固定说的是盒子的宽高都是固定的。margin，padding等。 流式布局的流式是指的盒子的宽高和…

display属性值介绍： （推荐教程：css快速入门） none    此元素不会被显示。     block    此元素将显示为块级元素，此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素，元素前后没有换行符。     立即学习“前端免费学习笔记（深入）”； …

实现思路： （推荐教程：css快速入门） 两个并排的div，在第二个div内定义一个2倍宽高的名为item，对item进行设置border-radius: 50%，再对其进行绝对定位。 代码实现： Title .box { width: 50px; height: 50px; overflow: h…

居中div （推荐教程：css快速入门） 代码实现： border: 1px solid red;margin: 0 auto; height: 50px;width: 80px; 绝对定位的div居中 代码实现： border: 1px solid black;position: absolute…

重要知识点： （推荐教程：css快速入门） background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6; 样式： .back {background:url(images/coupon-logo.gif) no-repeat;} .top {…

一、定义区别 （推荐教程：css快速入门） 伪类 伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如 :visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，:…

首先我们要知道clear:both是清除浮动的关键。 （推荐教程：css快速入门） clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。 clear属性只能在块级元素上其作用，这就是清除浮动样式中display:block的…

一、可以利用flex来布局一个p在另一个p里面水平垂直居中 如：html代码：　 css代码： .container{width:600px;height:400px;border:1px solid blue;display: flex;justify-content:center;align-i…

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法，…