CSS笔记（二）

最新推荐文章于 2023-04-15 11:32:59 发布

坑爹坑钱坑你妹°

最新推荐文章于 2023-04-15 11:32:59 发布

阅读量197

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_53612668/article/details/120481594

版权

11、css的高度（height）和宽度（width）
   height 和 width 属性不包括内边距、边框或外边距。
   它设置的是元素内边距、边框以及外边距内的区域的高度或宽度
   属性值：
       auto - 默认。浏览器计算高度和宽度。
       length - 以 px、cm 等定义高度/宽度。
       % - 以包含块的百分比定义高度/宽度。
       initial - 将高度/宽度设置为默认值。
       inherit - 从其父值继承高度/宽度。

   重点：
       设置max-width：内容可以根据浏览器窗口的大小来调整,可以完全显示内容
       设置min-height：垂直方向上的效果
       而，如果单单设置width，浏览器会默认添加水平移动栏，拖动移动栏可以显示

12、CSS 框模型
   所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
   CSS 框模型实质上是一个包围每个 HTML 元素的框。
   它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：
![](CSS笔记_files/1.jpg)
   元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。
   边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素

   重要提示：
       使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。
       要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

13、css 轮廓（outline-style）
       注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。
       同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

       属性：
           dotted - 定义点状的轮廓。
           dashed - 定义虚线的轮廓。
           solid - 定义实线的轮廓。
           double - 定义双线的轮廓。
           groove - 定义 3D 凹槽轮廓。
           ridge - 定义 3D 凸槽轮廓。
           inset - 定义 3D 凹边轮廓。
           outset - 定义 3D 凸边轮廓。
           none - 定义无轮廓。
           hidden - 定义隐藏的轮廓
   除非设置了 outline-style 属性，否则其他轮廓属性都不会有任何作用

   反转颜色
   下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的

   css outline简写：
       outline：width style（必须） color

   outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的

14、css 文本对齐：
   text-algin：（left、right，center）

   当 text-align 属性设置为 "justify" 后，将拉伸每一行，
   以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

   文本方向
   direction 和 unicode-bidi 属性可用于更改元素的文本方向
```
direction: rtl;
unicode-bidi: bidi-override;
```
   垂直对齐
   vertical-align(top、bottom right left) 属性设置元素的垂直对齐方式。

15、文字装饰：text-decoraition（overline 、line-through、underline）
   文本转换：text-transform（uppercase、lowercase、ca'pitalize）
   文字缩进：text-indent：50px
   字母间距:letter-spacing:30px
   行高：line-height：
   字间距:word-spacing:
   空白：white-space 属性指定元素内部空白的处理方式
   文字阴影效果：text-shadow：（2px 3px 5px red）-->水平垂直透明度颜色
   字体样式：font-style：
       normal - 文字正常显示
       italic - 文本以斜体显示
       oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
   字体粗细：font-weight：（normal，bold）
   字体变体：font-variant：（small-caps）

16、css 字体大小 font-size:
   font-size 值可以是绝对或相对大小。
   绝对尺寸：
       将文本设置为指定大小
       不允许用户在所有浏览器中更改文本大小（可访问性不佳）
       当输出的物理尺寸已知时，绝对尺寸很有用

   相对尺寸：
       设置相对于周围元素的大小
       允许用户在浏览器中更改文本大小

   响应式字体大小

       可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。
       这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：
       视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米



       font 属性是以下属性的简写属性：
       font-style（必须）
       font-variant:规定是否以小型大写字母的字体显示文本
       font-weight
       font-size/line-height
       font-family(必须)
17、css 图标
```
   <head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   <body>

   <i class="material-icons">cloud</i>
   <i class="material-icons">favorite</i>
   <i class="material-icons">attachment</i>
   <i class="material-icons">computer</i>
   <i class="material-icons">traffic</i>

   </body>
```

18、链接状态
   此外，可以根据链接处于什么状态来设置链接的不同样式。
   四种链接状态分别是：
   a:link - 正常的，未访问的链接
   a:visited - 用户访问过的链接
   a:hover - 用户将鼠标悬停在链接上时
   a:active - 链接被点击时

```
/* 未被访问的链接 */
a:link {
color: red;
}

/* 已被访问的链接 */
a:visited {
color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}

/* 被选择的链接 */
a:active {
color: blue;
}
```
如果为多个链接状态设置样式，请遵循如下顺序规则：

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

19、有序列表及无序列表
   list-style-type 属性指定列表项标记的类型
   图像作为列表项标记
   list-style-image：url（）

   在使用简写属性时，属性值的顺序为：
   list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
   list-style-position（指定列表项标记应显示在内容流的内部还是外部）
   list-style-image（将图像指定为列表项标记）

20、table表格
   默认样式都会有双边框：
       border-collapse 属性设置是否将表格边框折叠为单一边框
   可悬停表格：
       设置：hover
   隔行变色：
       设置:nth-child(even)奇数行
   创建响应式表格，请用 overflow-x:auto 的容器元素（比如 div）包围表格元素,可以自适应屏幕
```
<div style="overflow-x:auto">
<table>
</table>
</div>
```

坑爹坑钱坑你妹°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记（二）

11、css的高度（height）和宽度（width） height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度属性值： auto - 默认。浏览器计算高度和宽度。 length - 以 px、cm 等定义高度/宽度。 % - 以包含块的百分比定义高度/宽度。 initial - 将高度/宽度设置为默认值。 inherit - 从其父值继承...
复制链接

扫一扫