CSS：元素分类+盒子模型

一、元素分类

1.块状元素：

1.1特点：

-每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

-元素的高度、宽度、行高以及顶和底边距都可设置。

-元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

1.2常用的块状元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

 

1.3将内联元素转换为块状元素：display

内联元素：{display：block；}

 

2.内联元素：（行内元素）

2.1特点：

-和其他元素都在一行上；

-元素的高度width、宽度height及顶部margin-top和底部边距margin-bottom不可设置；

-元素的宽度就是它包含的文字或图片的宽度，不可改变。

 

2.2常用的内联元素：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

 

2.3将块状元素转换为内联元素：display

块状元素：{display：inline；}

 

3.内联块状元素：

3.1特点：

-和其他元素都在一行上；

-元素的高度、宽度、行高以及顶和底边距都可设置。

 

3.2常用的内联块状元素：

<img>、<input>

 

3.3设置内联块状元素：

元素：{display：inline-block}

 

二、CSS盒子模型

1.边框border：围绕着内容以及补白的线

元素{

    border-width：2px；//边框宽度，取值可以为：（thin/medium/thick）

    border-style：solid；//边框线类型，取值可以为：（dashed虚线/dotted点线/solid实线）

    border-color：red；//边框线颜色，可以为预设的颜色也可以采用16进制颜色

}

 

*也可以缩写：

元素{border：2px solid red}//线宽、线型、线色

 

给元素的不同边框分别设置：

元素{

    border-bottom：1px solid red；
    border-top:1px solid red;
    border-right:1px solid red;
    border-left:1px solid red;

}

 

2.宽度和高度width height：CSS定义的宽度和高度，指的是内容的宽度与高度

一个元素实际宽度：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

块状元素{    //只有块状元素能设置高度和宽度，内联元素的高度和宽度就是元素内容的高度和宽度，无法改变

    width：200px；

    heigth：200px；

}

 

3.填充padding：内容与边框之间的距离

填充默认顺序：上、右、下、左

元素{

    padding:20px 10px 15px 30px；

}

等价于

元素{

    padding-top：20px；

    padding-right：10px；

    padding-bottom：15px；

    padding-left：30px；

}

 

若要上右下左的填充都为10px：

元素{ padding：10px；}

 

若要上下填充为10px，左右为20px：

 

 

4.边界margin：元素与元素之间的距离

边界默认顺寻：上、右、下、左

 

元素{    //内联元素只能设置元素与元素间的水平距离，垂直距离因为元素本身的高度不能改变，所以也不能变

    margin-left：20px；

    margin-right：20px；

}

 

块状元素{    //块状元素都能设置

    margin-left：20px；
    margin-right：20px；
    margin-top：20px；
    margin-bottom：20px；

}

 

5.padding与margin的区别：

*padding是边框里，内容与边框的距离；margin是边框外，边框和边框的距离