读书笔记

来源：互联网发布：2016linux运维面试题编辑：程序博客网时间：2024/05/21 06:54

一、盒模型

1、盒模型是CSS的基石之一，每个元素被看做是一个矩形框，这个框有元素的内容、内边距、边框和外边距组成。如果给元素添加背景，则背景处于元素以及其内边距组成的区域。

CSS2.1还支持outline属性，与border属性不停，轮廓绘制在元素框之上，所以它不影响元素的大小与定位。IE7以及更低版本不支持。

2、内边距、边框、外边距都是可选的，默认为0。但是很多元素由用户代理设置外边距和内边距，因此可以用通用选择器进行覆盖。

*{padding:0px;margin:0px}，但这种技术不区分元素，所以对option等元素有不利影响。因此使用全局reset把内边距、外边距显式的设为0更安全。

3、在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。但是在IE的早期版本，包括IE6，在混杂模式中，使用的是自己的非标准的盒模型。这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。

4、外边距叠加：当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。当一个元素包含在另一个元素中时（假如没有内边距或边框将外边距分隔开），它们的顶或底也会发生叠加。另外外边距还可以发生多次叠加。只有普通流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框和绝对定位框不会发生外边距叠加。

二、定位

1、p、h1或者div等被称为块级元素，即块框，与之相反，strong、span等元素称为行内元素，因为他们的内容显示在行中，即“行内框”。

可以通过使用display属性改变生成的框的类型，通过将display设置为block可以将行内元素，比如锚，表现的像块级元素一样。

2、CSS中有3种基本的定位机制：普通流、浮动流和绝对定位。除非专门指定，否则所有的框都在普通流中定位。

3、块级框由上到下一个一个的垂直排列，行内框在一行中水平排列。可以调整行内元素的水平距离，不能调整垂直的，所以在行内框上显式的设置高度和宽度也没有影响。由一行形成的水平框称为行框，行框的高度总等于足以容纳它包含的所有行内框的高度。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法就是修改行高或者水的平边框、内边距或者外边距。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。行高指的是文本行的基线间的距离。line-height用于文字排版方面是个很重要的概念。

4、在css2.1中，允许将元素的display属性设置为inline-block，这可以让元素像行内元素水平排列，又可以像块级元素一样设置水平、垂直的高度与编辑。但只有最新的浏览器支持。

三、相对定位

1、相对定位是指相对于它原本在普通文档流中的位置进行定位，对其他元素的位置没有影响。

2、在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他的框。这是一个很有用的特性，如果想让一个元素盖在其他元素的上面，可将该元素的position设置为relative而不移动。

四、绝对定位

1、相对定位实际上被看做普通文档流的一部分，因为元素的位置是相对于他在普通文档流中的位置的。与之相反，绝对定位是元素的位置与文档流无关。因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素来确定的，如果没有已定位的祖先元素，则相对于初始包含块。

五、固定定位

1、固定定位是绝对定位的一种，差异在于固定元素的包含框是视口。这使得我们能创建总是出现窗口中相同位置的浮动元素

六、浮动

1、浮动按照浮动的字面含义就很容易理解，第一体现在，浮动元素“浮在”非浮动元素的上面，从而不影响非浮动元素；第二体现在，元素在往某一方向浮动时，只有遇到某一卡主它的元素或容器时，才会停止浮动。

2、关于浮动元素跑到容器框外面的几种处理方法：

方法一、添加额外元素或者使用现有元素进行清理：

<!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" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/harmonise.css" type="text/css" /><link rel="stylesheet" href="../css/base-groups.css" type="text/css" /><!--[if IE]><link rel="stylesheet" type="text/css" href="../css/ie.css" /><![endif]--><title>Child Selector Example | Chapter 1 | CSS Mastery </title><style type="text/css"><!--.clear {  clear: both;}.news {  background-color:#eaeaea;  border: solid 1px #999;    width: 500px;}.news img {  float: left;    padding: 10px 0 10px 10px;}.news p {  float: right;    width: 350px;    margin: 0;    padding: 10px 10px 10px 0;}--></style></head><body><h1>Enclosing Float Example</h1><div class="news"><img src="img/atol.jpg" width="120" height="180" /><p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p></div><div class="clear"></div><div class="news"><img src="img/atol.jpg" width="120" height="180" /><p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p><div class="clear"></div></div></body></html>

方法二、使用overflow属性，应用值为auto或hidden的overflow属性有一个非常有用的副作用，它会自动清理它所包含的所有浮动元素。

方法三、使用:after伪类和内容声明，在指定元素的后面添加新的内容

.clear:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;}

七、总结

这部分是整个CSS中最基层的内容。在父元素中设为相对定位，然后让子元素相对于父元素进行绝对定位是一种经典的做法；而浮动与清理更是CSS布局最常用的方法。