这节课,咱们学习 CSS 填充属性和 CSS 宽度与高度属性。
还是看这个例子,每个区块除了设置外边距,还有内容四周的空间以及内容的宽高设置。
CSS 填充属性用于在一个元素的内容四周产生空间,也就是边框内到内容外之间的间隔。能够通过 padding-top,padding-right,padding-bottom,padding-left 等属性设置元素的上边、左边、下边和右边的内填充。
所有的 padding 属性都有以下值:
length – 以 px、pt、cm 等为单位指定填充。比方 10px,24pt,0.5cm 等。
% – 以父元素宽度的百分比来指定填充。比方 10%。
length 和 % 都能够取负值,示意缩小外部填充的空间大小。
创立 018-css-padding-width-height 文件夹,在文件夹下创立 padding-width-height.html 文件,和 mystyle.css 文件。关上 html,构建根底代码。引入内部款式。增加一个 div 元素,填入一些文本。
关上 mystyle.css 文件,定义 div 选择器,申明款式:border: 1px solid black,background-color: lightblue,padding-top: 50px,padding-right: 30px,padding-bottom: 50px,padding-left: 80px。
在浏览器中查看成果。在 Styles 页签里,点击容器布局示意图的 padding 区域,四个方向的内填充分明显示了。
CSS
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
为了简化代码,能够在一个 padding 属性中指定所有的填充属性。
如果 padding 取四个值,比方 padding:25px 50px 75px 100px,则示意:顶部填充为 25px,左边填充 50px,底部填充 75px,右边填充 100px。留神书写程序是上右下左,每个值用空格隔开。
如果 padding 取三个值,比方 padding: 25px 50px 75px,则示意:顶部填充 25px,左右两边填充 50px,底部填充 75px。
如果 padding 取两个值,比方 padding: 25px 50px,则示意:顶部和底部填充 25px,左右两边填充 50px。
如果 padding 取一个值,比方 padding: 25px,则示意:所有四个方向填充都是 25px。
改写一下填充的款式。正文掉原来的代码,从新定义款式:padding: 50px 30px 50px 80px。
咱们看,成果是一样的!
如果一个元素有指定的宽度,那么加在该元素上的填充,就会加到该元素的总宽度上。
咱们来验证一下。
在 HTML 里增加一个 h1 标签,填入一些文本。在 CSS 里定义 h1 选择器,把 div 元素的边框和背景款式拷贝过去,再给它增加款式 width: 300px。也给 div 增加一个 width: 300px 的款式。
看成果,div 比 h1 显著宽很多,因为左右的内填充会减少容器的宽度。h1 的宽度为 300+2,共 302px,div 的宽度为 300+30+80+2,共 412px。
CSS
h1 {
width: 300px;
border: 1px solid black;
background-color: lightblue;
}
div {
width: 300px;
border: 1px solid black;
background-color: lightblue;
/* padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px; */
padding: 50px 30px 50px 80px;
}
接下来,咱们钻研 CSS 的 width 和 height 属性,它们用于设置一个元素的宽度和高度。在后面的很多案例里都应用过它们了。
高度和宽度属性不包含 margin、border 和 padding 区域,只是用来定义元素的内容尺寸。能够设置的值有:
auto – 这是默认值。浏览器会计算出高度和宽度。
length – 以 px、cm 等为单位定义高度和宽度。比方 200px,30cm 等。
% – 以父元素宽度的百分比来定义高度和宽度。比方 20%。
initial[ɪˈnɪʃl] – 将高度和宽度设置为默认值。实际上就是 auto 了。
比方,将 div 的宽度值定义为 50%。
再看一下成果,div 里的文本内容的宽度,就等于以后页面宽度的一半。
再次强调一下,width 和 height 属性是不蕴含内填充、边框和外边距的。比方,此时的 div 容器总宽度是大于页面宽度 50% 的。
文章配套视频链接:https://www.bilibili.com/vide…