第11章 用CSS进行布局

2018-03-01 18:15:18 《HTML5与CSS3基础教程》笔记 阅读: 109 评论:

[TOCM]

盒模型

css处理元素时,认为每个元素在一个不可见的盒子中,这个盒子由内容区域、内边距(padding)、边框(border)、外边距(margin)组成

默认情况下,css元素的 width=内容区域宽度, height同

可以设置:box-sizing: border-box; 从而使css元素的 width=内容区域宽度+内边距宽度+边框宽度, height同

下面的两个盒子的各属性都相同,不同的是显示方式

默认盒子

超文本标记语言,标准通用标记语言下的一个应用。

设置box-sizing: border-box;

超文本标记语言,标准通用标记语言下的一个应用。

控制元素的显示类型和可见性

元素两种显示类型,一种是块级元素,一种是行内元素。块级元素会单独取行,行内元素不会,块级元素可以设置盒子的各个属性,而行内元素不行。另外两者混合的行内块元素也可以使用这些属性。

指定元素的显示方式
属性:display

值:block(块显示)、inline(行内显示)、inline-block(行内块显示)、none(隐藏, 不留空白)

控制元素的可见性
属性:visbility

值:hidden(隐藏, 留空白)、visible(显示)

设置元素宽度和高度

属性:width, height

值:px、em、rem、%、auto(自动计算,默认值)

设置内边距

属性:padding

值:px、em、rem、%

一个值:用于四边,即四边内距相同;
两个值:前一个值用于上下边,后一个值用于左右边;
三个值:第一个用于上边,第二个左右边,第三个下边;
四个值:按顺时针方向分别用于上、右、下、左
还可以使用padding-top、padding-right、padding-bottom、padding-left单独为四边设置

设置边框

设置边框风格
属性:border-sytle

值:none(无, 默认值)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(凹边)、outset(凸边)

设置边框宽度

属性:border-width

值:长度值

设置边框颜色

属性:border-color

值:颜色名、十六进制值、rgb、rgba、hsl、hsla、

同时设置
输入border
如果需要,输入-top、-bottom、-left、-right,只设置某一边框
如果需要,输入-style、-width、-color,只设置边框的单个属性
输入冒号
若没有设置了3,则可以同时依次设置宽度、风格、颜色;若设置了3,则只能设置相对应的值
border-width、border-style、border-color都可以接受一到四个值,规则同设置内边距。

设置外边距

属性:margin

值:px、em、rem、%、auto

可以接受一到四个值,规则同设置内边距。

可以使用margin-top、margin-right、margin-bottom、margin-left设置某一边外边距。

ps:当em值用于内边距和外边距时,值是相对于元素的字体大小的,而不是相对于父元素的大小。

控制元素浮动

  1. 设置浮动
    属性:float
    值:left、right

  2. 清除浮动
    属性:clear
    值:left、right、both、none

注意设置浮动会让元素脱离文档流。

定位元素

使用position属性定位元素,取值有:

  • static:默认属性。以文档流方式显示元素,不能使用top、left、bottom、right属性进行定位。
  • absolute:相对于最近设置过非position:static;的祖先元素,若这样的祖先元素则相对于文档进行定位。
  • relative:相对以文档流方式显示的位置进行定位,元素未脱离文档流,原位置会被保留。
  • fixed:相对于浏览器窗口进行定位,位置固定,不会随着文档滚动。
    设置非static的元素使用top、left、bottom、right属性进行定位, 可以通过设置static恢复默认位置。

可以通过top和bottom属性设置元素的高度、left和right属性设置元素的宽度。

第三维定位元素

属性:z-index

值:默认值为0,可以是正或负的整数, 数值越大元素越顶层。

注意此属性只能对同一个容器下的元素使用。

垂直对齐元素

属性:vertical-align

值:baseline(对齐父元素的基准线)、middle(在父元素中央)、sub(父元素下标)、super(父元素上标)、text-top(对齐父元素顶部)、text-bottom(对齐父元素底部)、top(对齐该行最高元素)、bottom(对齐该行最低低素)、%(行高的百分比)、n(值, px或em,下移n)

值越大,元素在堆中越高, 此属性只对定位过的元素起作用。

设置鼠标指针

属性:cursor

值:

  1. 手指
  2. default 默认(箭头)
  3. crosshair 十字
  4. move 移动状态
  5. wait 等待状态
  6. help 帮助
  7. text 文字
  8. progress 进程
  9. auto 自动
  10. x-resize 双向箭头, x是其中一个箭头方向,如e(东)、s(南)、w(西)、n(北)、还可以两个组合:nw等

功能
最新评论