CSS布局控制--盒子模型

一、盒子模型

用于设置边框的：盒子的边框(border)、

用于设置距离的：内容与边框(padding)、盒子与盒子(margin)。

文本默认在盒子的左上方

padding、border、margin都是实体，会增加盒子的面积

盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸是三者的相加
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

二、border 用于设置盒子边框

常用简写：

border:10px solid red;

分开写：

border-top-color:red;    /* 设置顶部边框颜色为红色 */
border-top-width:10px;   /* 设置顶部边框粗细为10px */
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  dashed(虚线)  dotted(点线); */

三、padding 设置盒子和内容间距离

调整文本在盒子中位置的常用方式：不用padding，
上下用line-height(由字体大小+padding组成，且不占盒子高度)

左右用text-indent,同样不占盒子宽度。居中用text-align:center

四个方向一起写：

padding：20px 40px 50px 30px;

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */

四、margin 盒子和盒子之间的距离

margin相关技巧

1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

外边距合并

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

五、盒子的嵌套

问题1： margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：最常用的方式

.clearfix:before{content: '';display:table;
}

问题2：内盒子大于外盒子时，设置外盒子的overflow属性。

overflow的设置项：
    1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
    2、hidden 多余的被修剪，此属性还有清除浮动、清除margin-top塌陷的功能。
    3、scroll 会加滚动条以便查看其余的内容。
    4、auto 如果内盒子大于外盒子，自动加滚动条以便查看其余的内容。
    5、inherit 规定应该从父元素继承 overflow 属性的值。

六、用些需注意的自带样式：

body的自带样式设置为margin（边缘）：0px,默认为8px的边框。

微软雅黑的自带样式有行高大于20px

常用表格样式：

CSS布局控制--盒子模型相关推荐

CSS布局(二) 盒子模型属性
盒子模型的属性宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
HTML与CSS基础（五）—— CSS布局（盒子模型）、PxCook使用
目标能够认识盒子模型的组成部分能够掌握盒子模型的边框.内边距.外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象,并知道如何解决盒子塌陷问题一.PxCook的基 ...
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...
CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
CSS之布局（盒子模型--外边距）
盒子模型--外边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...

CSS布局控制--盒子模型

CSS布局控制--盒子模型相关推荐

最新文章

热门文章