[学习记录][css]内边距、边框和外边距

最新推荐文章于 2024-02-20 14:47:44 发布
最新推荐文章于 2024-02-20 14:47:44 发布
阅读量368 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhqdlove/article/details/50517130
版权

基本元素框

这里写图片描述

宽度和高度

不可运用与行内非替换元素

外边距和内边距

外边距

父元素的背景
百分数相对于父元素width计算，不论上下还是左右（对于定位元素上下外边距则不同）

margin：
上右下左
上（右左）下
（上下）（右左）

负外边距
上下外边距合并

行内非替换元素只受left和right影响，top和bottom不会影响行高

边框

border-width：宽度或粗细，thin，medium，thick
border-style：样式或外观，默认none
border-color：颜色，默认元素文本颜色，父元素文本颜色，transparent透明

边框绘制在元素背景之上
对行内非替换元素的行高无影响

内边距

元素背景
默认元素没有内边距
内边距不合并
百分数相对于父元素width计算，不论上下还是左右

对行内非替换元素的行高无影响

桃子不好吃哦
关注
专栏目录
14.CSS-边框属性、内边距属性和外边距属性
Veronnit的博客
07-14 1525
文章目录边框属性1.什么是边框？2.边框属性的格式2.1连写（同时设置四条边的边框）2.2连写（分别设置四条边的边框）2.1和2.2注意点2.3连写（分别设置四条边的边框）2.3注意点2.4非连写（方向+要素） 边框属性 1.什么是边框？ 边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式 border的属性： border-width border-style border-color border-style的取值 none 定义无边框。 dotted 定义点状边框。在大多数浏览器中呈现为实线。
CSS权威指南第五弹：内边距、边框和外边距
weixin_43187545的博客
04-24 495
宽度和高度 1.一个元素的width被定义为从做内边界到右内边界的距离，height被定义为上边界到下边界的距离。 2.这两个属性很重要的一点是：它们不能应用到行内非替换元素。 3.如果在行内非替换元素声明了width和height,浏览器会忽略。 外边距 margin 值：<length> | <precentage> | auto | inherit 长度值与外边距 m...
Css中内边距、边框和外边距的关系
Wind_的专栏
08-19 7581
CSS 框模型 　　元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 　　内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进
【前端】CSS
粉墨白伶的博客
10-26 2013
Cascading Style Sheets 层叠样式表能够对网页中的元素位置的排版进行像素级精确控制，实现美化页面的效果。
CSS中的内边距、box-sizing与背景颜色
chenyiboke的博客
11-02 5567
1.内边距 1. 什么是内边距： 内容区域与边框之间的距离 特点：会扩大元素边框所占用的区域。 2. 语法： padding：value； 单边设置： padding-top/right/bottom/left:value; 取值： 1. 单位可以为：px 2. 单位可以为：% 3. 简洁写法： padding:value；四个方向的内边距 padding：v1 v2; v1...
【CSS】盒子模型、内边距、背景设置_03
青春木鱼的博客
10-13 2302
内边距是边框到内容区域之间的距离，内边距有颜色，就是当前元素的背景颜色，改变内边距，感觉上是元素变大了，但其实是元素占地空间变大，内容区域并没有改变
css布局
最新发布
chengboxin_cs的博客
02-20 1333
子元素浮动后，此时子元素不能撑开标准流的块级父元素（子元素浮动后脱标 → 不占位置）（2）行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行。（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素。/* 自动水平居中：块元素，元素必须有宽度 *//* 清除浮动，清除浮动对后边元素的影响 *//* 左上 右上 右下 左下 *//* 左上 左下右上 右下 */
Css中内边距、边框和外边距的关系.docx
02-27
在CSS（层叠样式表）中，内边距（Padding）、边框（Border）和外边距（Margin）是布局和设计网页时不可或缺的概念。它们共同决定了元素在页面上的显示方式以及元素之间的空间关系。 首先，元素框的内部是内容区...
css控制边界与边框示例(内边距、外边距使用方法)
09-25
Css 中有两种边界：内边距（padding）和外边距（margin）。 1. 内边距（padding） 内边距是指元素内容与边界之间的空隙，通过内边距，可以增强元素的可读性和美观性。Css 中可以使用 padding 属性来设置内边距，...
css---盒子模型---内边距
chen_zan_yu_的博客
04-19 361
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; backgr...
HTML,CSS进阶知识（盒子模型）
m0_61213423的博客
11-23 406
文档流文档流（normal flow）网页是一个多层的结构，css可以给每一层设置样式，最终我们看到是最上面的一层。文档流是网页最底下的那一层元素分为两种状态：在文档流中，脱离文档流之前将元素分为三类，块元素、行内元素、行内块元素分别具有一些特点，这些特点都是元素在文档流中的特点块元素：不会独占一行，宽是父元素内容区宽度，高是被内容撑开行内元素；
css内边距属性、外边距属性
在线学习web前端开发教程
12-19 6088
一、内边距属性 1.定义：边框和内容之间的距离就是内边距 2.分开写 padding-top:数字px； padding-left:数字px； padding-bottom:数字px； padding-right:数字px； 3.连写： padding：上 右 下 左； 4.注意点： （1）给标签设置内边距之后，标签占有的宽度和高度会发生变化 （2）内边距也会有背景颜色 学习Q-q-...
css内边距外边距和边框
热门推荐
Medlen
01-28 1万+
关于css内边距外边距和边框的一些介绍 1、margin 外边距 是指相邻同辈元素之间的距离。 相邻元素块的margin叠加显示 如上图所示两个元素块的margin值都设置为50px。 2、padding 内边距 定义元素边框与元素内容之间的距离。 上图盒子的宽200px，高200px；内边距为50px；边框为0px。 3、border 边框 边框样式定义要显示怎样一个元
CSS学习笔记：内边距、边框和外边距
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
11-17 5015
基本元素框所有文档元素都生成一个矩形框，就是一个盒子，它描述了一个元素在文档布局中所占的空间大小。因此，每个框都影响着其他元素框的位置和大小。宽度和高度一个元素的width被定义为从左内边界到右内边界的距离，height被定义为上内边界到下内边界的距离。对这两个属性有一点很重要：它们不能应用到行内非替换元素。外边距和内边距元素框在元素之间只提供了很少的空间，有三种方法可以在元素外围生成额外的空间：
input边框怎么去掉_CSS盒模型之内边距、边框、外边距十九问
weixin_39528467的博客
11-24 288
本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考和遇到的问题以评论的方式补充下，后期，我将会补充到文章中第一问：什么是盒模型？可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：外边距（margin）、边框（border）、填充（亦称内边距）（padding）、内容（content）。它在页面中所占的实际宽度是marg...
关于padding和margin可不可以填充颜色的问题
qq_42459832的博客
01-03 4254
试了一下，果然不可以上颜色，padding的颜色为content的颜色，margin则是外部的颜色。(#｀-_ゝ-)
初入WEB前端（15）CSS 关于内边距的探讨
wanna__ac的博客
07-02 482
1.背景颜色会默认延伸到内边距上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
01-border，padding，margin，color
idomyway的博客
08-25 704
border，padding，margin，color border–边框 padding–内边距 margin–外边距 color–颜色 外边距合并 border：边框 border-width border-style border-color border-style border的复合模
css 外边距，内边距
yc_1314的博客
09-08 2876
外边距 外边距属性可以定义元素周围的空间，没有颜色，是透明的。 属性 说明 margin-bottom 设置元素的下边距 margin-top 设置元素的上边距 margin-left 设置元素的左边距 margin-right 设置元素的左边距 组合属性 margin: 10px 5px 3px 20px ; 1. 上边距10px； 2. 右边距5px； 3. 下边距3px； 4. 左边距20px； margin: 23px 43px 10px； 上边距23px；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值