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

二、心得体会

今天讲的东西不是很难,但是实际操作的问题很多,需要好好琢磨,做东西前一定要理清思想,有利于程序的完成。还有就是天天坐在电脑跟前脖子有点吃不消。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1