一、盒子模型
1、边框
border可以设置元素的边框,边框有三部分组成:边框宽度、边框样式、边框颜色。语法:
border:border-width | border-style | border-color
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
-
边框复合写法没有规定的顺序
表格细线边框
border-collapse:collapse;
-
collapse是合并的意思
2、内边距
padding属性用于设置内边距,即边框与内容之间的距离
padding-left | 左内边框 |
padding-right | 右内边框 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding复合写法
padding:5px | 1个值,代表上下左右都有5像素内边距 |
padding:5px 10px; | 2个值,代表上下内边距都是5像素 左右内边距是10像素 |
padding:5px 10px 20px; | 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素 |
padding:5px 10px 20px 30px; | 4个值,代表上是5像素 下是20像素 左是30像素 顺时针 |
注意:padding也会影响到盒子的实际大小,会比实际大
3、外边距
margin属性用于设置外边距,即控制盒子与盒子之间的距离
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
嵌套块元素垂直外边距的塌陷
解决方案:
-
可以为父元素定义上边框
-
可以为父元素定义上内边框
-
可以为父元素添加overflow:hidden
4、清除内外边距
* {
padding:0; /*清楚内边距*/
margin:0; /*清楚外边距*/
}
5、圆角边框
border-radius
border-radius:lenth;
-
radius参数值可以用px为单位也可以用%为单位
-
如果是正方形,想要设置一个圆,把数据修改为高度或者宽度的一般即可,或者直接写成50%
-
如果是个矩形,设置为高度的一半就可以做
-
该属性是一个简写属性,可以跟四个属性值,分别是左上角、右上角、左下角、右下角
-
分开写border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius
<html>
<head>
<style>
div {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 10px;
}
</style>
</head>
<body>
<d
border-top-left-radiusiv></div>
</body>
</html>
6、盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
-
默认的是外阴影(outside),但是不能写这个单词,否则会导致阴影无效
-
盒子阴影不占用空间,不会影响其他盒子排列
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: #ffc0cb;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7、文字阴影
text-shadow:h-shadow v-shadow blur color;
属性:
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
二、CSS浮动
1、浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法:
选择器 {
float: 属性值;
}
属性:
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动特性:
-
脱标
-
脱离标准普通的控制(浮)移动到指定位置(动),俗称脱标
-
浮动的盒子不再保留原先的位置
-
-
如果设置了多个盒子均浮动,则它们会按照属性值——行内显示并且顶端对齐排列
-
浮动元素具有行内块元素的特点
注意:
-
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
-
一个盒子里有多个盒子,如果其中一个盒子浮动了,那么其他盒子也应该浮动,以避免出现问题
<html>
<head>
<title>浮动</title>
<style>
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one">浮动的盒子</div>
<div class="two">没有浮动的盒子</div>
</body>
</html>
2、清除浮动
语法:
选择器 {
clear:属性值;
}
属性:
left | 不允许左侧有浮动(清除左侧浮动的影响) |
right | 不允许右侧有浮动(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的ying'xiang |
方法:
(1)、额外标签法(隔墙法)
额外标签法会在浮动元素末尾添加一个空标签,例如<div style="clear.both"></div>,或者其他标签
-
优点:通俗易懂
-
缺点:添加许多无意义的标签,结构化较差
<html>
<head>
<title>浮动</title>
<style>
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float:left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">1</div>
<div class="box3">2</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
(2)、父级添加overflow属性
可以给父级添加overflow属性,将其值设置为hidden、auto、scroll
<html>
<head>
<title>浮动</title>
<style>
.box {
overflow: hidden;
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float:left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>
(3)、父级添加after伪元素
:after方式是额外标签的升级版,也是给父元素添加
-
优点:没有增加标签,结构更简单
-
缺点:低版本浏览器不支持
<html>
<head>
<title>浮动</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>
(4)、父级添加双伪元素
也是给父元素添加
-
优点:代码更简洁
-
缺点:低版本浏览器不支持
<html>
<head>
<title>浮动</title>
<style>
.clearfix:after,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>
三、定位
1、定义
定位是将盒子定在某一个位置,所以定位也是摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relatie相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 否(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 否(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
2、定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
3、边偏移
边偏移就是定位的盒子移动到最终位置,
top | top:80px | 顶端偏移量:定义元素相对于其父元素上下线的距离 |
bottom | bottom:80px | 底部偏移量:定义元素相对于其父元素上下边线的距离 |
left | left:80px | 左侧偏移量:定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量:定义元素相对于其父元素右边线的距离 |
4、静态定位
静态定位是元素的默认定位方式,无定位的意思。语法:
选择器 {
position:static;
}
-
静态定位是按照标准流特性摆放位置,它没有边偏移
-
静态定位在布局中很少用到
5、相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。语法:
选择器 {
position:relative;
}
特点:
-
它相对于自己原来的位置来移动的(移动的时候参照点是自己原来的位置)
-
原来在标准流的位置继续占有,后的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
6、绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。语法:
选择器 {
position:absolute;
}
特点:
-
如果没有祖先元素胡总和祖先元素没有定位,则以浏览器为准定位
-
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级有定位祖先元素为参考点移动位置
-
绝对定位不再占有原先的位置(脱标)
7、子绝父相
子级是绝对定位的话,父级要用相对定位
-
子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
-
父盒子需要加定位限制子盒子在父盒子内显示
-
父盒子布局时,需要占有位置,因此父亲只能是相对定位
8、固定定位
固定定位是元素固定于浏览器可视区的位置。语法:
选择器 {
position:fixed;
}
固定定位特点:
1、以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不跟随滚动条滚动
2、固定定位不在占有原先的位置
固定定位在版心右侧:
-
让固定定位的盒子left:50%。走到浏览器可视区的一半位置
-
让固定定位的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置
9、粘性定位
粘性定位可以认为是相对定位和固定定位的混合。语法:
选择器 {
position:sticky:10px;
}
特点:
-
以浏览器的可视窗口为参照点移动元素
-
粘性定位占有原先的位置
-
必须添加top、left、right、bottom其中一个才有效
<html>
<head>
<title>test</title>
<style>
body {
height: 3000px;
}
.nav {
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">导航栏</div>
</body>
</html>
10、定位的叠放次序
在使用定位布局时,可能会出现盒子重叠的情况,此时可使用z-index来控制盒子的前后次序(z轴)。语法:
选择器 {
z-index:1;
}
-
数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上
-
如果属性值相同,则按照书写顺序,后来者居上
-
数字后面不能加单位
-
只有定位的盒子才有z-index属性
四、元素的显示与隐藏
1、dispaly显示隐藏元素
display属性用于设置一个元素该如何显示
-
diaplay:none:隐藏对象
-
display:block:除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后不占有原先位置
2、visibility显示隐藏元素
让一个元素在页面中隐藏或者显示出来
-
visibility:visible:元素可见
-
visibility:hidden:元素隐藏
visibility隐藏元素后继续占有原先的位置
3、overflow溢出显示隐藏
让一个元素在页面中隐藏或显示出来
visible | 不剪切内容也不添加滚动条 |
hidden | 显示超过对象尺寸的内容,超过的部分隐藏 |
scroll | 不管有没有超出的内容,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |