文章目录
一、尺寸与颜色单位
1. 尺寸单位
- px 像素单位
- % 百分比，参照父元素对应属性的值进行计算
- em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
- rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px
2. 颜色单位
- 英文单词：red，green，blue
- rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
- rgba(r,g,b,alpha) 三原色每种取值0255，alpha取值0（透明）1（不透明）
- 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围09，af
例：red rgb(255,0,0) #ff0000 - 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
例：#000 #fff #f00
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围09，af
2. CSS 盒模型
1. 内容尺寸
-
一般情况下，为元素设置width/height，指定的是内容框的大小
-
内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：
取值 作用 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条
2. 边框
1. 边框实现
语法：
border:width style color;
边框样式为必填项，分为：
| 样式取值 | 含义 |
|---|---|
| solid | 实线边框 |
| dotted | 点线边框 |
| dashed | 虚线边框 |
| double | 双线边框 |
2. 单边框设置
分别设置某一方向的边框，取值：width style color;
| 属性 | 作用 |
|---|---|
| border-top | 设置上边框 |
| border-bottom | 设置下边框 |
| border-left | 设置左边框 |
| border-right | 设置右边框 |
3. 网页三角标制作
- 元素设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见色
4. 圆角边框
- 属性：border-radius 指定圆角半径
- 取值：像素值或百分比
- 取值规律：
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下，左右保持一致
5. 轮廓线
- 属性：outline
- 取值：width style color
- 区别：边框实际占位，轮廓不占位
- 特殊：取none可以取消文本输入框默认轮廓线
6. 盒阴影
- 属性：box-shadow
- 取值：offsetX offsetY blur (spread) color;
- 使用：
不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向
offsetX 取像素值，阴影的水平偏移距离
offsetY 取像素值，阴影的垂直偏移距离
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影是否需要延伸
color 设置阴影颜色,默认为黑色
3. 内边距
- 属性：padding
- 作用：调整元素内容框与边框之间的距离
- 取值：
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
- 单方向内边距,只能取一个值：
padding-top
padding-right
padding-bottom
padding-left
4. 外边距
- 属性：margin
- 作用：调整元素与元素之间的距离
- 特殊：
1）margin:0; 取消默认外边距
2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
3）margin:-10px;元素位置的微调 - 单方向外边距：只取一个值
margin-top
margin-right
margin-bottom
margin-left - 外边距合并：
1）垂直方向
1. 子元素的margin-top作用于父元素上
解决：
为父元素添加顶部边框；
或为父元素设置padding-top:0.1px;
2. 元素之间同时设置垂直方向的外边距，最终取较大的值
2）水平方向
块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示
带有默认边距的元素：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
5. 元素最终尺寸的计算
盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局
属性：box-sizing
取值：content-box/border-box
1）标准盒模型计算：各个属性值累加得到最终尺寸
box-sizing:content-box;
元素设置width/height指定的是内容框的大小
最终尺寸 = width/height+padding+border+margin
2）特殊盒模型计算（按钮元素）：
box-sizing:border-box;
元素设置width/height指定的是包含边框在内的区域大小
最终尺寸 = width/height+margin
作业：
在横向导航栏的基础上，调整导航项的边距
-
整体导航栏水平居中
2. 导航项之间10px的外边距
超链接css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hover</title>
<style>
#d1{
width:200px;
height: 200px;
background-color:red;
/* 过渡 当元素的样式发生变化时可以在指定的时间内完成*/
/* tarnsition发生变化的样式 完成变化的时间 速度*/
/* transition: width 2s,height 2s; */
/* linear表示匀速 从开始到结束一致 */
transition: all 2s linear;
}
/* 鼠标滑过d1时产生的效果 */
#d1:hover{
width: 400px;
height: 400px;
background-color: black;
}
#d2{
font-size: 40px;
}
#d2:hover{
color: red;
transition: all 0.5s ;
/* 鼠标滑过时变成手 */
cursor:pointer;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">超级会员</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>link</title>
<style>
/* 为所有超链接定义样式 */
a{
/* text-decoration:underline; */
/* 取消超链接的下划线 */
text-decoration: none;
}
/* 超链接访问前 */
a:link{
background-color: green;
}
/* 超链接访问后 */
a:visited{
color: blue;
}
/* 鼠标滑过超链接 */
a:hover{
/* 添加下划线 */
text-decoration: underline;
}
a:active{
background-color: red;
}
</style>
</head>
<body>
<div></div>
<a href="http://tmooc.cn" target="_blank">Tmooc</a>
</body>
</html>
display用法 块元素 行内块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span{
/* display设置元素的显示方式 */
/* #将span以块元素的方式显示 */
/* display:block; */
/* 将span以行内块方式显示 */
/* display: inline-block; */
/* display:取值none不显示 */
display: none;
width: 200px;
height: 200px;
background-color: red;
}
input{
width: 300px;
}
div{
width: 200px;
height: 200px;
}
.d1{
background-color: rgb(17, 17, 17);
display: inline-block;
}
.d2{
background-color: rgb(4, 245, 4);
display: inline-block;
}
.d3{
background-color: rgb(255, 0, 157);
display: inline-block;
}
</style>
</head>
<body>
<span>你好a啊
<sub>©</sub>
<sup>©</sup>
</span>
<b>nihoa</b>
姓名:<input type="text">
<button>click me</button>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div{
width: 200px;
height: 200px;
/* 注意先后顺序后定义的恢复该先定义的 */
/* 点线 */
/* border: 5px dotted #000; */
/* 虚线 */
/* border: 5px dashed #000; */
/* 双线边框 */
/* border: 5px solid #000;
border-top:5px solid #f00; */
/* border-top-color: darkgreen;单独设置上边框元素 */
/* border-bottom-color: transparent; 透明色 */
/* } */
div{
width:0px;
height:0px;
border: 50px solid transparent;
border-top-color: #000;
/* border: 50px solid #000;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent; */
}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
来源：CSDN
作者：ambition_star
链接：https://blog.csdn.net/ambition_star/article/details/103705288