常见的元素:
h1 - h6 、p、div 、ul、ol、li…
特点:
常见元素:
a、strong、b、em、i、del、s、ins、u、span…
特点:
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
任何一个 html 元素都是一个矩形的盒子,而盒子里可以放内容(内容可以是文本或者其他元素)
content 指的是内容,padding 指的是内边距,border 指的是边框,margin 指的是外边距。
通过 border 来设置边框的属性,直接使用 border 属性则是直接设置四个方向。
使用 border-left、border-right、border-top、border-bottom 来设置左边、右边、顶部、底部。
设置边框要设置三个方面:边框的粗细、颜色、风格。
先来设计一个简单的黑色边框。
我最帅
这是一个div
border: 50px black solid 这是一个宽度为 5像素,颜色为黑色,风格为实线(solid)的边框。
将开发者工具打开,可以发现此时的尺寸是有一些问题的。
可以看到此时的尺寸并不是 200 * 100,而是 209.6 * 109.6 了。
此时多出来的尺寸就是边框的尺寸,这说明边框默认情况下会撑大盒子的,
换句话也就是 width 和 height 表示的是内容部分的尺寸。
但是我们更多的时候是不希望盒子被撑大的,因为会影响该元素的其他元素的相对位置。
此时就可以设置一个专门的属性来防止盒子被撑大。
box-sizing: border-box;
设置好上述的属性之后,盒子就不会被撑大了。
可以改变像素大小来改变边框的粗细。
border: 10px black solid;
以上是 10 像素的边框。
border: 20px black solid;
以上就是 20 像素的边框。
这里的更改颜色可以使用,英文单词、rgb、十六进制 的方式来更改颜色。
border: 5px green solid;
上面就是一个英文单词更改的绿色边框。
border: 5px #00ff00 solid;
以上就是一个十六进制更改的绿色边框。
border: 5px rgb(0, 255, 0) solid;
以上就是一个rgb更改的绿色边框。
上面演示的 solid 是一个 实线 的风格,下面演示其他的风格。
dashed 表示的是一个为虚线的风格。
dotted 的风格是一个由点组成的虚线。
具体有哪些风格可以打开 mdn 文档,查看 border
这里面就有一些可以参考的风格。
先来使用 padding给左边设置一个内边距,padding 设置的是 内容 和 边框 之间的距离。
我最帅
这是一个div
根据开发者工具观察盒子模型,可以很清楚的看到左边多了一条框框,并且是位于边框和内容之间的。
我们也可以不指定方向,此时就是四个方向(top、right、bottom、left)都会去添加一条内边距。
padding: 10px;
可以看到上述图片的内边距已经是 4 个方向都有了。
添加页边距的时候还有一些其他的写法:
padding: 10px 20px; 表示的是上下边距是 10,左右边距是 20。
padding: 10px 20px 30px 40px; 表示的分别是四个方向边距,顺序是 上右下左。
如果要使用 padding: 10px 20px; 的方式,设置一个上下边距是 10 ,左右边距是 20 。
可以看到左右边距比上下边距宽一些。
也可以使用 padding: 10px 20px 30px 40px; 的方式,分别给四个方向设置边距。
可以看到,按照从上右下左的顺序,边距逐渐增大。
先来观察没有设置外边距的情况。
我最帅
这是一个div这是另一个div
当此处并没有设置外边距的时候,两个 div 是连接到一起的。
下面设置底部为 10 像素的外边距。
margin-bottom: 10px;
设置成功后,两个 div 就分开了。
margin 的写法和 padding 差不多,也是可以分四个方向来设置。
margin: 10px; 表示四个方向都是 10像素。
margin: 10px 20px; 表示上下边距为 10 像素,左右边距为 20 像素。
margin: 10px 20px 30px 40px; 表示按照 上右下左 的顺序分别设置为 10像素、20像素、30像素、40像素。
我最帅
这是另一个div
根据上面的代码会得到下面的情况。
可以看到左上角有一个红色的矩形。
现在将 margin-left 和 margin-right 属性设置成 auto 就会形成一个水平居中的效果。
.three {width: 50px;height: 50px;background-color: red;margin-left: auto;margin-right: auto;}
但是如果把 margin-top 和 margin-bottom 设置成 auto 是不可以形成垂直居中的。