0%

Web前端开发 MOOC 02

更新至第四章 第2节 css定位机制 待更新

css布局和定位

盒子模型

盒子

  • content 内容
  • height 高度
  • width 宽度
  • border 边框
  • padding 内边距
  • margin 外边距
3mpBIP.jpg
3mpwVI.jpg
1
2
3
4
5
6
#box{
width: 100px;
border: 1px solid
/* 边框为1px,实线框 */
·····
}
1
2
3
<div id="box">
balabala···
</div>

overflow属性

内容溢出盒子框,怎么显示

  • overflow: hidden 超出部分不显示
  • overflow: scoll 显示滚动条
  • overflow: auto 如果有超出部分,显示滚动条

border属性(边框的效果)

  • border-width 宽度 取值有px/thin(细)/medium(中)/thick(粗)
  • border-style 取值有dashed(虚线)/dotted(一排点点)/solid(实线)/double(双实线)
  • border-color

border: width style color

1
2
3
div{
border:2px solid red;
}
1
2
3
4
div{
border-bottom:1px solid red;
/* 只设置底部边框 */
}

应用:水平分割线

padding(内边距) margin(外边距)

对浏览器默认的设置清零

1
2
3
4
5
* {
margin:0;
padding:0;
/* 只有在取值为0的时候才可以省略单位 */
}

取值:px,%(外层盒子的宽度和高度)

分开的: padding-top padding-right padding-bottom padding-left

合在一起: 上右下左 (顺时针)

1
2
margin: 1px 2px 3px 4px;
/* 👆 👉 👇 👈 */
1
2
margin: 1px 2px;
/* 👆👇 👈👉 */

将padding换成margin同样

Tips: 1. 如果定标签(div)作为样式的名字,每一个盒子独占一行 2. 上下两个相邻的外边距合并成一个外边距,合并的结果是取两个的最大值 3. 水平方向上不合并

水平居中

1
2
3
4
5
6
/* 图片、文字水平居中 */
text-align: center;

/* div水平居中 */
margin: 0 auto;
/* 上下可以随便设置,左右设置auto,浏览器根据外层盒子宽度和div区域的宽度再除以二,算出margin-left margin-right */

案例
3mp156.jpg
1
2
3
4
5
6
7
8
9
10
11
#newsimglist{
text-align:center;
font-size:0; /*否则图间有空隙*/
}
#newsimglist img{
height: 100px;
width:100px; .
margin-left:5px;
border: 1px solid #0cf;
padding:5px;
}

css定位机制

  • 文档流 flow (默认方式)
  • 浮动 float
  • 层 layer
3mSRN6.jpg

文档流定位(flow)

元素类型转换:

1
2
3
4
a{
display: none/block/inline/inline-block;
/* 不显示/block/inline/inline-block */
}

block元素
  • 独占一行
  • 元素的height、width、margin、padding都可设置

<div> <p> <h1/h2...h6> <ol> <ul> <table> <form>

inline元素
  • 不独占行
  • width、height不可设置
  • width就是所包含的文字/图片的宽度

<span> <a>

两个inline类型的元素中间有间距。要想去除这个间距,可以将之转换成block等元素表示。做导航条的时候,采用

    /
  • 标签包裹起来,来防止间距产生

    inline-block元素
    • 不独占行
    • 元素的height、width、margin、padding都可设置

    <img>

    浮动定位

    div实现横向多列布局

    <> <> <>

看到这里的姐妹一看就要暴富暴美,为什么不让这一天提前一点呢ヾ(≧▽≦*)o