CSS设计指南 笔记3

CSS设计指南 笔记3

3 定位元素

盒模型：浏览器为页面中的每个HTML元素生成的矩形盒子，都要按照可见版式模型（visual formatting model）在页面上排布

可见页面版式的三个属性控制：position、display、float

• position：控制页面上元素间的位置关系
• display：控制元素是堆叠、并排，还是不在页面上出现
• float：提供控制的方式，以便把元素组成成多栏布局

3.1 理解盒模型

元素盒子的属性

• 边框（border）：设置边框的宽窄、样式、颜色

  {border: 2px dashed red;} /* 全部3个属性，4条边 */
  {border-style: dashed;} /* 1个属性，4条边 */
  {border-left-style: dashed;} /* 1个属性，1条边 */
  

• 内边距（padding）：设置盒子内容区与边框的间距

• 外边距（margin）：设置盒子与相邻元素的间距

  {margin-top: 5px; margin-right: 10px; margin-bottom: 12px; margin-left: 8px;}
  {margin: 5px 10px 12px 8px;}
  {margin: 12px 10px 6px;}
  {margin: 12px 10px;}
  {margin: 12px;}
  

3.1.1 盒子边框

边框（border）由有个相关属性

• 宽度（border-width）
  • 可以使用thin、medium和thick等文本值
  • 可以使用除百分比和负值外的任何绝对值
• 样式（border-style）
  • none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等文本值
• 颜色（border-color）
  • 可以使用任何颜色值

3.1.2 盒子内边距

内边距是盒子内容区与盒子边框之间的距离

内边距设计计加在了声明的盒子宽度之上

3.1.3 盒子外边距

3.1.4 叠加外边框

垂直方向上的外边距会叠加（较宽的外边距决定两个元素最终离多远）

水平外边距不叠加（元素的水平间距是相邻外边距之和）

3.1.5 外边距的单位

3.2 盒子有多大

• 没有宽度的盒子
  • width默认值是auto，让块级元素的宽度扩展到与父元素同宽
  • 没有设置width的元素始终会扩展到填满其父元素的宽度为止
  • 添加border、padding、margin会导致内容宽度减少
• 有宽度的盒子
  • width设定的只是盒子内容区的宽度
  • 添加border、padding、margin会导致盒子扩展得更宽

CSS3新增了box-sizing属性，可以将有宽度的盒子设定成具有默认的auto状态下的行为

3.3 浮动与清除

float，clear

浮动

• 把元素从常规文档流中拿出来
• 让原来上下堆叠的块级元素变成左右排列，从而实现布局中的分栏
• 浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐

3.3.1 浮动

• 文本绕排图片

  • 在标记中先写图片，再写环绕它的文本

    <img ... />
    <p>
         ... the paragraph text ...
    p>
    

    p {
        margin: 0;
        border: 1px solid red;
    }
    img {
        float: left;
        margin: 0 4px 4px 0;
    }
    

  • 浮动非图片元素时，必须给它设定宽度

• 创建分栏

  p {
      float: left;
      margin: 0;
      width: 200px;
      border: 1px solid red;
  }
  img {
      float: left;
      margin: 0 4px 4px 0;
  }
  

3.3.2 围住浮动元素的三种方式

浮动元素脱离了文档流，其父元素也就不会包围它

• 为父元素添加overflow: hidden

  • 强制父元素包围浮动元素
  • 防止包含元素被超大内容撑大：包含元素仍保持其设定的宽度，而超大的子内容则会被容器剪切掉
  • 不能在下拉菜单的顶级元素上应用

• 同时浮动父元素

  • 不能对已经靠自动外边距居中的元素使用

• 添加非浮动的清除元素

  • 给父元素的最后添加一个非浮动的子元素，然后清除该子元素

  • 由于包含元素一定会包围非浮动的子元素，且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素

    • 第一种：在HTML标记中添加一个子元素并应用clear属性

    • 第二种：用CSS添加清除元素

      .clearfix:after {
          /* 必须需要有内容 */
          content: ".";
          
          /* 确保这个伪元素没有高度且在页面上不可见 */
          display: block;
          height: 0;
          visibility: hidden;
          clear: both;
      }
      

• 没有父元素时：clear: both

3.4 定位

position属性：可以相对于在常规文档流中的位置重新定位

static（默认）、relative、absolute、fixed

3.4.1 静态定位

在静态定位的情况下，每个元素处在常规文档流中

3.4.2 相对定位

相对的是它在原来文档流中的位置，可以使用top、right、bottom、left属性来改变位置

这个元素原来占据的空间没有动，其他元素也没动

要考虑到元素原来的空间

3.4.3 绝对定位

会把元素彻底从文档流中拿出来，相对于定位上下文定位

3.4.4 固定定位

完全移除文档流，定位上下文是视口（屏幕），不会随页面滚动而移动

3.4.5 定位上下文

绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要position为relative

3.5 显示属性

display属性：block，inline，none

• 块级元素：在浏览器中上下堆叠显示
• 行内元素：在浏览器中左右并排显示，只有前一行没有空间时才会显示到下一行

display: none

• 该元素及所有包含在其中的元素都不会在页面中显示
• 原先占据的空间也会“收回”
  • visibility:hidden
    • 元素会隐藏，但占据的页面空间还在

3.6 背景

背景支持为元素添加背景颜色和背景图片

元素的前景层包含内容和边框

元素的背景层可以用实色填充（background-color），也可以包含任意多个背景图片（background-image），背景图片叠加在背景颜色之上

3.6.1 CSS背景属性

• background-color
• background-image
• background-repeat
• background-position
• background-size
• background-attachment
• background（简写属性）
• background-clip、background-origin、background-break

3.6.2 背景颜色

background-color

设定元素的颜色，然后元素就会以此填充背景图层

3.6.3 背景图片

background-image

比元素小的背景图片会以元素左上角为起点，在水平和垂直方向上重复出现，直至填满整个背景空间

改变起点位置：background-position

改变水平和垂直重复效果：background-repeat

3.6.4 背景重复

background-repeat

• repeat（默认）：在水平和垂直方向上重复出现，直至填满整个背景空间

• repeat-x：只在水平方向重复

• repeat-y：只在垂直方向重复

• no-repeat：不重复

• round：为确保图片不被剪切，通过调整图片大小来适应背景区域

• space：为确保图片不被剪切，通过在图片间添加空白来适应背景区域

3.6.5 背景位置

• 关键字
  • top、left、bottom、right、center
  • 任意两个关键字组合起来都可以作为该属性的值（顺序不重要）
• 数值
  • 百分比
  • 绝对或相对单位的数值
  • 第一个值表示水平位置
  • 第二个值表示垂直位置，不设置时默认为center
  • 可以使用负值

background-position同时设定元素和图片的原点

• 原点决定了元素和图片中某一点的水平和垂直坐标
• 默认情况下，原点位于左上角（ 元素的左上角和图片的左上角对其，然后图片向各个方向重复都是以左上角为起点）

3.6.6 背景尺寸

background-size：控制背景图片的尺寸

• 50%：缩放图片，使其填充背景区的一半
• 100px 50px：100像素宽，50像素高
• cover：拉大图片，使其完全填满背景区，保持宽高比
• contain：缩放图片，使其恰好适合背景区，保持宽高比

3.6.7 背景粘附

background-attachment：控制滚动元素内的背景图片是否随元素滚动而移动

• scroll（默认）：背景图片随元素移动
• fixed：背景图片不随元素移动

3.6.8 简写背景属性

body {
    /* image, position, color, repeat, size, attachment */
    background: url("images/img.png") center #fff no-repeat contain fixed;
}

少写了哪个属性就会使用相应属性的默认值

3.6.9 其他CSS3背景属性

• background-clip：控制背景绘制区域的范围
  • 默认：背景绘制区域扩展到边框和外边界
• background-origin：控制背景定位区域的原点
• background-break：控制分离元素的显示效果
  • 比如，跨越多行的行内盒子

3.6.10 多背景图片

background: 
	url("images/img1.png") 30px -10px no-repeat,
	url("images/img2.png") 145px 0px no-repeat,
	url("images/img3.png") 140px -3 0px no-repeat,
	#ffbd75;

先列出的图片显示在上方，更接近前景

3.6.11 背景渐变

渐变：在一定长度内由两种或多种颜色之间自然的过渡

• 线性渐变
  • 从元素的一端延伸到另一端
  • 默认从上到下
• 放射性渐变
  • 从元素内一点向四周发散

渐变点

渐变方向上的点，可以在这些点上设定颜色和不透明度

可以添加任意多个渐变点

渐变点的位置一般用整个渐变宽度的百分比来表示

为同一个渐变点设定两种颜色可以得到突变效果

开始和结束位置如果没有声明则默认为0%和100%

如果没有声明，颜色会均匀分布于整个渐变

放射性渐变

可以使用参数指定形状、位置、尺寸、颜色、不透明度

渐变形状

• 默认：渐变效果会填充元素
  • 如果元素是正方形，则渐变就是圆形
• circle：圆形渐变，剩下区域填充终点颜色