Web前端开发 MOOC 02

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

css布局和定位

盒子模型

盒子

content 内容
height 高度
width 宽度
border 边框
padding 内边距
margin 外边距

#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;
}

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

应用：水平分割线

padding（内边距） margin（外边距）

对浏览器默认的设置清零

* {
    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. 水平方向上不合并

水平居中

/* 图片、文字水平居中 */
text-align: center;

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

案例

#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

文档流定位（flow）

元素类型转换：

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实现横向多列布局

<> <> <>