CSS盒子模型 (3)

css盒子模型

网页布局的关键点：盒子

盒子模型组成部分

盒子的组成

margin(外边距)
border(边框)
padding(内边距)
content(内容)

border

border-width:盒子的宽度
border-style:边框的样式 默认值：none(无样式) solid(实线) dashed(虚线) dotted(点线)
border-color:边框的颜色

简写方式

    border:border-width  border-style  border-color

border的边框写法

border-collapse

border-collapse:表格合并

因为表格中的行标签和单元格标签都拥有自己的边框因此需要合并边框

小说排行耪
排名	关键词	今日搜索	最近七日	相关链接
1	鬼吹灯	345	123	贴吧百度图片
2	盗墓笔记	34555	123444	贴吧百度图片
3	西游记	24555	13444	贴吧百度图片
4	东游记	3455	3444	贴吧百度图片
5	甄嬛传	3555	1444	贴吧百度图片
6	水浒传	355	12344	贴吧百度图片
7	三国演义	3555	13444	贴吧百度图片

padding

padding：盒子距离内容之间的距离使用内边距之后盒子会变大

padding设置

padding简写

新浪导航栏

效果图

盒子实际尺寸

    盒子的宽度：Elements width= content Width + padding Width + border
    盒子的高度：Elements height= ontent height + padding height +border

在真正的实际开发中，内边距是一定要真实存在的，所以只能减去盒子的宽高，来维持盒子的宽高不变

课堂案例

案例1

盒子的宽度为130

案例2

盒子宽度为200px+100px+50px+2px=352px

盒子高度为200px+50px+50px+1px+5px=306px

padding不影响盒子大小的情况下

在特殊情况下，如果指定的盒子没有给宽度，则盒子不会被padding值撑开。

margin

margin是外边距，是盒子与盒子之间的距离

margin的简写

同理和padding值的简写一致

块级盒子水平居中对齐


满足两种条件才能让盒子居中对齐

1. 盒子必须指定宽度
2. 左右的外边距margin设置auto

设置auto的三种方法

margin-left:auto margin-right:auto;
margin:auto
margin:0 auto;

盒子水平居中对齐和文字水平居中对齐

text-align:不仅可以让文字水平居中对齐，还可以让行内块元素和行内元素水平居中对齐
margin:auto :可以让块级盒子水平居中对齐

插入图片和背景图片的区别

插入图片

插入图片一般用于展示类，通过盒模型的padding和margin来移动位置

背景图

背景图片一般用于做一些精灵图等等，通过background-position来移动位置

清除元素的默认的内外间距

* {

    margin：0；
    padding:0;
}

注意事项

为了照顾行内元素的兼容性，只设置左右内外边距，不设置上下内外边距；

外边距合并问题

相邻块元素外边距合并问题

相邻块元素合并：取两个块元素外边距合并的较大值，所以只给一个盒子的外边距是最好的解决方法

嵌套块元素外边距合并问题的三个方法

嵌套块元素外边距合并问题的三个方法

给父元素border值
给父元素padding值
给父元素overfiow:hidden;

盒子布局稳定性

ps使用

ctrl+o:打开文件
ctrl+r :打开标尺
ctrl+ + ：放大
ctrl+ - ：缩小
按住空格可以移动视图
吸管工具：吸取颜色
选框工具：测量宽高

去掉列表默认的样式

    li {
        list-style:none;
    }

新闻案例





    
    
    



    
        最新文章 /New Articles
        
            北京招聘平面设计，网页设计，php
            体验javascript的魅力
            jquery的世界来临
            网页设计师的梦想
            jquery中的链式编程是什么