热搜:NVER node 开发 php

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose

2024-11-17 15:40:01
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose

一、盒子模型(box model)


一个盒子又4部分组成:content(内容)、padding(填充)、border(边框)和margin(外边界)


盒子模型有两种:

(1)标准W3C盒子模型

(2)IE盒子模型(content包含padding和border)

为了统一标准,让网页能兼容各个浏览器,必须使用标准W3C盒子模型

如何才算使用?答:在网页的顶部加上DOCTYPE声明



二、盒子模型结构详解


1、css边框(border)属性


border有3个属性:border-width(宽度)、border-style(样式)、border-color(颜色)

(1)width:

(1) 单位数值(1px)或关键词(thin、medium、thick)

(2) 如果不设置,默认是medium,一般浏览器解析为2px

(3) 建议用单位数值来绝对定义

(2)style:

none、solid、hidden、dotted、dashed、double、groove、ridge、inset、outset等


3种写法:

(1)border:width style color(4边相同)

例如:border:1px solid #000000

(2)border-left:width style color(4边不同)

例如:border-left:1px solid #000000


(3)border-left-width:【(2)的另一种写法】

border-left-style:

border-left-color:

例如:

border-left-width:1px;

border-left-style:solid;

border-left-color:#000000;


注:

在页面应用中,设置的border也会占据页面空间。所以,当精确计算版面时,

即使在border为1px的情况下,也一定要把border对宽度和高度的影响因素考虑进去。


2、CSS填充(padding)属性


属性:padding(padding-top、padding-right、padding-bottom、padding-left)

属性值:单位数值或百分比


2种写法:

(1)padding:top right bottom left(上右下左??按顺时针方向)

例如:padding:10px 20px 30px 40px;

(2)padding-top:

padding-right:

padding-bottom:

padding-left:

例如:

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:40px;



3、CSS外边界(margin)属性


属性:margin(margin-top、margin-right、margin-bottom、margin-left)

属性值:单位数值或百分比


2种写法:

(1)margin:top right bottom left(上右下左??按顺时针方向)

例如:margin:10px 20px 30px 40px;

(2)margin-top:

margin-right:

margin-bottom:

margin-left:

例如:

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;


注:

margin是一个非常有用的CSS属性,在实际应用中,还可以将它的值设为负数,以达到页面版面的要求。