css盒模型

2018-05-27 本文已影响0人 Scalelength

何为盒子模型？
以盒子为例子，每一个块级元素（div）都可以看做是一个盒子，其中的内容可以为文字或图片<img>
或其他标签元素<p>
盒子和元素之间的距离为内边距padding，padding有四个值padding-top、padding-right、padding-left、padding-bottom
两个盒子之间的距离为外边距margin
盒子自身的边框为border
内容的高度height、宽度weight
盒子的实际高度：内容的height+padding-top+padding-bottom+border*2

一、元素分类
了解css布局之前我们应当先知道一些HTML中的标签元素。
在HTML中标签元素被分为三种不同的类型
分别为：块状元素、内联元素（行内元素）和内联块状元素
以下为常用的元素
(1)块状元素:<div>,<p>,<h1>…<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
(2)内联元素:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,,<code>
(3)内联块状元素:<img>,<input>
以下为详解

二、块级元素
块级元素在HTML中有<div>,<p>,<h1>,<form>,<ul>和<li>等
设置display：block就是将元素显示为块级元素
例如：将内联元素a转化为块级元素，使得a元素具有块级元素特点

2-（1）-块级元素

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

三、内联元素
在html中，<span>,<a>,<label>,<strong>和<em>就是典型的内联元素（行内元素）（inline）元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。
如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

3-(1)-内联元素

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

四、内联块状元素
内联块状元素是将块级元素和内联元素的特点和到一起
内联块状元素特点：
1、和其他元素都在一行上
2、元素的高度、宽度、行高以及顶和底边距都是可以设置的

五、边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
例如下面的设置div边框

5-（1）边框

注意:1、border-style(边框样式)常见样式有：dashed(虚线)、dotted(点线)、solid(实线)
2、border-color中的颜色可以设置为#cccccc
3、border-width可以设置为thin、medium、thick（不常用），最常用的还是px（像素）
4、每一个盒子元素都有上下左右边框，都可以单独设置
border-bottom，border-top，border-left，border-right

六、宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的
css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。