网络平台指网站 建设项目所在地,wordpress导航菜单居中,网站建设太仓,企业服务入口文章目录1. 元素的显示模式1.1 块级元素1.2 行内元素1.3 行内元素和块级元素的区别1.4 改变显示模式2. 盒模型2.1 边框2.1.1 边框的粗细2.1.2 边框的颜色2.1.3 边框的风格2.2 内边距2.3 外边距2.3.1 margin 的特殊情况1. 元素的显示模式
1.1 块级元素 常见的元素:
h1 - h6 、…
文章目录1. 元素的显示模式1.1 块级元素1.2 行内元素1.3 行内元素和块级元素的区别1.4 改变显示模式2. 盒模型2.1 边框2.1.1 边框的粗细2.1.2 边框的颜色2.1.3 边框的风格2.2 内边距2.3 外边距2.3.1 margin 的特殊情况1. 元素的显示模式
1.1 块级元素 常见的元素:
h1 - h6 、p、div 、ul、ol、li… 特点
独占一行高度, 宽度, 内外边距, 行高都可以控制宽度默认是父级元素宽度的 100%和父元素一样宽是一个容器(盒子), 里面可以放行内和块级元素
1.2 行内元素 常见元素
a、strong、b、em、i、del、s、ins、u、span… 特点
不独占一行一行可以显示多个设置高度宽度行高无效左右外边距有效(上下无效)内边距有效默认宽度就是本身的内容行内元素只能容纳文本和其他行内元素不能放块级元素
1.3 行内元素和块级元素的区别
块级元素独占一行行内元素不独占一行块级元素可以设置宽高行内元素不能设置宽高块级元素四个方向都能设置内外边距行内元素垂直方向不能设置
1.4 改变显示模式 使用 display 属性可以修改元素的显示模式. 可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素. display: block 改成块级元素 [常用] display: inline 改成行内元素 [很少用] display: inline-block 改成行内块元素
2. 盒模型 任何一个 html 元素都是一个矩形的盒子而盒子里可以放内容内容可以是文本或者其他元素 content 指的是内容padding 指的是内边距border 指的是边框margin 指的是外边距。
2.1 边框 通过 border 来设置边框的属性直接使用 border 属性则是直接设置四个方向。
使用 border-left、border-right、border-top、border-bottom 来设置左边、右边、顶部、底部。 设置边框要设置三个方面边框的粗细、颜色、风格。 先来设计一个简单的黑色边框。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我最帅/titlestylediv {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px black solid; }/style/head
bodydiv这是一个div/div
/body
/htmlborder: 50px black solid 这是一个宽度为 5像素颜色为黑色风格为实线solid的边框。 将开发者工具打开可以发现此时的尺寸是有一些问题的。 可以看到此时的尺寸并不是 200 * 100而是 209.6 * 109.6 了。
此时多出来的尺寸就是边框的尺寸这说明边框默认情况下会撑大盒子的 换句话也就是 width 和 height 表示的是内容部分的尺寸。 但是我们更多的时候是不希望盒子被撑大的因为会影响该元素的其他元素的相对位置。 此时就可以设置一个专门的属性来防止盒子被撑大。 box-sizing: border-box;设置好上述的属性之后盒子就不会被撑大了。
2.1.1 边框的粗细 可以改变像素大小来改变边框的粗细。
border: 10px black solid; 以上是 10 像素的边框。 border: 20px black solid; 以上就是 20 像素的边框。
2.1.2 边框的颜色 这里的更改颜色可以使用英文单词、rgb、十六进制 的方式来更改颜色。 border: 5px green solid; 上面就是一个英文单词更改的绿色边框。 border: 5px #00ff00 solid; 以上就是一个十六进制更改的绿色边框。 border: 5px rgb(0, 255, 0) solid; 以上就是一个rgb更改的绿色边框。
2.1.3 边框的风格 上面演示的 solid 是一个 实线 的风格下面演示其他的风格。
dashed 表示的是一个为虚线的风格。 dotted 的风格是一个由点组成的虚线。 具体有哪些风格可以打开 mdn 文档查看 border 这里面就有一些可以参考的风格。
2.2 内边距 先来使用 padding给左边设置一个内边距padding 设置的是 内容 和 边框 之间的距离。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我最帅/titlestylediv {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;padding-left: 10px;}/style/head
bodydiv这是一个div/div
/body
/html根据开发者工具观察盒子模型可以很清楚的看到左边多了一条框框并且是位于边框和内容之间的。 我们也可以不指定方向此时就是四个方向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; 的方式分别给四个方向设置边距。 可以看到按照从上右下左的顺序边距逐渐增大。
2.3 外边距 先来观察没有设置外边距的情况。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我最帅/titlestyle.two {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;padding: 10px 20px 30px 40px;} .one {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px;border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;}/style/head
bodydiv classone这是一个div/divdiv classtwo这是另一个div/div
/body
/html当此处并没有设置外边距的时候两个 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像素。
2.3.1 margin 的特殊情况
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我最帅/titlestyle.two {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px; border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;} .one {width: 200px;height: 100px;background-color: orange;color: rgb(255, 255, 255);text-align: center;line-height: 100px;border: 5px rgb(0, 0, 0) solid; box-sizing: border-box;margin-bottom: 10px;}.three {width: 50px;height: 50px;background-color: red;}/style/head
bodydiv classonediv classthree/div/divdiv classtwo这是另一个div/div
/body
/html根据上面的代码会得到下面的情况。 可以看到左上角有一个红色的矩形。 现在将 margin-left 和 margin-right 属性设置成 auto 就会形成一个水平居中的效果。 .three {width: 50px;height: 50px;background-color: red;margin-left: auto;margin-right: auto;}但是如果把 margin-top 和 margin-bottom 设置成 auto 是不可以形成垂直居中的。
