标签：盒子 color 元素 height width background JAVA border CSS
盒子模型
- 构成
-
- 盒子厚度border——边框
-
- 填充厚度padding——内边距
-
- 与其他盒子距离margin——外边距
边框border
- border-width：边框宽度
- border-color：边框颜色
- border-style：边框样式 参数如下
none：没有边框
solid：边框为单实线————最常用
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
- 合并写法：border：width color style
<style>
div{
width: 200px;
height: 200px;
text-align: center;
border-width: 10px;
border-color: darkgrey;
border-style: double;
}
.hao{
border: 2px blue solid;
}
.mi{
border-top: 2px red dashed;
border-bottom:2px green dashed ;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
<hr>
账号：<input type="text" class="hao"> <br>
密码：<input type="password" class="mi"> <br>
圆角边框
- 格式：border-radius 参数如下
50% ———— 圆
20px ———— 一般情况
10px 40px ———— 左上角和右下角
10px 40px 80px ———— 左上角 右上角和右下角
10px 40px 80px 100px ————左上右上右下左下
<style>
div{
width: 200px;
height: 100px;
border-width: 2px;
border-color: #01800b;
border-style: dashed;
}
.he1{
border-radius: 100px;
}
.he2{
border-radius: 20px 40px;
}
.he3{
border-radius: 20px 40px 60px;
}
.he4{
border-radius: 20px 40px 60px 80px;
}
</style>
</head>
<body>
<div class="he1"></div> <br>
<div class="he2"></div><br>
<div class="he3"></div><br>
<div class="he4"></div>
内边距padding
- 定义：就是内容到边框的距 padding 参数如下
10px———— 上下左右
10px 30px————上10下30
10px 30px 40px———上10左右30下40
10px 30px 40px————上右下左（顺时针）
外边距margin
- 外边距可以实现盒子居中
条件
- 必须是块级元素
- 必须指定宽度width
- 左右外边距设置为auto
div{
width: 200px;
height: 100px;
border: 2px cornflowerblue solid;
padding: 30px;
background-color: pink;
margin: 30px auto;————————————设置盒子居中
text-align: center;————————————设置文本在div中居中
line-height: 80px; ——————————设置行高使文字在盒子中居中
}
- margin:0 auto———————— 让这个div自己在大容器中居中
- text-align: center————————让这个div内部文本居中
外边距合并问题
- 定义：当上下相邻的两块元素相遇时 上面块元素有下边距margin-bottom 下面块元素有上边距margin-top时 他们之间的距离不是两个距离之和 而是较大的距离
空间尺寸 = width + border + padding + margin
内盒尺寸 = width + border + padding
- 注意：如果一个盒子没有指定width宽度 则不会影响盒子宽度
<style>
#l1{
width: 300px;
height: 300px;
background-color: cornflowerblue;
margin: 30px;
border: 2px red solid;
}
#l2{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="l1">
<div id="l2"></div>
</div>
盒子阴影
- 格式：box-shadow ：水平阴影 垂直阴影 模糊距离 阴影大小 颜色 内外阴影
- 注意
- 1. 前两个必须写 后面的可以省略
- 2. 默认为外阴影
div{
width: 300px;
height: 300px;
border: 2px lightslategrey solid;
margin: 60px;
box-shadow: 5px 5px 10px 10px rebeccapurple;
}
浮动
- CSS定位机制有三种：标准文档流 浮动和定位
标准文档流：
- 块级元素————独占一行
- 行内元素———— 不独占一行
display————可以内联 在一行
div{
width: 200px;
height: 200px;
background: pink;
display:inline-block;
}
- 缺点：块元素之间有空隙
浮动
- 定义：设置了浮动属性的元素会脱离标准流的控制 移动到其父元素中指定的位置 不占位置
div{）
width: 200px;
height: 200px;
background: pink;
float: left;
}
- 需要添加父元素
- 注意：子浮动不会压住父亲的padding 不会超出border
- 一个父盒子里 若有一个子盒子有浮动 则需要所有的子盒子都浮动 才能一行对齐
.fu1{
width: 1400px;
height: 200px;
background-color: darkgrey;
margin: 10px;
}
.zi1{
width: 500px;
height:150px ;
background-color: greenyellow;
margin: 30px;
float: left;
}
行内元素和块级元素在添加浮动之后 具有行内块的特性
- 行内块特性：一行可以放多个元素 有宽度和高度 盒子的大小是由内容决定的
前提条件：不给出width宽度
<style>
div{
height: 200px;
background-color: pink;
float: left;
margin: 10px;
}
span{
height: 100px;
background-color: lightskyblue;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div>爱情公寓1</div>
<div>爱情公寓2</div>
<span>爱情公寓3</span>
<span>爱情公寓5</span>
爱情公寓5
清除浮动
- 由于浮动元素不再占用标准文档流的位置 所以它会对后面的元素排版产生影响
注意：清除浮动是清除产生的影响 并不是真的清除浮动 - 清除浮动本质：清除父级元素因为子元素浮动引起的内部高度为0的问题
- 叫闭合浮动更形象：把浮动的盒子圈在里面 让盒子闭和出入口 不影响其他元素
很多情况下 嵌套父级元素不需要给高度 由子元素自行决定
————问题：当子元素浮动时 脱离标准流 而父盒子没有高度时 不会被撑开盒子 下面的元素就会跑到上面来
————解决方法：三个 如下
1. 额外标签法
- clear —— 参数：left right both（常用）
- clear使用方法：在浮动的盒子后面添加一个空的div盒子 css里添加clear
<style>
.box1{
width: 600px;
background-color: pink;
}
.z1{
width: 300px;
height: 200px;
background-color: skyblue;
float: left;
}
.z2{
width:450px;
height: 200px;
background-color: lightseagreen;
float: left;
}
.box2{
width: 500px;
height: 300px;
background-color: lightgreen;
}
.kong{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="z1"></div>
<div class="z2"></div>
<div class="kong"></div>
</div>
<div class="box2"></div>
2. 父级添加overflow属性
- 用法： 在父级css中添加overflow：hidden
.box1{
width: 600px;
background-color: pink;
margin: 0 auto;
overflow: hidden;
}
3. after伪元素
:after{
content: '';
display: block;
clear: both;
}
定位
元素的定位主要分为定位模式和边偏移两部分
- 定位模式+边偏移——完整定位
边偏移
- 定义：向某个方向进行偏移 参数如下
top——向上
bottom——向下
left——向左
right——向右
定位模式
- position ： 参数如下
自动定位——static
- 定义：就是在文档中的默认位置
- 一般用于清除定位
div {
width: 300px;
height: 200px;
background-color: pink;
top: 100px;
left: 200px;
position: static;
}
相对定位——relative
- 定义： 相对于其文档流的位置进行定位
- 通过边偏移 以元素左上角为原点 移动位置
注意：相对定位的盒子仍在标准流中 不脱标！！！占有位置
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
}
#two{
background-color: lightskyblue;
left: 150px;
position: relative;
}
</style>
</head>
<body>
<div></div>
<div id="two"></div>
<div></div>
绝对定位——absolute
- 定义： 相对于第一个已经定位的元素（父级元素）进行定位
-
注意：绝对定位的盒子脱标！！！ 不占位置
- 1. 若父级元素没有定位 则以浏览器为准进行定位
- 2. 若父级元素有定位（任何定位均可） 则以最近的已定位的父级元素为准 在父级元素内移动定位
子绝父相
子元素用绝对定位————————保证子元素在父级元素中
父级元素用相对定位 —————————保证父级元素不脱离标准流 仍占有位置
.father{
width: 300px;
height: 300px;
background-color: lightskyblue;
position: relative;
}
.son{
width: 150px;
height: 80px;
background-color: lightpink;
position: absolute;
top: 15px;
left: 15px;
}
固定定位——fixed
- 定义： 相对于浏览器窗口进行定位
- 1. 与父级元素无关 只以浏览器为标准进行定位
- 2. 完全脱标！！！不沾位置
<style>
.father,div{
width: 500px;
height: 500px;
background-color: lightskyblue;
margin: 100px auto;
}
img{
position: fixed;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="father">
<img src="淘宝.jpg" alt="图片" width="200">
</div>
<div></div>
<div></div>
z-index
- 定义：调整重叠元素的叠放顺序 取值可为整数负数或者0
- 1. 最后一个元素在最上面
- 2. 取值越大 此元素在层叠元素中的位置越靠上（默认值为0）
- 3. 数字后面不加任何
- 4. 只有相对定位 绝对定位 固定定位有这个属性
<style>
div{
width: 200px;
height: 200px;
background-color: lightpink;
position: absolute;
top: 0;
left: 0;
}
div:first-child{
z-index: 1;
}
div:nth-child(2){
background-color: lightblue;
top: 60px;
left: 60px;
z-index: 2;
}
div:nth-child(3){
background-color: lightgreen;
top: 120px;
left: 120px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
追JAVA的小菜鸟
发布了46 篇原创文章 · 获赞 1 · 访问量 692
私信
关注
标签：盒子,color,元素,height,width,background,JAVA,border,CSS 来源： https://blog.csdn.net/qq_45673367/article/details/104044264
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。