标签：浮动 布局 元素 100px 设置 border CSS 属性
文章目录
一. 典型的盒子模型
1.1 border-radius 圆角边框
代码展示：
<DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>
1.2 border-style 属性
-
定义和用法
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。 -
可能的值：
1.3 border 属性
- 定义和用法
border 简写属性在一个声明设置所有的边框属性。 - 可能的值：
1.4 margin与padding
-
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 -
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 -
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。 -
说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
二. 元素分类
1.1 display
- 定义和用法
display 属性规定元素应该生成的框的类型。 - 块级元素和内联元素可以通过display进行相互转换：
1.2 块级元素
独占一行，可以设置宽和高
1.3 内联元素
不会自动换行，设置宽和高的时候是不起作用的
1.4 css 隐藏元素的方式
display:none;
width:0 height:0
三. float 浮动布局
-
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 -
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
-
可能的取值：
- left -------- 对象向左浮动，而后面的内容会**流向对象的右侧
- right--------------- 对象向右浮动，而后面的内容会流向对象的左侧
4. 清除浮动 - 定义和用法
clear 属性规定元素的哪一侧不允许其他浮动元素。 - 可能的取值：
四. position 定位布局
- 定义和用法
position 属性规定元素的定位类型。 - 说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 - 可能的取值
-
absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body
-
relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的值进行相对定位
-
代码展示
<html>
<head>
<style type="text/css">
*{
padding: 0; margin: 0;
}
.main{width: 300px;
height: 300px;
border:1px solid black;
margin: 200px;
position: relative;
}
.one{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px; left: 200px;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
}
.three{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="one">这是第一个div</div>
<div class="two">这是第一个div</div>
<div class="three">这是第一个div</div>
</div>
</body>
</html>
- 界面展示
标签：浮动,布局,元素,100px,设置,border,CSS,属性 来源： https://blog.csdn.net/qq3178535571/article/details/121691430
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。