JAVA前端————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>爱情公寓1div>
<div>爱情公寓2div>
<span>爱情公寓3span>
<span>爱情公寓5span>
爱情公寓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>