绝对定位 | 易学教程

CSS样式属性

阅读更多关于 CSS样式属性

CSS样式属性一、宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。二、字体属性 2.1文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 2.2字体大小 p { font-size: 14px; } 如果设置成inherit表示继承父元素的字体大小值。 2.2 字重（粗细） font-weight用来设置字体的字重（粗细）。值描述 normal 标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值,默认值， 2.3文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1

前端之CSS基础及使用方法

阅读更多关于前端之CSS基础及使用方法

CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。--摘自哪吒语录 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: red; } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red; }

CSS

阅读更多关于 CSS

CSS语法 CSS样式由两个部分组成:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这个是注释*/ CSS的几种引入方式 1. 行内样式行内式是在标记的style属性中设定CSS样式,不推荐大规模使用. <p style="color:red">你好!</p> 2.内部样式内部样式,也就是嵌入式是将CSS样式集中写在网页的标签中标签中. <head> <meta charset="UTF-8"> <title>标题</title> <style> p { background-color: #2b99ff; } </style> </head> 3.外部样式外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用 <link href="样式名.css" rel="stylesheet" type="text/css/"/> # 引入语句 CSS选择器基本选择器 /*元素选择器*/ p {color:red;} /*ID选择器*/ #id {background-color:red;} /*类选择器*/ .class {font-size: 15px;} /*通用选择器*/ * {color:red;} @注意: 样式类名不要用数字开头(有的浏览器不认识). 标签中的class属性如果有多个,要用空格分隔. 组合选择器

前端之CSS

阅读更多关于前端之CSS

文本属性 ## 文字对齐 #text-align属性规定元素中文本的水平对齐方式 left: 左边对齐默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐 ## 文字装饰 #text-decoration属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 穿过文本的一条线 inherit: 继承父元素的text-decoration属性的值背景属性 #背景颜色 background-color: red; #背景图片 background-image: usl('1.jpg'); #背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 在垂直方向上平铺 no-repeat: 背景图片不平铺 background-repeat: no-repeat/left top; #背景位置 # 支持简写 background: #336699 url('1.png') no-repeat left top; 边框 #边框属性 border-width border-style border-color #边框样式 none: 无边框 dotted: 点状虚线边框

前端知道之css

阅读更多关于前端知道之css

css的几种引入方式行内样式行内式是在标记的style属性中设定css样式，不推荐大规模使用 <p style='color:red'>hello world</p> 内部样式嵌入式将css样式集中写在网页的<head></head>标签对中 <head> <meta charset='utf-8'> <title>title</title> <style> p{ background-color:white;} } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可 <link href="mystyle.css" rel="stylesheet"type="text/css"> css选择器基本选择器元素选择器：p{color：“red”;} id选择器：#i1{background-color:red;} class选择器：.c1{font-size:14px} p.c1{ color:red; } 注意：样式类名不要用数字开头（有的浏览器不认）标签中的class属性如果有多个，要用空格分隔通用选择器 *{color:while;} 组合选择器后代选择器：li a{color:green;} #li内部的a标签设置字体颜色 #选择所有父集是<div>元素的<p>元素儿子选择器：div>p

前端——CSS绝对定位、相对定位和文档流

阅读更多关于前端——CSS绝对定位、相对定位和文档流

前言 http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html 接触html、和css时间也不短了，但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。文档流的概念确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）。不独占一行如块级元素(block) <div>div1</div> <div>div2</div> 效果如下 ok，那么怎么知道这不是因为没有设置高和宽的样式而出现的情况呢，我们听邓爷爷的话，实践是检验真理的唯一标准 <div style=" width:100px; height:100px;">div1</div> <div style=" width:100px; height:100px;">div2</div> 效果如下：额，没坑你吧... 又如内联元素(inline) <img src="Image/close.gif" alt="图片" style=" height:100px; width:100px;"/> <a href=

CSS定位与布局

阅读更多关于 CSS定位与布局

我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中，我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用，以达到预期效果。一　　文档流　　文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。　　CSS文档流大致可以分为3种：标准流，浮动流，定位流。　　 1，标准流　　默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。　　 2，浮动流　　浮动流只有一种排版方式, 就是水平排版。它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，将脱离标准流，之后它将无视元素的display属性，并且都被当做块级元素处理。 1 div{ 2 float:left;/*规定元素向左浮动*/ 3 /*float:right;规定元素向右浮动*/ 4 } 　　请注意，浮动float属性没有center取值

CSS-盒模型

阅读更多关于 CSS-盒模型

在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。而我们在测试效果图看到的350*450盒子， 350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2 450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2 css的两种盒模型而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。 W3C的标准盒模型在标准的盒子模型中，width指content部分的宽度 IE的盒模型在IE盒子模型中，width表示content+padding+border这三个部分的宽度我们可以看出我们上面的使用的默认正是W3C标准盒模型

css样式

阅读更多关于 css样式

css样式文字与文字样式:单位与颜色、text、font p{ font-size:12px; color:blue; font-weight:bold;} css样式常用单位： px; 像素 em：1em一个字符行高（自动适应用户所使用的字体） %：百分比 1.颜色 red,blue,green 颜色名： http://www.w3school.com.cn/cssref/css colors legal.asp rgb(x,x,x) RGB值每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66) rgb(x%,x%,x%) RGB百分比值 0%-100% 红色：rgb(100%,0%,0%) rgba(x,x,x,x) RGB值，透明度 a值：0.0（完全透明）与1.0（完全不透明）红色半透明：rgba（255,0,0,0.5） #rrggbb 十六进制数红色:#ff0000 红色：#f00 去掉重复位 2.文本 color 文本颜色 red #f00 rgb(255,0,0) letter-spacing 字符间距 2px -3px line-height 行高 14px 1.5em 120% text-align 对齐 center left right justify text-decoration 装饰线 none

CSS高度塌陷问题解决方案

阅读更多关于 CSS高度塌陷问题解决方案

高度塌陷的存在：原因分析 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px; background-color: blue; /* * 在文档流中，父元素的高度默认是被子元素撑开的， * 也就是子元素多高，父元素就多高。 * 但是当为子元素设置浮动以后，子元素会完全脱离文档流， * 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 * 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 * * 所以在开发中一定要避免出现高度塌陷的问题, * 我们可以将父元素的高度写死，以避免塌陷的问题出现， * 但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。 */ /*为子元素设置向左浮动*/ float: left; } .box3{ height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">

订阅绝对定位