Css盒子模型
学习Css盒子模型,首先就要知道Css块级元素和内连元素
块级元素:就是我们写的各个的代码块,<h1>...<h6>、<p>、<div>等。
内连元素:<span>、<a>、<strong>等
内连元素是可以包含于块级元素里面的,也就是成为一个子元素。
盒子模型的本质上是一个盒子,封装着周围的HTML元素,他包括:边框,边距,填充和实际内容。
外边框(Margin):清除边框外的区域,外边框是透明的;
边框(Border):围绕在内边框距和内容外的边框;
内边距(Padding):清除内容周围的区域,内边距是透明的;
内容(Content):盒子里面的内容,显示文本和图像。
我们在设置边框(Border)的时候,主要对他的宽度,颜色,样式等进行设计。
Border-width设置的是边框的宽度
Border-color 设置的是边框的颜色
Border-style 设置的是边框的样式(solid实线、dashed虚线、dotted点状线等等样式)
在设计边框的时候,我们还有一个简写属性,那就是把所有的边框属性都写在Border里
如:Border: 1px solid blue;
表示边框宽度为1像素,实线,蓝色;
也可以对边框的四条边分别设置:
(上)Border-top-(width、style、color):......
(右)Border-right-(width、style、color):......
(下)Border-bottom-(width、style、color):......
(左)Border-left-(width、style、color):......
也可以使用简写属性:Border-top: width style color;
外边框的设置语法也基本差不多,只是把Border换成Margin而已;
Margin也有简写属性:Margin: - - -;
设置Margin时有一个妙用,那就是网页居正对齐可以使用Margin:0 auto; 直接设置。
还有当两个垂直外边距相遇时,外边距为两者高度中的较大者。
Padding 设置语法也基本一致;还有盒子内宽度=width+padding-left+padding-right;
Border 和 Margin的简写设置样式也和Padding一样,都是顺时针走向的。
我们对盒子的操作,主要就是对.css文件的操作,我们输入的文本内容是不变的,但是通过这些操作,就可以把同样的内容设置成自己想要的样式!