"这篇读书笔记主要探讨了如何在CSS中实现元素容器居右的方法,并介绍了CSS样式表的基础知识,包括代码植入位置、选择器语法、简写规则等。笔记作者在2011年10月20日阅读《Css那些事》后记录下这些要点。"
在CSS中,将一个容器元素居右有多种方法,其中最常见的两种是通过浮动和定位。首先,我们可以使用浮动方式,设置元素的`float`属性为`right`,例如:
```css
.peotry-box {
float: right;
}
```
这种方法会使元素向右浮动,直到其右侧触碰到父元素的右侧边界。需要注意的是,这会影响到其他后续元素的布局。
另一种方法是利用定位,具体可以设置元素的`position`属性为`absolute`,并将其`right`属性设置为0,例如:
```css
.peotry-box {
position: absolute;
right: 0px;
}
```
这种情况下,元素会被相对于其最近的非静态定位祖先元素绝对定位,使其右侧贴紧父级容器的右侧边缘。
接着,我们来看看CSS样式表的基础知识。CSS代码可以插入到HTML文档的`<head>`标签内的`<style>`标签中,或者外部链接到单独的`.css`文件。CSS的结构由选择器和声明组成,选择器指定要应用样式的元素,声明则包含属性和对应的值,如:
```css
.selector {
property: value;
}
```
CSS还允许一些简写规则,例如颜色可以简写为三字符形式,如`#RGB`代表`#RRGGBB`,但必须是成对出现。当数值为0时,单位可以省略,如`width: 0;`。对于内外补丁(padding, margin)、边框(border)和背景(background)的属性,都有相应的简写方式,可以一次性设置所有边或不同方向的值,以提高代码效率和简洁性。
例如,一个元素的边框简写可以这样表示:
```css
div {
border: 1px solid #FF0000;
}
```
这相当于分别设置了边框宽度、样式和颜色。背景属性的简写则可以组合背景颜色、图片、重复方式等:
```css
body {
background-color: #FF0000;
background-image: url(background.gif);
background-repeat: no-repeat;
}
```
这些简写方式让CSS代码更易读且节省空间。
总结来说,这篇笔记涵盖了容器元素居右的两种方法以及CSS基础,包括代码位置、选择器语法和各种简写规则,帮助读者深入理解CSS布局和样式设计。