日志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、做完图有的空隙消除不了？