领跑计划Day006Css

Posted 2021-12-07 师兄白泽

文章目录

• Css盒模型
• • 1.background
  • 2.边框border
  • 3.轮廓outline
  • 4.边距margin&padding
  • 5.链接a：
  • 6.列表list-style

Css盒模型

1.background

1. background-color

   • 有效的颜色名称 - 比如 “red”
   • 十六进制值 - 比如 “#ff0000”
   • RGB 值 - 比如 “rgb(255,0,0)”

2. background-image

   body {
     background-image: url("paper.gif");
   }
   

   默认情况下，图像会重复，以覆盖整个元素。

3. background-repeat

   背景是否重复

   1. no-repeat 不重复
   2. repeat-x x轴方向重复
   3. repeat-y y轴方向重复

4. background-attachement

   指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

   1. 滚动

      body {
        background-image: url("tree.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: scroll;
      }
      

   2. 不滚动

      body {
        background-image: url("tree.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
      }
      

5. background-position

   背景定位用于指定背景图像的位置

   background-position: right top;/*右上*/
   

   /* Keyword values */
   background-position: top;
   background-position: bottom;
   background-position: left;
   background-position: right;
   background-position: center;
   
   /* <percentage> values */
   background-position: 25% 75%;
   
   /* <length> values */
   background-position: 0 0;
   background-position: 1cm 2cm;
   background-position: 10ch 8em;
   
   /* Multiple images */
   background-position: 0 0, center;
   
   /* Edge offsets values */
   background-position: bottom 10px right 20px;
   background-position: right 3em bottom 10px;
   background-position: bottom 10px right;
   background-position: top right 10px;
   
   /* Global values */
   background-position: inherit;
   background-position: initial;
   background-position: unset;
   

6. background-clip

   设置背景填充哪部分

   1. Border-box

      填充边框

   2. Content-box

      填充内容

   3. Padding-box

      填充padding

可以通过opacity设置透明度

2.边框border

1. border-width

   边框宽度px/em

2. border-style

   边框风格

   none		和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
   hidden		和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
   dotted		显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
   dashed		显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
   solid		显示为一条实线。
   double		显示为一条双实线，宽度是 border-width 。
   groove		显示为有雕刻效果的边框，样式与 ridge 相反。
   ridge		显示为有浮雕效果的边框，样式与 groove 相反。
   inset		显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。
   outset		显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。

3. border-color

   边框颜色

   rgb

   十六进制

   transparent 透明

4. border-redius

   边框圆角

3.轮廓outline

1. outline-style

   none

   无轮廓 (outline-width 为0).

   dotted

   轮廓为一系列点.

   dashed

   轮廓为一系列短线.

   solid

   轮廓为实线.

   double

   轮廓为两根有空隙的线. outline-width 为线与空间的总和.

   groove

   轮廓呈凹下状.

   ridge

   与groove相反: 轮廓呈凸起状.

   inset

   轮廓呈嵌入状.

   outset

   与inset相反: 轮廓呈突出状.

2. Outline-width

   与border相同

3. Outline-color

   与border相同

4.边距margin&padding

1. 内边距

   padding

   • padding-top
   • padding-right
   • padding-bottom
   • padding-left

   属性值：

   • length - 以 px、pt、cm 等单位指定内边距
   • % - 指定以包含元素宽度的百分比计的内边距
   • inherit - 指定应从父元素继承内边距

   简写：

   div {
     padding: 25px 50px 75px 100px;
   }
   div {
     padding: 25px 50px 75px;
   }
   div {
     padding: 25px 50px;
   }
   div {
     padding: 25px;
   }
   

2. 外边距

   margin

   • margin-top
   • margin-right
   • margin-bottom
   • margin-left

   属性值：

   • auto - 浏览器来计算外边距
   • length - 以 px、pt、cm 等单位指定外边距
   • % - 指定以包含元素宽度的百分比计的外边距
   • inherit - 指定应从父元素继承外边距

   简写：

   p {
     margin: 25px 50px 75px 100px;
   }
   p {
     margin: 25px 50px 75px;
   }
   p {
     margin: 25px 50px;
   }
   p {
     margin: 25px;
   }
   

5.链接a：

• a:link - 正常的，未访问的链接
• a:visited - 用户访问过的链接
• a:hover - 用户将鼠标悬停在链接上时
• a:active - 链接被点击时

注：

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

6.列表list-style

1. list-style-type

   列表的风格（样式）

2. list-style-position

   outside

   表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。

   inside

   表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本

3. list-style-image

   将图像指定为列表项标记