css基本属性（display、padding、position、浮动：float、box-sizing）

已于 2022-03-18 16:04:43 修改
阅读量2.6k 收藏
点赞数
分类专栏： css 文章标签： 1024程序员节 css3
于 2021-10-24 16:45:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/polar_night_down/article/details/120932703
版权
本文介绍了CSS中的一些基本属性，包括display的用途，如何隐藏元素，padding的设置，position的类型及其用法，浮动元素(float)的处理，清除浮动的方法，以及box-sizing属性如何影响元素的尺寸。通过对这些属性的理解，读者能够更好地掌握CSS布局。
摘要由CSDN通过智能技术生成

display

  1. display 属性规定元素应该生成的框的类型。
    每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

none ：此元素不会被显示。
block ：此元素将显示为块级元素，此元素前后会带有换行符。
inline ：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block ：行内块元素。（CSS2.1 新增的值）

JavaScript 语法： object.style.display=“inline”
例：document.getElementById(“p1”).style.display=“none”;

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

例：

最低0.47元/天 解锁文章
白夜下
关注
专栏目录
前端-2-样式布局（margin、padding、position）
qq_38328762的博客
08-15 607
ps:因为涉及布局的标签，调整布局一直很迷（不是说难，就是有些时候影响因素太多，不一定哪里就影响到了，这里简单先总结一下涉及到布局的css样式属性） style=“text-align:center” 使里面内容居中 margin:auto padding:30px 内边距 ...
CSS面试题
qt的博客
02-06 410
盒模型组成是什么？，box-sizing有什么作用？ 盒模型：margin(外边距) padding(内边距) border(边框) content(内容) box-sizing:content-box /border-box / inherit有以下三个属性 1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制 指定宽度和高度除外. 2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度
css之display样式,padding,margin
weixin_30483013的博客
08-22 159
1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="ba...
【CSS】box-sizing 属性
最新发布
小秀的博客
06-09 4639
css中的box-sizing属性
CSS padding（填充）position （定位）
sereasuesue的博客
11-06 2110
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) % 使...
前端-7-display、box-sizing、渐进增强和优雅降级
qq_38328762的博客
08-20 154
盒的display类型 block 块级元素 inline 行内元素 inline-block 行内块元素：在父容器内写，可以使子元素div在一行 与float:left区别： 1. inline-block没有脱离文档流，不会高度塌陷 2. inline-block子元素之间有空格，换行引起的。去空格：父元素添加font-size:0px；删除子元素间的空格） 3. inline-...
详解CSS中的Box Model盒属性的使用
09-24
`)的元素和浮动元素(`float`属性)。它们都会脱离正常的文档流，不占用空间，因此移动它们不会影响其他元素的位置。 CSS3的Flexible Box Model，也称为Flexbox，为复杂的布局提供了更强大的工具。其中，`box-orient`...
css-box-model-document-flow
02-15
2. **浮动（Float）**：通过`float`属性让元素脱离正常流，向左或向右移动，直到其边缘接触到包含它的容器或其他浮动元素的边缘。 3. **绝对定位（Absolute Positioning）**：通过`position: absolute`使元素相对于...
ul.head{ border-style: groove; position: fixed; top:0; width:99%; list-style-type: none; margin-top:0; padding-left: 0px; /*创建一个新的BFC*/ overflow: hidden; background:indianred; border-radius:8px;/*圆角边框*/ font-size:18px; } li a{ /* !*实现横向导航栏, display:inline;也可，如果你想链接到具有相同的大小，你必须使用浮动的方法*!*/ float:left; height:20px; text-align: center; color: white; background-color: darksalmon; padding: 12px 20px; text-decoration: none; } li a:hover{ background-color: coral; color: black; } body{ background-attachment: fixed; background-image: url(../resources/image/blue_pink.jpg); background-size:100%; } iframe{ height:300px; width:400px; float:right; } select{ font-size: 20px; color:olive; background-color:cornsilk; } div{ margin-top:60px; } input{font-size: 16px;} button { border-radius:5px;/*圆角边框*/ font-size: 18px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s ease; } #pauseBtn{ position:absolute; bottom:17%; left:40%; } #startBtn{ position:absolute; bottom:59%; left:15%; } #increase-btn1 { position:absolute; left: 17%; bottom:9%; } #decrease-btn1 { position:absolute; left: 19%; bottom:9%; } #increase-btn2 { position:absolute; right: 19%; bottom:25%; } #decrease-btn2 { position:absolute; right: 17%; bottom:25%; } #speedRange{ position:absolute; bottom:17%; left:50%; } button:hover { background-color: #3e8e41; } #introduction{ margin-top: 20px; width:300px; border-style: groove; font-size: 14px; color:darkred; overflow: auto; min-height:300px; max-height:300px; } footer{ position:absolute; bottom:0; width:100%; height:30px; text-align: center; } #canvas{ /*width: 880px;*/ /*height: 440px;*/ width: 100%; height: 100%; /*margin: -210px auto;*/ /*border: 2px solid yellowgreen;*/ /*display: block;*/ overflow: scroll; } .container { height: 440px; width: 880px; margin: -225px auto; border: 2px solid yellowgreen; /*display: block;*/ box-sizing:border-box; overflow: scroll; } #log{ border:2px palegoldenrod; position:absolute; top:9%; right:0.5%; background-color:lightyellow; height: 430px; /* 设置固定高度 */ width: 310px; /* 设置固定宽度 */ font-size: 16px; /* 设置默认字体大小 */ resize: none; /* 其他样式属性 */ } .red-text { color: red; }
06-01
根据你提供的 CSS 代码，我没有看到任何明显的问题，但这些代码只是样式的一部分，也没有包括 HTML 代码，因此很难确定滚动条不工作的原因。不过，我注意到你在 `ul.head` 中设置了 `overflow: hidden;`，这可能会...
display属性值有哪些_css3属性之box-sizing
weixin_27741699的博客
02-01 379
面试中被问到了这个属性。定义了 user agent应该如何计算一个元素的总宽度和总高度属性值分别有哪些？content-box：width只包含内容的width ===标准盒子模型 .box{ box-sizing: content-box; background-color: lightskyblue; width: 1...
float动态布局遇到的box-sizing问题
^璐三岁要耍蓅氓♡
05-14 248
做了个展示页面，希望根据浏览器的宽度动态布局item的大小和数量： @media screen and (max-width: 2560px) { .col { width: calc(100% / 5); } } @media screen and (max-width: 2048px) { .col { width: calc(100% / 4); } } @media screen and (max-width: 1680px) { .col { wid
css---float、display、padding、margin
weixin_30762087的博客
01-01 82
float可以使块级标签堆叠，出现在同一水平上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ ...
CSS中的内边距、box-sizing与背景颜色
chenyiboke的博客
11-02 5651
1.内边距 1. 什么是内边距： 内容区域与边框之间的距离 特点：会扩大元素边框所占用的区域。 2. 语法： padding：value； 单边设置： padding-top/right/bottom/left:value; 取值： 1. 单位可以为：px 2. 单位可以为：% 3. 简洁写法： padding:value；四个方向的内边距 padding：v1 v2; v1...
padding float position border display概念总结
m0_57446284的博客
01-12 260
一、padding padding是定义元素内容和元素边框之间的空间，也就是上下左右的内边距 实例图（理解起来更轻松一些）： 他主要有上下左右四个方向 padding:25px 50px 75px 100px; 代表的意思是：上25px、右50px、下75px、左100px（按照顺时针的顺序记即可） padding:25px 50px 75px; 代表的意思是：上25p、左右50px、下75px（左右合一了） padding:75px 120px; 代表的意思是：上下75px、
display常用属性及inline元素之间的空白和padding的问题
zyl_lyr1019的专栏
11-07 3827
本文主要对display 的几种最常用的方法进行了分析，分别为none，block，inline-block，inline，inherit。 其中主要分析了inline时，两个连续行内元素之间出现空白，以及行内元素占据空间等问题。 W3C规定： display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 d
CSS的display属性值+position:fixed应用：创建弹窗...
hhhh
03-31 1216
display 属性规定元素应该生成的框的类型。 属性值列表如下： vue的if-show的底层代码就是通过display：none实现 和 visibility 属性区别在：把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 使用display：table清除浮动 ...
【css布局】display、position、float、overflow
你关注了我，是个概率极低的事件......
09-06 606
css布局主要有两种方式：传统的布局方式是基于盒状模型，目前广泛使用的是基于flex布局。本文主要介绍盒状模型的三个最基本的概念display、position、float，这算是盒状模型的基础中的基础了。   一、块级元素与行内元素： 1、块级元素：p、ul、form、div 2、内联元素（行内元素）：span、input 3、两者区别：块级元素会从上到下垂直排列，内联元素在一行中...
display属性详解及用法
热门推荐
橘猫吃不胖的博客
11-06 1万+
display属性详解 1 block、inline、inline-block 2 flow-root 3 table、inline-table 4 flex、inline-flex 5 none 6 list-item 7 contents 8 grid、inline-grid
关于前端position属性和display属性，这篇文章已足够
岩浆李的游鱼
06-30 6651
在我初学前端的时候，对position和display，尤其是flex特别的混乱，故总结一套，希望能帮助到有需要的同学。这里我想特别告诫一下移动端学习web的同学，例如position:relative，web端叫相对定位，意思是这个属性加在一个元素上，这个元素就使用相对定位的规则在ui上去渲染；而不是和移动端那样设置了相对布局，子布局里都按相对布局去排列，和移动前端还是有很大的差别的，只要记住相对定位和相对布局是有区别的。 一、关于position属性 1.1、position:static 默认值，没
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白夜下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值