Css

这是《CSS设计指南》的读书笔记，用于加深学习效果。 前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 定位（position） CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。 position 属性有4个值：static、relative、absoulte、fixed，默认值为 static。 接下来我会用以下四个段落来逐个说明这些属性是什么意思。 <p id="first">First Paragraph</p> <p id="Second">Second Paragraph</p> <p id="specialpara">Third Paragraph</p> <p id="fourth">First Paragraph</p> 静态定位（static） 我们先看一下四个段落都采用静态定位的效果。 静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。 相对定位（relative） 现在我把第三段的 position 属性设置为 relative。 p#specialpara { position: relative; top: 25px; left: 30px; } 因为相对定位相对的是它原来在文档流中的位置（默认位置），所以如果只设置 position 样式不会有任何变化。这里我同时设置了 top 和 left 属性来改变它的位置。 现在它的效果如图所示： 现在，第三段从原来的元素（body）中挣脱了出来，与它在文档中的默认位置相比向下移动了25像素，向右移动了30像素。 需要注意的是，除了这个元素自己相对于原始位置挪动了一下以外，页面没有任何改变。这个元素原来占据的空间没有动，其他元素也没动。 这时，如果不想第四段被它挡住，可以给第四段设置一个 margin-top 值。 绝对定位（absoulte） 绝对定位跟静态定位和相对定位相比，它会把元素彻底从文档流中拿出来。 我们把 position 改为绝对定位看一下： p#specialpara { position: absoulte; top: 25px; left: 30px; } 效果如图： 可以看到，第三段原来的位置被回收了。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素 body 在定位。 现在就涉及到一个概念：定位上下文，这个后边说，先继续看最后一种定位方式：固定定位。 盒子位移属性是如何工作？ 盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。 对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。 ...

这是CSS设计指南的读书笔记，用于加深学习效果。 上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 HUGOMORE42 可见的页面版式主要由三个属性控制：position、display和float。 position：控制页面上元素的位置关系 display：控制元素是堆叠、并排还是不在页面出现 float：提供控制的方式，以便吧元素组成多栏布局 元素盒子的属性可以分成三组： 边框(board)。可以甚至边框的宽窄、样式和颜色 内边距(padding)。可以甚至盒子内容区与边框的间距 外边距(margin)。可以设置盒子与相邻元素的间距 元素盒子还有一个背景层，可以改变颜色，也可以添加图片。 简写样式 CSS为边框、内边距和外边距分别规定了简写属性，每个简写声明中，属性值得顺序都是上、右、下、左。 比如： { margin-top: 5px; margin-right: 10px; margin-bottom: 12px; margin-left: 8px; } 使用简写则为这样： { margin: 12px 10px 12px 8px; } 如果有一个值没写，那么则使用对边的值。 比如： {margin: 12px 10px 12px;} /*等同于*/ { margin: 12px 10px 12px 10px; } 如果只写一个值，则4个边都取这个值。 {margin: 12px;} /*等同于*/ {margin: 12px 12px 12px 12px;} 另外每个盒子的属性也分三个粒度，这三个粒度从一般到特殊分别举例如下： { border: 2px dashed red; } 混合使用三种粒度的简写属性达成设计目标是很常见的。比如，想为盒子的上边和下边添加4像素的红色边框，为左边添加1像素宽的红色边框，而右边没有。可以这么写： {border: 4px solid red;} /* 先给4条边设置相同的样式*/ {border-left-width: 1px;} /* 修改左边框宽度*/ {border-fight: none;} /*移出右边框*/ 盒子边框 border 有三个相关属性。 宽度（border-width)。可以使用thin、medium和thick等文本值，也可以使用除百分比和负值之外的任何绝对值。 样式（border-style)。有none、hidden、dotted、dashed等文本值。 颜色（border-color）。可以使用任意颜色值，包括RGB、HSL、十六进制颜色值和颜色关键字。 盒子内边距 内边距是盒子内容区与盒子边框之间的距离。 上图的样式为： p { font: 16px helvetica, sans-serif; width: 220px; border: 2px solid red; background-color: #caebff; } 可以看到在没有设定内边距的情况下，内容紧挨着边框。 设定边框后： ...

这是CSS设计指南的读书笔记，用于加深学习效果。 最近想做一个小程序，前端是必修课，那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性，可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候，css就要靠层叠机智来决定最终应用哪种样式。 HUGOMORE42 css规则 规则实际上是一条完整的css指令，规则声明了要修改的元素和要应用给改元素的样式。 为文档添加样式的三种方法： 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式） 写在<style> 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖） 写在单独css样式表中（也叫链接样式，样式表是一个扩展名为.css 的文件，可以在任意多个HTML页面链接同一个样式表文件。链接样式的作用范围是整个网站） 除了这三种为页面添加样式的方法，还有一种在样式表中链接其他样式表的方法，使用@import 指令：例如 @import url(css/styles.css) @import 指令必须出现在样式表中其他样式之前，否则@吹灭；@import引用的样式表不会被加载。 对这个基本的结构有三种方法可以进行扩展 **第一种方法：**多个声明包含在一条规则里。 p {color: red; font-size: 12px; font-weight: bold;} **第二种方法：**多个选择器组合在一起。例如：如果想让<h1>、<h2>和<h3>的文本都变成蓝色粗体可以这么写： h1 {color: blue; font-weight: bold;} h2 {color: blue; font-weight: bold;} h3 {color: blue; font-weight: bold;} 也可以这么写： h1, h2, h3 {color: blue; font-weight: bold;} 分组选择符以逗号作为分隔符 第三种方法： 多条规则应用给一个选择符。 例如，写完上边的规则，还想把h3变成斜体，那么可以再为h3单独写一条规则： h1, h2, h3 {color: blue; font-weight: bold;} h3 {font-style: italic;} 选择特定元素的选择符 用于选择特定元素的操作符有三种 上下文选择符。基于祖先或者同胞元素选择一个元素。 ID和类选择符。基于id和class属性的值选择元素。 属性选择符。基于属性的有无和特征选择元素。 上下文选择符 比如我们想给article中的段落设置不同的字号，可以使用上下文选择符来解决。 上下文选择符的格式如下： 标签1 标签2 {声明} 其中标签2 是我们要选择的目标，而且只有在 标签1是其祖先元素的情况下才会被选中。 上下文选择符，叫后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为特定祖先元素后代的标签。 article p {font-weight: bold;} 上边例子中，只有article后代的p元素才会应用后边的样式。 上下文选择符以空格作为分隔符 特殊的上下文选择符 子选择符 > 格式如下： 标签1 > 标签2 标签1 必须是 标签2 的父元素，不能是其它的祖先元素。 ...