20210523
日志
一、知识总结
1、外边距
margin 属性设置元素的外边距
1.设置四周填充一致
margin: value;
2.让块元素横向居中显示
margin: value auto;
3.让块元素横向居中显示
margin: value auto;
4.外边距折叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>
</body>
</html>
2、内边距
padding 属性设置元素的填充
设置四周填充一致
padding: value
3、盒子模型的组成
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。
4、替代（IE）盒模型
.box {
box-sizing: border-box;
}
5、 display属性的值
block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。
6、使用display: inline-block
display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。
7、背景颜色
background-color: 属性定义了CSS中任何元素的背景颜色。
| 值 | 描述 |
|---|---|
| color | 指定背景颜色。eg: #567895 black rgb(255,255,255) rgba(255,255,255,.5) hsl(h 色相 0 到 360, s 饱和度 0% 为灰色， 100% 全色, l 亮度 0% 为暗, 50% 为 普通, 100% 为白) hsla() |
| transparent | 指定背景颜色应该是透明的。这是默认 |
| inherit | 指定背景颜色，应该从父元素继承 |
1.背景图片
background-image ：属性允许在元素的背景中显示图像.
2.控制背景平铺
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
3.调整背景图像的大小
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。
contain — 浏览器将使图像的大小适合盒子内。
4.背景图像定位
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系
中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
5.渐变背景
linear-gradient 线性梯度渐变，延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1)
96%);
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1)
96%);
6.背景附加
scroll : 使元素的背景在页面滚动时滚动。
fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因
为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。
8、处理不同方向的文本
writing-mode 的三个值分别是：
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
9、溢出的内容
<style>
.box {
border: 1px solid #333333;
width: 200px;
height: 80px;
}
</style>
<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多，就会出现
溢出的情况。如果溢出设置为隐藏，则任何溢出都将不可见。</div>
<p>此内容在方框之外。</p>
10、 overflow属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条，即使没有足够多引起溢出的内容
auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。
11、CSS的值
绝对长度单位
| 单位 | 名称 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| Q | 四分之一毫米 |
| in | 英寸 |
| pc | 十二点活字 |
| pt | 点 |
| px | 像素 |
12、阴影
box-shadow 属性可以设置一个或多个下拉阴影的框
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离（程度） |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
13、透明度
cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair
二、心得体会
今天讲的东西不是很难，但是实际操作的问题很多，需要好好琢磨，做东西前一定要理清思想，有利于程序的完成。还有就是天天坐在电脑跟前脖子有点吃不消。
近期评论