前言大家在网上最常见的一种方案就是在父元素中relative，然后子元素absolute。这种方案当然好，不过带来的一个缺点就是会改变元素的层级关系，如果在多个地方使用，这样的层叠嵌套的关系会十分混乱。本文先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。1.无依赖的absolute定位在网络上，对absolute存在这样一个误解，认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能认为是错的，只能说对...
练习一：1、类选择器使用练习：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>类选择器使用示例</title><style type="text/css">.red{color:red; font-size:12px; }.blue{color:blue;font-size:20px;}</style></...
本章内容：知识点一：盒子模型：Box Model，由有内容（element content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片，以图来看看盒子模型的四个组成部分说明：图中元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框...
font</a>: 14px/26.6px Microsoft Yahei, Trebuchet MS, Georgia, Times New Roman, Times, sans-ser<a href=">css有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。代码如下：html {filter: grayscale(100%);//IE浏览器-webkit-...
本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使用after或before伪对象清除浮动。下面跟着小编一起来看下吧1、设置父元素高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.弊...
flex语法采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占...
前言SASS是一种CSS预处理器（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。SASS提供四个编译风格的选项：nested：嵌套缩进的css代码，它是默认值。expanded：没有缩进的、扩展的css代码。compact：简洁格式的css代码。compressed：压缩后的css代码。导入文件@import命令，用来导入外部文件。 @import "path/filename.scss";如果导入的是.css文件，则等同于css的im...
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：准备工作1：设置Meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许...
抛弃那些没用的方法，只记住最实用的一种方法即可！给要清除浮动的父元素多加一个class属性：clearfix！！！样式如下：.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }为了兼容ie6,ie7（现在的项目几乎已经完全不考虑）.clearfix{zoom:1}清除浮动就是这么简单，可以作为公共样式common.css，每个页面都可以直接调用！简单的...
文本超出部分隐藏，总结两种方法。1、单行隐藏html代码<p class="mi">当文字超过范围的时候，超出部分会隐藏起来。</p>css代码.mi {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap; }结果当文字超过范围的时候，超出部分会隐藏起来。2、多行隐藏html代码<p class="mi">当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。</p>css代码.mi {width: 200px;overflow: hidden;display: -w...
这篇文章介绍css常用文本属性中的text-align总结说明前面提到text-indent属性，用来实现文本的缩进，今天的text-align使用率可比文本缩进高的多。拿自己现在做的项目上来说，水平居中和垂直居中估计是用到最多了，那我们就先看看它的语法吧！text-align允许值 left| center | right | justify |初始值 与用户代理有关可否继承 是适用于 块级元素text-align是另一个只适应于块级元素的属性，如果你想居中某行中的一个链接或者图片，...
下面小编就为大家分享DIV+CSS 清除浮动常用方法总结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧p+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。 p+CSS 浮动效果是指，父元素在未定义高的情况下，由于子元素全部浮动脱离文本流，而造成...
本篇文章主要是对jsp页面中插入css样式的三种方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助1、 外部样式当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：<head><link rel="stylesheet" type="text/css" href="path/myCss.css"/></head> 2、内部样式当...
这篇文章讲述css中position定位的四种方法总结1. positon:static; 静态定位（默认的 ） 所有标准文档流中的元素都是静态定位2. positon:relative; 相对定位 不脱离标准文档流，“老家留坑，形影分离” 特点：如果设置了相对定位并且设置了top、left、right、bottom属性，那么将来盒子会以盒子原来所在的位置进行偏移 相对定位的用途：一般不用于做“压盖效果”，就两个作用： （1）微调元素 （2）绝对定位的参...
CSS居中遇到的问题总结水平居中【行内元素】适用inline,inline-block,inline-table,inline-flex元素.center {text-align: center; }【块级元素】适用于block level元素①一个块级元素 .center {margin: 0 auto;}②多个块级元素方法一：将块级元素变为行内块级元素html部分： <main class="inline-block-center"><p>1</p><p>2</p><p>3</p> </main> css部分： .inline-block-center {text-align: center; } .inline-block-center p...