这章主要学习CSS盒子模型
一、盒子模型-大小
1、width和height
- width和height 只定义内容的大小，不包含边框和边距
- 如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
2、overflow属性 (overflow-x overflow-y)
概念：定义内容超过width和heigth时的显示方式
- scroll：使用滚动条，不论内容是否超出
- auto：根据情况，如果内容超出了
- width：则出现横向滚动条，如果内容超过了
- height：则出现纵向滚动条，否则不显示滚动条
- hidden：超出部分被隐藏
- visible：默认值，忽略width或height
二、盒子模型-边框
1、边框的三个方面(webkit、firefox和IE)
- border-width,边框的宽度
- border-color,边框的颜色
- border-style,边框的样式（border-style:dotted、solid、double、dashed; ）
2、边框的综合定义
- 分开单独设置， 例：border-width:1px; border-color:#00f; border-style:solid;
- 使用综合属性 例：border:1px #00f solid
注意：三个值没有先后顺序，中间用空格隔开
3、四边独立设置
- 单边分开设置
例： border-left-width:1px; border-left-color:#00F; border-left-style:soli
- 使用综合属性 例： border-left:1px #00F solid;
4、内边距（padding）边框和内容之间的空白宽度
- padding:10px; 四周边距都一样。
- padding:10px 20px; 10px上下边距；20px左右边距。
- padding:10px 20px 30px 40px; 10px上边距；20px左右边距,30px是下边距。
- padding:10px 20px 30px 40px； 10px上边距；20px右边距，30px是下边距，40px是左边距。
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
5、外边距（margin）
概念：标签和它相邻的标签之间的空白宽度 外边距的设置是相叠加的
（1）margin的综合设置 例：margin:10px;(和四边临近的标签的距离都为10px
（2）margin的单边设置 例：margin-left:10px;(标签距左边10px)
（3）特别 <body>标签的margin代表内容与浏览器边框的距离
- 两个行内元素的margin-right和margin-left，采用“和”
- 两个块元素的marign-top和margin-bottom，采用“最大值”
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
