DESKTOP-5IV8P69_20210523-王宁

日志4

一、知识总结

1.块元素居中显示:margin

2.内边距:padding(不能为负数)

1、盒子模型

模型定义 :margin、border、padding、content

组成:content box:

​ padding box:

​ border box:

​ margin box:

标准盒模型

注: margin 不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空 间。盒子的范围到边框为止 —— 不会延伸到margin。

替代盒模型

默认浏览器会使用标准模型。如果需要使用替代模型,您可以通过为其设置 box-sizing: border box 来实现。

盒子模型和内联盒子

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子,例如由 元素创建的 那些就是内联盒子。

2、display

display属性的值:

block:元素呈现块元素特征,此元素前后会带有换行符

inline:元素呈现行内元素特征,元素前后没有换行符

inline-block:元素呈现行内并保持宽和高的属性,行内块元素

none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空间。

display:inline-block

(1)是一个特殊的值,它在内联和块之间提供了一个中间状态。

(2)设置 width 和 height 属性会生效。 padding , margin , 以及 border 会推开其他元素。

背景样式(background)
.box { 
background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
url(big-star.png) center no-repeat, rebeccapurple; 
} 

背景颜色(background-color )

(1)transparent 指定背景颜色应该是透明的。这是默认

(2)inherit 指定背景颜色,应该从父元素继承

背景图片

(1)background-image 属性允许在元素的背景中显示图像.

(2)默认情况下,大图不会缩小以适应方框,因此我们只能看到它的一个小角,而小图则是平铺以填充方 框。

(3)如果除了背景图像外,还指定了背景颜色,则图像将显示在颜色的顶部。

控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:

​ no-repeat — 不重复。

​ repeat-x —水平重复。

​ repeat-y —垂直重复。

​ repeat — 在两个方向重复。

调整背景图像大小

background-size 属性,它可以设置长度或百分比值,来调整图像的大小以适应背景 也可以使用关键字:

cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。

contain — 浏览器将使图像的大小适合盒子内。

背景图像定位(background-position)

注意:默认背景位置为(0,0)

background-position-x:

background-position-y:

渐变背景

linear-gradient 线性梯度渐变,延伸到整个盒子上

radial-gradient 有一个固定的大小,因此会重复 ,圆形

多个背景图片

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); 
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right; 123

背景附加

要素:(1)scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背 景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。

(2)fixed : 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始 终保持在屏幕上相同的位置。

background-chip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下 面。

值:

border-box 背景延伸至边框外沿(但是在边框下层)

padding-box背景延伸至内边距( padding )外沿。不会绘制到边框处。

content-box 背景被裁剪至内容区(content box)外沿

3、处理不同方向的文本

书写模式

writing-mode 的三个值分别是:

horizontal-tb : 块流向从上至下。对应的文本方向是横向的。

vertical-rl : 块流向从右向左。对应的文本方向是纵向的。

vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

4、溢出
<style> 
    .box {
        border: 1px solid #333333; 
        width: 200px; 
        height: 80px; } 
</style> 
<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出现 溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。</div> <p>此内容在方框之外。</p> 

overflow属性

(1)overflow 属性是你控制一个元素溢出的方式。

(2)overflow 的默认 值为 visible ,这就是我们的内容溢出的时候,我们在默认情况下看到它们的原因。

(3)值

visible :默认值。内容不会被修剪,会呈现在元素框之外。

hidden :隐藏掉溢出。其余内容是不可见的。

scroll :显示滚动条,即使没有足够多引起溢出的内容

auto :如果内容需要被修剪,则浏览器会显示滚动条以便查看其余的内容

你可以用 overflow 属性指定x轴和y轴方向的滚动,同时使用两个值进行传递。如果指定了两个 关键字,第一个对 overflow-x 生效而第二个对 overflow-y 生效。否则, overflow-x 和 overflow-y 将会被设置成同样的值。例如, overflow: scroll hidden 会把 overflow-x 设置成 scroll ,而 overflow-y 则为 hidden

5、修饰字体文字

color:字体颜色

font-size:字体大小,通常用像素(px)来定义大小

font-weight:字体粗细

bold 加粗

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

font-family:字体

font-style:

​ -normal - 文本正常显示

​ - italic - 文本斜体显示

​ -oblique - 文本倾斜显示

text-decoration:字体加横线 (none 无 underline 下划线 、 overline 上划线 、 line-through 贯穿线 )

text-align:字体所处位置 (left 、 right 、center 、 inherit 继承父元素的text-align属性值)

text-indent:首行字的缩进 (使用em)

text-shadow:3px 4px 5px #AAA阴影

3px向右偏移的像素值

4px向下偏移的像素值

5px 模糊效果

AAA 阴影颜色

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

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

- sub 垂直对齐文本的下标。

- super 垂直对齐文本的上标

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

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

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

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

- text-bottom 把元素的底端与父元素字体的底端对齐。

overflow: hidden; ——溢出隐藏

white-space: nowrap;—— 空白部分 不换行

text-overflow: ellipsis; ——溢出的文本变成省略号

6、阴影(box-shadow )

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

7、透明度

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

8、鼠标样式

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

例:cursor: url(xxx),auto;

二、心得体会

今天学习的css方面基本掌握,内容有点多,感觉挺充实,就是累。

三、疑问解答

1、如何将一个圆和图片结合在一起?

2、做完图有的空隙消除不了?

标签

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