10-02 认识盒子模型组成

10-03盒子边框

语法:

border : border-widthII border-stylell border-color

边框样式用于定义页面中边框的风格，常用属性值如下:

none:没有边框即忽略所有边框的宽度(默认值)

solid:边框为单实线(最为常用的)

dashed:边框为虚线

dotted:边框为点线

double:边框为双实线

10-04边框综合写法

上边框：border-top: 宽度样式颜色;

下边框：border-bottom: 宽度样式颜色;

综合性写法：border: 宽度样式颜色;

10-05合并细线表格

语法格式：border-collapse: collapse;

10-06圆角矩形

语法格式：border-radius: ;

技巧；取盒子宽度和高度的一半则会变成一个圆形，50%也可实现圆形。

四种情况：

当只取一个数值时，四个角都为这个数值；

当取两个数值时，左上角右下角取第一个值和左上角右下角取第二个值；

当取三个数值时，左上角取第一个值，右上角、左下角取第二个值，右下角取第三个值；

当取四个值时，左上角第一个值，右上角第二个值，左下角第三个值，右下角第四个值；

下面是当div宽度为200，高度为200时，各种情况：

10-07盒子内边距（padding）

语法：padding:像素 ;

四种情况：

当只取一个值时，上下左右四个内边距都为这个值；

当取两个值时，上下第一个值，左右第二个值；

当取三个值时，上第一个值，左右第二个值，下第三个值；

当取四个值时，数值按顺时针排列，顺序为上右下左

如下图所示：

10-07新浪导航栏（练习）

<!DOCTYPE html>

<head>

<style>

nav {

height: 41px;

background-color: #FCFCFC;

border-top: 3px solid #FF8500; /* 上边框 */

border-bottom: 1px solid #EDEEF0; /* 下边框 */

}

nav a {

font-size: 14px;

color: #4C4C4C;

text-decoration: none; /* 取消下划线 */

padding: 0 15px; /* 上下是0，左右是15px */

height: 41px; /* 行高等于高度可以使文字垂直居中 */

/* 因为链接是行内元素没有大小所以需要转换行内块 */

display: inline-block;

}

nav a:hover{ /* 链接伪类选择器 */

background-color: #eee;

}

</style>

</head>

<body>

<nav>

<a href="#">手机新浪网</a>

</nav>

<body>

</html>

10-08外边距以及盒子居中对齐

margin

属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

语法格式：

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距可以使盒子居中对齐

条件：

1.必须是块级元素。

2.盒子必须指定了宽度(width)

居中格式：margin: 像素 auto;

10-09文字盒子居中图片和背景区别

文字盒子居中：

text-align: center; 文字水平居中

margin: 10px auto; 盒子水平居中左右margin 改为auto就可以了

图片更改大小：

width: 200px;

height: 200px;

插入图片更改大小width 和 height

背景图片更改大小：

background-size: 200px 210px;

背景图片更改大小只能用background-size

图片更改位置：

margin-top: 30px;

插入图片更改位置可以用margin和padding盒模型

背景图片更改位置：

background-position: 30px 50px;

背景图片更改位置用background-position

10-10清除内外边距

margin: 0;

padding: 0;

来清除内外边距

2019.12.5日笔记