css学习笔记20160124框模型

来源：互联网发布：鼎域名邸房价走势编辑：程序博客网时间：2024/05/20 10:12

所谓box model盒模型就是所有html元素可以看做盒子,盒模型包括边距(margin),边框(border),填充(padding),实际内容(content).

这里说的填充就是指的内边距,而边距实际上指的是外边距.盒模型最里面是实际内容,直接包裹实际内容的就是内边距,然后是边框和外边距.边框将内边距与外边距分离开来.内边距增加的是元素的厚度.背景应用的范围是实际内容和内边距.

border的颜色受背景颜色影响.

属性width和height设置的是内容的宽度和高度.元素实际宽度=width+左填充+右填充+左边框+右边框+左边距+右边距,元素实际高度同理.

解决IE5和IE6不兼容的方法是声明<!doctype html>

css中允许自己定义border边框颜色和样式,border的9种样式在上一篇笔记中已经分析过.

边框的css样式主要有9种样式border-style,宽度border-width,颜色border-color.

可以分别设置border-top-style,border-right-style,border-bottom-style,border-left-style.也可以合并为border-style统一设置,border-style可以有1~4个值,依次设置上(top)右(right)下(bottom)左(left)边框,缺失部分以对边样式为准.其中颜色宽度都与style使用方法相似.

style,width,color可以统一在border属性中设置,例如border:solid 2px blue;

border-left属性将所有左边框的属性样式颜色集合起来声明.其它三个方向边框也可以类似集合起来声明.

outline轮廓属性位于border的外边缘,可以起到突出元素的作用.可以通过outline-style,outline-color,outline-width属性分别设置outline的样式颜色和宽度,也可以子啊outline属性中集中声明.注意outline不能四边单独设置不同样式.

边距margin,margin可以四个方向单独通过margin-top,margin-right,margin-bottom,margin-left单独设置,也可以缩写在margin属性里.margin属性可以有1~4个值,使用方法与borde-style,border-color,border-width类似.

padding属性控制了内边距也就是所谓的填充,其四个方向也可以单独设置,也可以缩写到padding属性中,规则与margin类似.

0 0