【CSS学习总结3：CSS定位】的更多相关文章

HTML+CSS学习笔记 (7) - CSS样式基本知识

HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p…

HTML+CSS学习笔记 (12) - CSS布局模型

标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮…

DIV+CSS学习笔记（CSS）

css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签元素里面 css内的注释:/*注释内容*/ css样式表的语法 用颜色名表示 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,  olive, orange, purple, red, silver, teal, white,…

CSS学习笔记02 CSS选择器

1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选择器 标签选择器就是选择当前页面中相同名字的标签 /*设置所有p标签的文字颜色为红色*/ p { color: red; } 3.ID选择器 id选择器使用"#"进行标识,后面紧跟id名 /*设置id为title的标签的文字颜色为红色*/#title { color: red; } <…

CSS学习笔记01 CSS简介

1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈现.CSS 描述了在屏幕.纸质.音频等其它媒体上的元素应该如何被渲染的问题. 2.为何使用CSS 网页是由HTML标签组成的,那么这些标签会根据浏览器的默认方式进行排版与样式的渲染,如果想要更改这些默认的样式,推荐用CSS,因为这样不仅实现了内容与表现分离的问题,而且更易于维护. 3.CSS语法 C…

Head First Html and CSS学习笔记之CSS

第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/css" rel = "stylesheet" href = "lounge.css"> CSS包含一些简单的语句,称之为规则.典型的规则包括一个选择器,以及一个或者多个属性和值.选择器将制定规则将应用于哪些元素.记住,每个属性声明要以分号结束. 可以使…

CSS学习笔记11 CSS背景

background-color:背景色 前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color: gray;} 如果想要元素的背景色向外延伸,则只需增加内边距即可 background-color可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素. 注意:background-color 不能继承,其默认值是 transparent.transparent 有“透明…

CSS学习笔记--Div+Css布局实战(入门)

基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style type="text/css" > </style> <title></title> </head>…

HTML+CSS学习笔记 (13) - CSS代码缩写，占用更少的带宽

标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 1…

HTML+CSS学习笔记 (15) - css样式设置小技巧

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txt…

HTML+CSS学习笔记 (11) - CSS盒模型

元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>…

HTML+CSS学习笔记 (10) - CSS格式化排版

文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.) 现在一般网页喜欢设置"微软雅黑",如下代码: body{font-family:…

CSS学习笔记之CSS的继承、层叠和特殊性

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具…

【CSS学习笔记】CSS选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>第28课 CSS选择器&l…

CSS学习笔记04 CSS文字排版常用属性

字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少. 绝对单位可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger <!DOCTYPE html> <html lang="en"> <…

CSS学习笔记03 CSS层叠性、继承性、特殊性

层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为12像素,链入式定义<p>标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q…

css学习笔记 --初学 css代码风格、布局误区

初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main   主体   container 内容 footer    站底 right.center.left   位置 如文件名: base.css(css reset)  站点通用 theme.css  主题 2.一律小写,不要有下划线,中线 3.css 属性按照首字母顺序排列 4.css 属性组织模块化,添加适当注释 5.一致性,方便阅读和维护 二.初学者布局误区 网页设计不只是”DIV+C…

CSS学习系列2 -- CSS中的清除浮动

CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ background-color: gray; border: solid 1px black; } .myDiv img { float: left; } .myDiv p { float: right; } <div class="myDiv"> <img src=&qu…

CSS学习系列1 - CSS中的盒子模型 box model

css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括以及具体包括啥内容 我们先来看一个图 Content Edge => 是元素所在的内容区域,它有一个宽度和高度 Padding Edge => 内边距 Border Edge => 边框 Margin Edge => 外边距 所以,在css中,我们设置一个元素的width 和 heig…

【css学习整理】css基础(样式,语法,选择器)

CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置, 每一对属性之间用分号,属性与值之间用冒号 css注释: /* 注释内容 */ 不管是单行还是多行,都只有这一种方法 CSS基本选择器? style属性,行内样式,直接写在标签里,  style="font-size:20px; color: blue;" 标签选择器: 直接针对HTML…

CSS学习笔记--Div+Css布局（div+span以及盒模型）

1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为"文本模式",即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行.而当加入了css控制以后,块元素和内联元素的这…

【CSS学习笔记】CSS初始化

腾讯QQ官网(http://www.qq.com)样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{colo…

CSS：CSS学习总结

CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性和继承性,为了最小化代码量,规则的声明可以按照如下顺序: 常用标记 常用类 布局类 导航类 表格类 表单类 组件类 2.盒子模型.文档流.定位和浮动一定要清楚 盒子模型:浏览器把每种标记都当做一个盒子,有两种盒子(内联和框),他们在文档流中的布局模式是不同的. 文档流:框盒子会被从上到下的布局,内联…

47.前端css学习、登陆页面的制作

CSS: 有了CSS,html中大部分表现样式的标签就可以不用了 html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁 CSS的引入方式: 内联式引入:直接赋予标签style属性进行样式编写 <h style="color:red">你好</h> 嵌入式:直接在文档页面通过style标签创建嵌入的样式表 <!DOCTYPE html> <html> <head> <title>CSS学习…

CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇文章来总结一点心得体会…

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat…

CSS学习摘要-定位实例

CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用,比如策略战争游戏,比如从移动版的网页,屏幕狭小.空间有限:比如你可能想要放置许多信息的紧凑消息框,不用就会充满整个UI.我们简单的例子完成后就会像下面这样: 注意: 你能看完整的示例,可运行在 info-box.html (source code).检出它以理解你在本文章里要建立什么. 你可能会想:…

CSS学习摘要-定位

CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位(position)的各种不同值,以及如何使用它们. 文档流 定位是一个相当复杂的话题,所以我们深入了解代码之前,让我们审视一下布局理论,并让我们了解它的工作原理. 首先,环绕元素内容添加任何内边距.边界和外边距来布置单个元素盒子--这就是 盒模型 ,我们前面看过. 默认情况下,块级元素的内容宽度是…

Html CSS学习（五）position定位 原

Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixe:对象脱离正常文档流…

Selenium2学习（六）-- 定位神器CSS

前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到.两篇对比学习,更容易理解. 一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" c…