网页前端培训5盒子模型

亦凉 2024-05-01 16:11 33阅读 0赞

### padding内边距 ###

设置元素所有内边距的宽度或者是设置边上内边距的宽度

单独设置各边的内边距：padding-top padding-left paddling-bottom padding-right

### border边框 ###

设置边框的颜色、样式、宽度

单独设置： border-color

border-style

border-width

### margin外边距 ###

默认按照上右下左的顺序设定 设置一个值：上右下左都一致

设置两个值：上下一致，左右一致，设置三个值：上右下 左和右一致

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>盒子模型</title>
    		<style type="text/css">
    			#d1{
    				width: 100px;
    				height: 100px;
    				background-color: blue;
    				/* 设置边框 */
    				border: brown 10px outset;
    				/* 设置内边距 */
    				padding: 10px;
    				/* 设置外边距 */
    				margin-top: 100px;
    				margin-left: 100px;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div id="d1">
    			
    		</div>
    	</body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/a3974ebe0da04d609b62b7c93bbc3fd2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关网页前端培训5盒子模型

padding内边距设置元素所有内边距的宽度或者是设置边上内边距的宽度单独设置各边的内边距：padding-top padding-left paddling-botto...

亦凉/ 2024年05月01日 16:11/ 0 赞/ 34 阅读

相关【Web前端】CSS-盒子模型

文章目录一、盒子模型 1、网页布局的本质 2、盒子模型（Box Model）组成 3、边框（border）

谁践踏了优雅/ 2024年04月07日 12:53/ 0 赞/ 54 阅读

相关前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影

css样式表/层叠样式表（3）（1）盒子模型（2）盒子边框（3）表格的细线边框（4）内边距padding 内盒尺寸计算（元素实

川长思鸟来/ 2022年11月09日 15:29/ 0 赞/ 206 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明，先举个通俗的例子：在一个仓库中放了

女爷i/ 2022年08月13日 12:40/ 0 赞/ 164 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明

Myth丶恋晨/ 2022年08月13日 12:37/ 0 赞/ 145 阅读

相关前端基础-04-盒子模型

盒子模型 1.盒子模型简介他是由内容、内边距、外边距、边框 border:边框类型颜色; border-width borde

ゝ一纸荒年。/ 2022年06月05日 02:16/ 0 赞/ 143 阅读

相关 WEB前端盒子模型稳定性

WEB前端-CSSS盒子模型稳定性盒子模型布局稳定性按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

女爷i/ 2022年01月10日 07:11/ 0 赞/ 192 阅读

相关 WEB前端盒子模型初识

CSS盒子模型盒子边框（border） border : border-width || border-style || border-color

女爷i/ 2022年01月10日 07:09/ 0 赞/ 317 阅读

相关 html5盒子模型

相关博客： Flex 布局教程：语法篇：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][h

川长思鸟来/ 2022年01月05日 05:59/ 0 赞/ 200 阅读

相关前端盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封

谁借莪１个温暖的怀抱￠/ 2021年12月08日 22:19/ 0 赞/ 229 阅读