首页 > 其他分享 >零基础学前端之CSS填充和宽高

零基础学前端之CSS填充和宽高

时间:2023-01-29 18:01:45浏览次数:39  
标签:填充 前端 50px padding 宽度 25px div CSS

这节课,我们学习 CSS 填充属性和 CSS 宽度与高度属性。

还是看这个例子,每个区块除了设置外边距,还有内容周围的空间以及内容的宽高设置。

CSS 填充属性用于在一个元素的内容周围产生空间,也就是边框内到内容外之间的距离。可以通过 padding-top,padding-right,padding-bottom,padding-left 等属性设置元素的上边、右边、下边和左边的内填充

所有的 padding 属性都有以下值:

length - 以 px、pt、cm 等为单位指定填充。比如 10px,24pt,0.5cm等。

% - 以父元素宽度的百分比来指定填充。比如 10%。

零基础学前端之CSS填充和宽高_css

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;
}

零基础学前端之CSS填充和宽高_CSS_02

零基础学前端之CSS填充和宽高_CSS_03

为了简化代码,可以在一个 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填充和宽高_css_04

接下来,我们研究 CSS 的 width 和 height 属性,它们用于设置一个元素的宽度和高度。在前面的很多案例里都使用过它们了。

高度和宽度属性不包括 margin、border 和 padding 区域,只是用来定义元素的内容尺寸。可以设置的值有:

auto - 这是默认值。浏览器会计算出高度和宽度。

length - 以 px、cm 等为单位定义高度和宽度。比如 200px,30cm等。

% - 以父元素宽度的百分比来定义高度和宽度。比如 20%。

initial[ɪˈnɪʃl] - 将高度和宽度设置为默认值。实际上就是 auto 了。

比如,将 div 的宽度值定义为 50%。

再看一下效果,div 里的文本内容的宽度,就等于当前页面宽度的一半。

再次强调一下,width 和 height 属性是不包含内填充、边框和外边距的。比如,此时的 div 容器总宽度是大于页面宽度 50% 的。

标签:填充,前端,50px,padding,宽度,25px,div,CSS
From: https://blog.51cto.com/u_14573321/6025900

相关文章

  • 前端生产id,uuid
    exportconstuuid=()=>{consttemp_url=URL.createObjectURL(newBlob())constuuid=temp_url.toString()URL.revokeObjectURL(temp_url)//释放这个ur......
  • 【面试题】做了一份前端面试复习计划,保熟~
    前言以前我看到面试贴就直接刷掉的,从不会多看一眼,直到去年9月份我开始准备面试时,才发现很多面试经验贴特别有用,看这些帖子(我不敢称之为文章,怕被杠)的过程中对我的复习思维......
  • 转 前端开发常用css知识点 认识字就能学。
    前端开发:CSS相关的核心知识点置顶三掌柜666已于2022-10-1101:20:38修改220收藏2文章标签:csshtml前端版权前言在前端开发过程中,有三驾马车组成:JS、CSS、HTML,JS负......
  • 转 [布局概念] 关于CSS-BFC深入理解 认识字就能学
    [布局概念]关于CSS-BFC深入理解barnett_y于 2018-01-2614:51:26 发布351 收藏 4分类专栏: 【HTML5+CSS3点滴知识】 【HTML5+CSS3点滴知识】......
  • CSS笔记
    选择器基础选择器基础选择器由单个选择器组成,基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器标签选择器,按照标签名称分类,例如:p类选择器,按照类名分......
  • 前端如何在上传图片实现图片预览
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> </head> <body> <imgsrc=""alt=""> <inputtype="file"> </body> &l......
  • DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
    DataGear数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、ElementUI前端框架为例,介绍如......
  • reset.scss
    /*reset.scss*/h1,h2,h3,h4,h5,h6{position:relative;display:flex;margin:0;padding:0;margin-block-start:0;margin-block-end:0;......
  • main.scss
    /*main.scss*/@import'./color.scss';@import'./mixin.scss';*,*::before,*::after{box-sizing:border-box;}html{text-size-adjust:100%;-web......
  • 关于前端低代码的一些看法
    2022,低代码彻底火了,甚至火到面试都会问上一句“会低代码吗?”的程度,在整个互联网大裁员的背景下,无论你是否相信它是降本提效的利器,彷佛都不重要了。因为行业趋势总是这般浩......