css样式 | 易学教程

css实现图片的上下、左右居中的两种方法

阅读更多关于 css实现图片的上下、左右居中的两种方法

实现图片的上下、左右居中的两种方法方法一：利用 vertical-align 属性实现图片上下居中先设置父元素样式 text-align : center，实现图片左右居中，给图片添加一个同级的span标签，设置宽度为零，高度100%，两者都设置 display : inline-block; vertical-align : middle，即可实现图片上下居中，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 图片上下左右居中 </title> <style> .box{ width : 400px; height : 300px; border : 1px #000 solid; margin : 40px auto; text-align : center; } .box img{ display : inline-block; vertical-align : middle; } .box span{ width : 0; height : 100%; display : inline-block; vertical

前端 css

阅读更多关于前端 css

css样式样式的引入 <head> <meta charset="UTF-8"> <title>Title</title>             </head> <body>   <body> 基本选择器元素选择器: div{ #标签名字 color:red; } id选择器:id值不能重复 <div id="xuefei"> 雪飞大美女 </div> #xuefei{ color:green; } 类选择器: 类值可以重复 <div id="dazhuang" class="c1">

2015年7月8日 CSS第一课

阅读更多关于 2015年7月8日 CSS第一课

一、css样式部分　　1、css样式的三种常用写法：　　　　第一种行内样式：直接在标签里，如：<p style="color:red"></p> 　　　　第二种内嵌式：在关部标签head里面，加入<style> p{ color:red;} </style> 　　　　第三种链接式：在外部新建css文件写入样式，在html文件中引入：　　　　　　<link rel="stylesheet" type="text/css" href="相对路径.css"> 第四种导入样式：它的缺点是页面加载完成后才导入（不常用） <style> @import url("相对路径"）注：以上四种样式的优先级为：行内样式>内嵌式>链接式二、CSS选择器： 1、标签选择器：p{color:red;} 2、类别选择器：.c1{color:green;} 3、 ID 选择器：#d1{color:yellow;} 三种选择器的优先级： ID选择器>class类别选择器>标签选择器。三种选择器的区别：标签选择器整个页面都将使用该种样式，CLASS选择器多个标记可共同使用该样式，ID选择器在一个页面中不可重复样式是独有的。 css的注释：/*这里写上注释说明*/ 四、css的继承性： css具有继承性，但只有字体相关的属性，才会被里面的标签继承。 #d1 p

那些年我们一起清除过的浮动

阅读更多关于那些年我们一起清除过的浮动

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。两者的区别请看优雅的 Dem o 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。二、为何要闭合浮动？要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位（其中

那些年我们一起清除过的浮动

阅读更多关于那些年我们一起清除过的浮动

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。二、为何要清除浮动？要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位（其中"position:fixed" 是

css布局模型

阅读更多关于 css布局模型

---恢复内容开始--- 在清楚了CSS盒模型的基本概念，盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本，最核心的概念。但布局模型是建立在盒型基础之上，又不同于我们常说的CSS布局样式或CSS布模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer、Float。在网页中，元素有三种布局模型： 1，流动模型（Flow） 2，浮动模型（Float） 3，层模型（Layer）一、流动模型流动是默认的网页布局模式。也就是说见面在默认状态下的HTML网页元素都是根据流动模型分布网页内容的。流动布局模型具有2个比较典型的特征： 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。 2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示. 二、浮动模型在流动模型中，块状元素是自上而下的，那么有什么方法可以让块状元素并排呢，这就需要使用CSS样式。如下代码： <html> <head><style> div{ width:200px; height:200px; border:1px red solid; float:left; }</style> </head> <body> <div><p>123</p></div> </body>

css样式基础三

阅读更多关于 css样式基础三

css的定位：其中css中被分为块级元素与行内元素。如块级元素div、hx标签、p元素。行内元素span和strong W3school给出的一切皆为框的定义。而且可以使用display属性，强行将行内元素变为块级元素。如display：block。 CSS的定位机制：主要分为三类：普通流、浮动、和绝对定位。 position属性 static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。定位属性： position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

CSS样式字体初解

阅读更多关于 CSS样式字体初解

学会正确使用css属性，掌握网页文本的多样化样式。属性: 字体大小【font-size】含义：字符框的高度。加粗字体【font-weight】将【font-weight】设置为【bold】，以加粗文字，该属性可继承。倾斜字体【font-style】将【font-style】设置为【italic】，以倾斜文字，该属性可继承。字间距【letter-spacing】设置【letter-spacing】的值为px或em，可控制文字间的间隙，该属性可继承。首行缩进【text-indent】设置值为em 可实现第一个文字向后缩进。给文字划线【text-decoration】设置【underline】属性，可以给文字添加下划线。例： css样式： html：其效果如下：来源： https://www.cnblogs.com/an2333/p/11524961.html

css媒体查询

阅读更多关于 css媒体查询

1、什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 2、为什么响应式设计需要，媒体查询如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式 3、如何在CSS文件中引入媒体查询媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式 4、怎样使用media 一、首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果 <meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> ps: width=device-width:宽度等于当前设备的宽度 initial-scale=1：初始的缩放比例（默认为1） maximum-scale=1：允许用户缩放到得最大比例（默认为1） user-scalable=no：用户不能手动缩放二、

CSS媒体查询及其使用

阅读更多关于 CSS媒体查询及其使用

订阅 css样式