search

zilongxuan001 / LearnFreecode

0 stars 0 forks source link

Chapter9: 盒模型 #339

Closed zilongxuan001 closed 6 years ago

zilongxuan001 commented 6 years ago

行高和背景图片

什么是文本行高？有哪三种方法设置文本的行高？ 如何通过CSS添加背景图片？如何设置背景图片位置？如何设置背景图片重复情况？

行高

文本的行高，就是行与行的垂直距离。

行高语法形式：line-height: 值;

设置行高的方法：百分比，倍数和像素值。

其中，百分比和倍数都是相对父元素的倍数来说的。

如果line-height直接设置为1， 即line-height: 1; 则元素的行高会设置为自己字体大小的1倍。

背景图像

通过CSS添加背景图像。

backgroud-image放图像只为了让元素更有吸引力，没有任何具体的意义。 <img>元素是用来包含一个图像，用来放照片或logo.

background-image :    url (相对路径/URL):
}

设置位置

background-position属性可以设置图像的位置，可以按像素，百分数或关键字指定。 关键字有： top、left、right、bottom、center。

background-position:  top left;

top left是将图像放在左上方。

背景图像重复

背景图片默认为“平铺”，就是反复重复，直至填满整个背景空间。 background-repeat可以控制水平和垂直方向的重复数量。

no-repeat 图像显示一次，不重复。 repeat-x 图像在水平方向上重复。 repeat-y 图像在垂直方向上重复。 inherit 按父元素的设置来处理。

background-repeat: no-repeat;

背景简写

background: white url(images/cooktail.gif) repeat-x;

相当于合并了

background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;

来源：《Head First HTML 与 CSS》(中文第二版)P365，380-383，440 , 443

zilongxuan001 commented 6 years ago

盒模型概念

什么是盒模型？ 什么是内容区？ 什么是内边距？ 什么是外边距？

盒模型（box-model）

HTML将每个元素都看做一个盒子。盒子里从内到外嵌套有四个小盒子；有内容区，内边距，边框和外边距。

内容区

放内容的区域（eg文本或图像），大小正好包含全部内容。

可以控制内容区的宽度和高度。内容区可以宽而扁，可以高而窄。

内容区设置

width: 宽度 height: 高度

内边距

内容区到边框之间的空间叫做内边距，透明无色，无装饰，可控制上下左右的宽度，从而调整内容的位置。

边框

处于内边框和外边框之间的部分叫边框，可选，有宽度、样式和颜色。

外边距

边框到浏览器或其他元素之间的空间叫外边距，透明无色，无装饰。通过控制上下左右的宽度，可以增加或减少元素之间的空间。

来源：《Head First HTML 与 CSS》(中文第二版)P367-369

zilongxuan001 commented 6 years ago

设置盒子

可以对盒子做哪些设置？ 内边距、外边距和元素的关系？ 内边距和外边距可以呈现背景色或背景图片吗？

设置盒子

盒模型（box-model） 可以设置盒子的内容区大小，内边距大小，边框的属性（颜色，实虚样式和圆角），外边距大小。

指定盒子的样式，包括内边距、边框和外边距 只有内边距或一个边框 只有边框 只有外边距，没有边框和内边距

内边距和元素

内边距可以看作是元素的一部分。外边距包围着元素。

内边距和外边距

内边距和外边距可以呈现背景色或背景图片。

元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距。

两者都可以设置大小，但不能设置颜色，圆角或尖角之类的样式。

来源：《Head First HTML 与 CSS》(中文第二版)P370-372

zilongxuan001 commented 6 years ago

内边距

可以怎样设置内边距？ 使用哪个属性来设置内边距？ 有哪些方法来设置内边距属性？

内边距设置

控制内容区任意一边的内边距，比如很大的左右内边距 很大的上下内边距 利用上边和左边的内边距，将内容移到右下角

内边距属性

padding

内边距属性设置方法

可以用像素法来设置内边距大小。 （1）四边都一样

padding: 20px;

则内边距的上右下左都是20px。

（2）四边不一样

padding: 10px 20px 10px 20px;

设置四边的边距

（3） 设置一边大小

padding： 25px
padding-left: 80px；

各边设置为25px，再将左边调整为80px。 上下顺序不能颠倒，padding在上，padding-left在下。

（4）上下一样，左和右一样 padding: 0px 20px;

上下是0px；左右是20px。

来源：《Head First HTML 与 CSS》(中文第二版)P377，P384，P443

zilongxuan001 commented 6 years ago

外边距

可以怎样设置外边距？ 使用哪个属性来设置外边距？ 有哪些方法来设置外边距属性？

外边距设置

控制内容区任意一边的外边距，比如很大的左右外边距 很大的上下外边距 利用下边和右边的外边距，将内容移到左上角

外边距属性

margin

设置外边距属性方法

可以用像素法来设置外边距 （1）四边外边距都一样

margin: 250px;

（2）四边不一样

margin:  10px   20px  10px  20px;

（3）只控制一边

margin: 30px;
margin-right: 250px;

先统一设置为30px， 再设置右边为250px。 上下顺序不能颠倒，margin在上，margin-right在下。

（4）上下一样，左和右一样 margin: 0px 20px;

上下是0px；左右是20px。

来源：《Head First HTML 与 CSS》(中文第二版)P385, ，P443

zilongxuan001 commented 6 years ago

边框

对边框可以做哪些设置？ 如何设置边框样式？共有哪8种样式？ 如何设置边框宽度？共有哪两种方法？使用时注意事项？ 如何设置边框颜色？共有哪三种方法？ 如何指定一边的边框？ 如何指定边框圆角？或一边圆角？ 边框的设置怎么简写？

边框设置

实线边框，可以是粗线或细线 没有边框 8种不同的边框样式，比如虚线边框 对边框指定颜色 对边框创建圆角

边框样式

边框样式形式 border-style:

边框样式：

solid ： 实线边框 dotted ： 虚线，或点线 double ： 双线，有两条线 outeset： 外凸 inset ： 内凹 groove ： 槽线 dashed：破折线 ridge：脊线

边框宽度

边框宽度形式 border-width:

可以用关键字和像素法设置边框宽度

border-width: thin;
border-width: 5px;

关键字：thin、 medium、thick

注意： 不同浏览器对thin medium thick的默认大小不一样。

如何设置边框颜色

边框颜色形式 border-color:

用关键字法、rgb法和十六进制法设置

border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;

指定一边边框

边框可以指定任意一边（上、右、下和左）的边框样式、宽度和颜色。

border-top-color: black;
border-top-style: dashed;
border-top-width: thick;

四边： top right bottom left 样式 style 宽度 width 颜色 color

指定边框圆角

可以对边框的四角或任意一角或组合设置圆角 设置方法：百分比、 倍数(em)和像素。

border-radius: 15px;

每个角都是15px。

border-top-left-radius: 3em; 左上角 border-top-right-radius: 3em; 右上角 border-bottom-right-radius: 3em; 右下角 border-bottom-left-radius: 3em; 左下角

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;

左上角和左下角为15px，右上角和右下角为尖角。

边框的简写

border: thin solid #007e7e;

border: #007e7e solid;

border: solid; 里面值的顺序无所谓。

来源：《Head First HTML 与 CSS》(中文第二版)P370，P386-389，P443

zilongxuan001 commented 6 years ago

id

什么是id? id和类的区别是什么？ 如何在CSS中设置id? id和类的命名规则是什么？

id

id，每个元素唯一的标识符。

可以用于页眉、页脚、导航条等。

id和类

一个id只能用在 一个元素上。 一个类可以用在很多元素上。

设置id

# id名{
      属性: 值;
}

或者

元素名#id名{
     属性: 值;
}

id和类的命名规则

id的首字符不能是空格线，可以以数字或字母开头，其他可以用字母、数字和下划线。

类的首字符不能是空格线，要以字母开头，其他可以用字母、数字和下划线。

来源：《Head First HTML 与 CSS》(中文第二版)P393-394, P397

zilongxuan001 commented 6 years ago

多个样式表

多个样式表链接的顺序很重要吗？为什么？ 为什么要使用多个样式表？ 样式表对多个设备使用哪个属性？ 媒体属性？ 除了<link>，还有什么方法添加媒体查询功能？

多个样式表链接的顺序

多个样式表链接在HTML的顺序很重要，因为下面的样式表可以覆盖上面的样式表。 所以总的样式表要放在最上面，调整的样式表要放在下面。

为什么要使用多个样式表

（1）简单的网站也需要样式表。一般修改样式，不是直接改样式表，而是新建一个新的样式表，将新样式表的链接放到老样式表链接的下面。 （2）适用于不同的浏览器 （3）适用于不用的设备，比如说桌面PC，笔记本电脑，平板电脑，手机，页面的印刷版本。

样式表对多个设备的属性

   <link href=“#”  rel="stylesheet" media=" screen and  (max-devices-width:  480px)">

media属性制定应用该样式比的设备类型 screen 指定了这是有屏幕的设备 max-devices-width: 480px指定屏幕宽度不超过480像素。

  <link href="#" rel="stylesheet" media="print">

print 指定了媒体类型为“print”，通过打印机才能看到页面。

媒体属性

最大宽度 min-device-width 最小宽度 max-device-width 最大高度 最小高度 方向 orientation（横向landscape，纵向portrait） 颜色 宽高比

其他添加媒体查询的功能

在CSS中添加媒体查询 @media

@media screen and (min-device-width: 481px){
# id名{
属性: 值;  
}
}

屏幕宽度大于481px使用该规则。

@media screen and (max-device-width: 480px) {
       #id名{
      属性: 值； 
  }
}

屏幕宽度小于480px使用该规则。

@media print{
       body {
        属性: 值；   
        }
}

打印该页面，使用这个规则。

注意：IE8及以前版本不支持媒体查询。

来源：《Head First HTML 与 CSS》(中文第二版)P399，

媒体属性参考书籍《Head First Mobile Web》