1. 理解什么盒子模型
网页中,所有的html标签,都可以做为一个盒子
网页元素(内容):文字、图片<img/>
2. 盒子的边框(顺时针:上右下左 )
a) border-width:宽度( border-top-width border-right-width
border-bottom-width border-left-width)
b) border-style:样式( solid细边框、dashed虚线边框)
c) border-color:颜色
d) 简写:border:1px solid red;
属性 |
说明(顺时针:上右下左) |
|
border-top-color |
设置上边框颜色 |
|
border-right-color |
设置右边框颜色 |
|
border-bottom-color |
设置下边框颜色 |
|
border-left-color |
设置左边框颜色 |
|
border-color |
设置4个边框为同一颜色 |
border-color:red; |
上下边框颜色为blue 左右边框颜色为red |
border-color: blue red; |
|
上边框颜色为blue 左右边框颜色为red 下边框颜色为green |
border-color: blue red green; |
|
上、下、左、右边框颜色 分别为blue、red、green、black |
border-color: blue red green black; |
e) 外边距(盒子之间的距离)——margin
1、 居中——margin : 0px auto;
2、 margin-left ight opottom:数字px;
f) 内边距(文字或图片和盒子中间的间隙)——padding
padding-top ightottomleft (数字px)
说明:边框、外边距、内边距,
简写方式方向(顺时针),按上、右、下、左设置
一、 标准文档流
1、 块级元素
a) 特征:单独占据一块区域,单独占一行,里面包含内联元素
b) 常用的块级元素:
i. 标题标签——<h1…h6>
ii. 段落标签——<p>
iii. 层——<div>
iv. 表格——<table>
v. 表单——<form>
vi. 列表:有序列表、无序列表、定义列表
2、 内联元素
常用的内联元素:<img/>、<span>、<strong> 、<em>、<a>、
表单元素
3、 标准文档流规则:块级元素,包含内联元素,反之则不行
三、 控制元素显示和隐藏——display属性
none——隐藏 block——显示