03-CSS
一. 选择器(续)
1. CSS优先级
- 读取顺序, 相同的选择器, 渲染相同的属性,但是值不同, 会按照读取顺序,后声明的样式优先, 但不同属性不会受到影响
div{
color:red;
font-size:24px;
}
div{
color:yellow;
background-color:pink;
}
- 指定大于继承: 在css样式中,有一些属性是具有继承性的, 如: 字体颜色, 字体大小, 字体样式等; 如果制定了该元素样式, 那么继承的样式会被覆盖
.word{
color: green;
}
.sp{
color: pink;
}
.word>.sp -- 嵌套关系
- 权重值: id权重值100 > 类选择器权重值 10 > 元素选择器权重值 1
权重值累加之后做比较
.d1{
color:red;
font-size: 28px;
}
#d{
color:yellow;
background-color: pink;
}
/*权重值的累加*/
.word .sp{color: orange;} /*权重值: 20*/
.word span{color:blue;} /* 权重值: 11*/
- 内联样式 > 内部样式 和 外部样式
二. 尺寸和边框
1. 宽度和高度
元素的尺寸实际上就是设置宽度和高度
width
: 宽度
height
: 高度
取值: 数值+单位
1.1 尺寸单位
- css中, 只有0可以不加单位, 其他的尺寸都要添加单位
- px : 像素, 绝对单位, 在PC端使用
- % : 指父元素尺寸的百分比, 相对于父元素的宽度
- 注意: 当父元素是body的时候, body默认高度是无限的,元素的高度不能用百分比
- em: 以父元素的取值为一个基本单位, 1em = 父元素的取值
- 10px === > 1em=10px 2em=20px 3em = 30px;
- rem: 以html的取值为一个基本单位, 1rem = html的取值
- 页面中默认 1rem = 16px;
1.2 html中允许设置尺寸的元素
块级元素 | 行内元素 | 行内块元素 |
---|---|---|
设置尺寸有效 | 设置尺寸无效 | 设置尺寸有效 |
div,p,ul,li, h1-h5 | span,i,b,s,u,sel,ins | img, input,button |
默认宽, 父元素宽度100%;不设置高, 默认高度: ① 没有内容,高度为0②有内容,高度被内容撑开 | 默认宽度和高度靠内容撑开 | 一般有自己默认宽高, img图片:默认宽高是图片的大小; button和input都有自己的默认宽高, 一般需要重新修改; 行内块元素的宽度和高度都可以设置 |
1.3 颜色取值
颜色值应用非常广泛, 如: 背景色, 字体颜色, 边框颜色, 阴影, 渐变 …
- 英文单词: red; blue; yellow; green; transparent “透明色”
- 十六进制颜色值 #rrggbb — 不区分大小写
- 取值范围: 0-9 a-f
- 取值: rr 红色范围 gg绿色范围 bb 蓝色范围
- 举例: #ff0000 — 红色 #00ff00 — 绿色 #0000ff—蓝色
#ffffff — 白色 #000000— 黑色- 缩写: 每两个色值一样,可以只写一个: #f00 — 红色 #0f0—绿色
- rgb()色值
- rgb() 是一个函数, r代表红色, g代表绿色, b代表蓝色
- 括号里有传递三个参数, 参数取值范围:0-255之间的数值
eg: rgb(255,0,0) — 红色 rgb(0,255,0) — 绿色 rgb(0,0,255) — 蓝色- rgba() : a指透明度, 取值范围0-1; 0 :完全透明, 1完全不透明
2. 边框
边框在元素的外层, 宽度和高度的外面, 一般的元素没有边框, 但是个别元素自带边框: input, button…
2.1 边框的组成
边框宽度: border-width
边框样式: border-style: solid 实线; dashed 虚线; dotted:点状线,double:双实线
边框颜色: border-color
简写: border: 宽度 样式 颜色; (空格不能省略)
2.2 边框的方向
边框的四个方向可以分开写:
border-top: 上边框
border-right: 右边框
border-bottom: 下边框
border-left: 左边框
2.3 去除元素的边框
border: 0; 将所有的边框都去掉
input, button标签常可能去掉边框
2.4 边框的倒角
将元素的直角倒成圆角
border-radius: 数值+单位; 设置四个角的圆角
- 单角的圆角
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-right-radius: 右下角
border-bottom-left-radius: 左下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的边框</title>
<style>
.d1{
width: 100px;
height: 100px;
border: 5px solid #f00;
border-top-left-radius: 0;
border-top-right-radius: 80%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 80%;
}
.btn{
width: 98px;
height: 50px;
border: 0;
}
</style>
</head>
<body>
<div class="d1"></div>
<button class="btn">普通按钮</button>
</body>
</html>
三. 内外边距和盒子模型
1. 内边距
padding: 宽度和高度以外,边框以内的部分
1.1 语法
padding: 数值+单位; 数字不能是负值
内边距会使元素扩大, 内边距占据元素的颜色
1.2 方向
内边距有四个方向,分别是: 上 右 下 左内边距
- padding-top:10px;
- padding-right:10px;
- padding-bottom: 10px;
- padding-left: 10px;
1.3 简写
1个值: padding:20px ; 四个方向都一样
2个值: padding:20px 20px; 上下 左右
3个值: padding:20px 20px 20px; 上 左右 下
4个值: padding:20px 20px 20px 20px; 上 右 下 左
1.4 特点
在标准的盒子模型中, 内边距是占据元素空间的, 增加内边距会让整个元素变大
会影响页面的布局
2. 外边距
外边距指的是元素与其相邻的兄弟元素之间的距离,位置在元素的边框以外, 因为不属于元素本身,所有不会拥有元素的颜色
2.1 语法
margin: 数值+单位; 数值可以是负值
特点: 以元素的左上角为原点, 一切以左上角开始
2.2 方向
内边距有四个方向,分别是: 上 右 下 左内边距
- margin-top:10px;
- margin-right:10px;
- margin-bottom: 10px;
- margin-left: 10px;
2.3 简写
1个值: margin:20px ; 四个方向都一样
2个值: margin:20px 20px; 上下 左右
3个值: margin:20px 20px 20px; 上 左右 下
4个值: margin:20px 20px 20px 20px; 上 右 下 左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
div{
width: 100px;
height: 100px;
}
.d1{background-color: red;}
.d2{
background-color: green;
/* 取值为正, 元素向下移动; 取值为负,元素向上移动*/
margin-top: 10px;
/* 取值为正, 相邻元素向下移动 ; 取值为负, 相邻元素向上移动 */
margin-bottom: 50px;
/* 取值为正,元素向右移动; 取值为负,元素向左移动 */
margin-left:-50px;
/* 取值为正,相邻元素向右移动; 取值为负值, 相邻元素向左移动 */
margin-right:10px;
/*总结: 上左外边距移动自己, 右下边距挤开兄弟*/
}
.d3{
background-color: orange;
/* display: 元素的显示方式
inline-block: 以行内块方式显示(既可以设置宽高, 有可以在一行内显示)
*/
display: inline-block;
margin-right:-50px;
}
.d4{background-color: blue;display: inline-block ;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>
2.4 外边距四个方向的移动
/* 取值为正, 元素向下移动; 取值为负,元素向上移动*/
margin-top: 10px;
/* 取值为正, 相邻元素向下移动 ; 取值为负, 相邻元素向上移动 /
margin-bottom: 50px;
/ 取值为正,元素向右移动; 取值为负,元素向左移动 /
margin-left:-50px;
/ 取值为正,相邻元素向右移动; 取值为负值, 相邻元素向左移动 */
margin-right:10px;
/总结: 上左外边距移动自己, 右下边距挤开兄弟/
2.5 自带外边距的元素
body 自带上下左右 8px的外边距
ul, ol, p, h1-h6 都有外边距
做项目时2,一般要让元素使用我们自己设置的样式,所以我们会将默认内外边距清零
*{
margin:0;
padding:0;
}
2.6 margin的auto属性值
margin:auto; 指的是
块级元素
在其父元素
左右两侧外间距一样, 就是在父元素中水平居中
<style>
.father{
width: 100%;
height: 200px;
background-color: red;
border-top: 1px solid #000;
}
.son{
width: 100px;
height: 100px;
background-color: #8EE1FF;
margin:50px auto;
}
</style>
<!-- margin:auto-->
<div class="father">
<div class="son"></div>
</div>
2.7 外边距合并现象
当两个元素垂直相邻, 两个元素都有外边距, 并且渲染的是两个元素之间的距离, 以最大值为显示效果
<style>
.d2,.d3{width: 200px;height: 200px;}
.d2{background-color: green;margin-bottom: 50px;}
.d3{background-color: orange; margin-top:100px;}
</style>
<body>
<h2>元素外边距合并现象</h2>
<div class="d2"></div>
<div class="d3"></div>
</body>
2.8 外边距重叠效果
父级元素的第一个块级子元素和最后一个块级子元素, 都会和父元素的上下边重合, 因此: 当第一个子元素或者最后一个子元素有上下外边距时, 因为贴合父元素导致发生移动的不是子元素而是父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距重叠效果</title>
<style>
.father{
width: 100%;height: 600px;background-color: red;
/*border-top:1px solid #000;*/
}
.son1,.son2,.son3{width: 200px;height: 200px;}
/*由于子元素上边与父元素上边重合,所有移动的不是子元素, 而是父元素*/
.son1{background-color: #8EE1FF;margin-top:50px;}
.son2{background-color: orange;}
.son3{background-color: green;}
/*解决方式:给父级添加伪类 */
.father::before{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="father">
<!-- <table></table>-->
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
2.9 元素分类
块级元素: 可以设置四个方向的外边距, 并且生效
行内元素: 上下外边距不生效, 左右外间距生效
行内块元素: 可以设置四个方向的外边距, 并且生效
3. 盒子模型
标题 |
---|
最内部: 内容(宽度和高度) – 蓝色区域 |
内边距: padding四个方向 – 淡绿色区域 |
边框: border四个方向 – 蛋黄色区域 |
外边距: margin四个方向 — 橙色区域 |
标准盒子模型中:
元素的宽度: 元素左右外边距 + 左右边框 + 左右内边距 + 内容宽度
元素的高度: 元素上下外边距 + 上下边框 + 上下内边距 + 上下高度
怪异 盒子模型:
box-sizing : border-box;
<style>
.box{
width: 100px;height: 85px;border:1px solid #000;
padding:10px;
box-sizing: border-box;
}
</style>
<h2>怪异盒子模型</h2>
<div class="box">
文字文字文字文字文字文字文字文字文字文字文字文字
</div>