20210523

​ ** 日志**

一、知识总结

1、 盒子模型

盒模型的各个部分:

Content box: 用来显示内容,大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性
设置。

标准盒模型和替代盒模型

实例:

<head>
    <meta charset="utf-8">
    <title></title>
<style type="text/css">
    .mydiv{
        width: 500px;
        height: 300px;
        border: solid aqua;
        padding: 0px 60px 50px 30px;
    }
    .mydiv1{
        width: 500px;
        height: 300px;
        border: solid red;
        padding: 10px 10px 20px;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="mydiv">今天又是新的一天
    </div>
    <div class="mydiv1">
    </div>
</body>

2、盒子模型和内联盒子

3、display

display属性的值:
block:元素呈现块元素特征,此元素前后会带有换行符
inline:元素呈现行内元素特征,元素前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空间。

background-color:背景颜色

background-image:背景图片

4、 控制背景平铺的属性:

no-repeat :不重复。
repeat-x :水平重复。
repeat-y :垂直重复。
repeat : 在两个方向重复。

5、 调整背景图像的大小

background-size属性:

cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。
contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
比不同,则可能在图像的任何一边或顶部和底部出现间隙。

6、 背景图像定位:background-position

属性:top 和 right

7、渐变背景

linear-gradient 线性梯度渐变,延伸到整个盒子上
radial-gradient 有一个固定的大小,因此会重复

8、background-clip
background-clip 设置元素的背景是否延伸到边框、内边距盒子、内容盒子下
面。
值:
border-box 背景延伸至边框外沿(但是在边框下层)
padding-box 背景延伸至内边距( padding )外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区(content box)外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API,请尽量不要在生产环境中使用它。)

9、CSS中的书写模式
writing-mode 的三个值分别是:
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
因此, writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下,要么是从
右到左,要么是从左到右。而这决定了文本的方向。

10、溢出内容

实例:

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .doc {
            font-size: 24px;
            color: #8A2BE2;
            font-weight: 400;

}


随着科学技术的发展,计算机网络已经融入我们生活的方方面面。这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出现
溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。

此内容在放框内。


11、overflow属性

visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容
auto 如果内容需要被修剪,则浏览器会显示滚动条以便查看其余的内容。

12、css的值

长度(length)

13、修饰字体文字

color:字体颜色
font-size:字体大小,通常用像素(px)来定义大小
font-weight:字体粗细

bold 加粗

normal 正常

100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold

font-famliy:字体

Serif 字体

Sans-serif 字体

Monospace 字体

Cursive 字体

Fantasy 字体
font-style:字体风格

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示
text-decoration:字体加横线

none 无

underline 下划线

overline 上划线

line-through 贯穿线

blink 文本闪烁
text-align:字体所处位置

left

right

center

inherit 继承父元素的text-align属性值
line-height:行高,一般要纵向居中设置为 height 的高度
text-indent:首行字的缩进 建议用em(缩进多少倍数)做为单位
text-shadow:3px 4px 5px #AAA阴影 (CSS3的效果)

3px向右偏移的像素值

4px向下偏移的像素值

5px 模糊效果

AAA 阴影颜色

vertical-align 设置元素的垂直对齐方式。

baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。
/* 溢出文本处理 */

​ oerflow: hidden; /* 溢出部分 隐藏 /
​ white-space: nowrap; / 空白部分 不换行 /
​ text-overflow: ellipsis; / 溢出的文本变成省略号 /

13、阴影

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离。
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影改变阴影内侧阴影

14、透明度

opacity 用于设置元素的透明度, 值的范围是 0~1 。1 为不透明, 0 为完全透明

15、鼠标样式

cursor 属性用于定义鼠标样式,可选值有: pointer 、 wait 、 help 、 copy 、 crosshair

二、心得体会

通过今天的学习,知道了更多背景相关的设计以及字体的各种修饰。听的时候感觉还行,但是太复杂的思路有点乱,代码混乱,导致做不出来。

标签

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