css一周学习总结

最新推荐文章于 2024-09-30 08:51:48 发布

luckyxinxinziYa

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量30

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/luckyxinxinziYa/article/details/133846209

版权

字体样式

字体样式
- css 字体
  - 字体样式
    - font-style:narmal正常 italic斜体
  - 文本字体
    - font-family
      - 文本字体
        可以自己下载字体 font-weight
        字体粗细
        normal正常 bold粗体 bolder特粗体
    - 字体大小
      - font-size
        常用px或者百分比来表示，不允许出现负值
    - 字体行高
      - line-height
        行高和高一样高
    - 复合属性：可以把属性写在一块
      - CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性
    - 引入外部字体
      - <style type="text/css">
- css 文本属性
  - 多行文本省略
  - 文本缩进
    - text-indent
      - 将段落第一行进行首行缩进
  - 文本对齐
    - text-align
      - left：内容左对⻬，center：内容居中对⻬，right：内容右对⻬，justify：内容两端对⻬，对最后⼀⾏⽆效， text-align-last: justify;对最后一行生效
      - justify 对最后一行不生效解决此问题：
  - 文本修饰
    - text-decoration
  - 单词间距
    - word-spacing设置英文单词之间的间距 normal正常用长度间隔 px
  - 文本间距
    - letter-spacing
      - 设置字符之间的间距 normal正常用长度值间隔 px
  - 文本换行
    - word-wrap
      - 让文字换行
      - normal默认值 break-word进行换行
  - 自动换行
    - word-break
      - normal浏览器默认的，
      - break-all 允许换行,
      - keep-all只能在半角空格或连字符处换行
  - 不允许文字换行
    - white-space
    - nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。
  - 溢出用省略号代替
    - text-overflow:ellipsis
  - 文字阴影
    - text-shadow
    - 语法：text-shadow: x-shadow y-shadow blur color;
  - 盒子阴影
    - box-shadow属性向框添加一个或多个阴影
  - 拓展如下：
  - 单行文本省略
  - 多行文本省略
  - 单行文本垂直居中
  - 多行文本垂直居中
伪类和伪元素
- 伪类：伪类⽤于向某些选择器添加特殊的效果
  - 超链接伪类4种
    - a:link {color:#FF0000;} /* 未访问的链接 */
    - a:visited {color:#00FF00;} /* 已访问的链接 */
    - a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    - a:active {color:#0000FF;} /* 已选中的链接 */
  - 其他常见的伪类选择器：focus :checked :first-child :last-child等
- 元素获取
  - 伪元素不是真正的元素，不存在与⽂档之中，所以 js ⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作。
- first-letter：伪元素⽤于向⽂本的⾸字⺟设置特殊样式:p::first-letter {color: red;}
  - 其他常见的伪元素选择器
    - ::first-line 首行，
    - ::first-letter 首字母，
    - ::before 元素前插入，
    - ::after 元素后插入
- 列表样式
  - list-style属性设置顺序：list-style-type, list-style-position, list-style-image。默认值为：disc outside none。
    - list-style-type的几个属性：默认值: disc（实⼼圆）circle（空⼼圆）square（⽅形）decimal（0开头的数字标记）lower-roman（小写罗马数字）upper-roman（大写罗马数字）
    - list-style-position:设置在何处放置列表标记
      - 默认值：outside，inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
    - list-style-image：设置使⽤图像来替换列表项的标记
      - none 不指定图⽚，默认内容标记将被 list-style-type 代替
        url 使⽤绝对或相对地址指定列表项标记图⽚，如果图像地址⽆效，默认内容标记将被 list-style-type 代替
表格样式
- width:设置宽度
- height:设置高度
- border：设置边框粗细
- border-collapse:collapse 设置表格的边框是否被折叠成一个单一的边框或隔开
- text-align:⽔平⽅向对⻬⽅式，它的值： left | center | right
- vertical-align:垂直⽅向对⻬⽅式，它的值：top | middle | bottom
- display和overflow
- display: 属性规定元素应该⽣成的框的类型
  - none 不显示元素
  - block 转换为块元素
  - inline 转换为行内元素
  - inline-block 转换为行内块元素
  - table-cell 转换为table中的td格式，可以设置文字垂直方向的对其方式vertical-align: bottom;
  - 用法：
- overflow:属性规定当内容溢出元素框时发⽣的事情
  - visible 不变
  - hidden 超出隐藏
  - scroll 滚动条显示内容
  - auto 超出显示滚动条
css盒模型和box-sizing
- 盒模型的构成
  - 宽度 width 高度 height
  - padding 内边距
  - border 边框
  - margin 外边距
- border-radius 改变弧度上右下左
- box-sizing
  - content-box:元素的宽度 = 设置宽度 + 边框宽度 + 内边距
  - border-box:元素的宽度 = 设置宽度 - 边框宽度 - 内边距
  - 用法：
- outline 内边框可以改变线的颜色比如：百度边框的黑色变成蓝色
- 背景属性
- 定义：
- background-color属性
  - - color_name 颜色名称，比如red
    - hex_number 十六进制颜色，比如#ff000
    - transparent 默认，透明背景
    - rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)
  - background-image 背景图片
  - background-repeat 背景平铺方式：设置是否重复背景图像。
    - repeat 默认值，⽔平垂直⽅向上平铺
    - no-repeat 不平铺
    - repeat-x ⽔平⽅向平铺
    - repeat-y 垂直⽅向平铺
  - background-attachment 背景图片固定方式：设置背景图像是否固定或者随着⻚⾯的其余部分滚动
    - scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
    - fixed 当页面的其余部分滚动时，背景图像不会滚动
  - background-position 背景图片位置：设置背景图像的起始位置
  - background-size 背景图片尺寸：规定背景图像的尺寸
    - length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"
    - percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
    - cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    - contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
  - background-origin 背景图片显示区域：规定 background-position 属性相对于什么位置来定位注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果
    - padding-box 默认值，背景图像相对于内边距定位
    - border-box 背景图像相对于边框定位
    - content-box 背景图像相对于内容边框定位
  background-clip规定背景的绘制区域
- 取值：
- border-box 默认值，背景填充全部
- padding-box 背景填充不包括边框
- content-box 背景只填充内容部分
- background复合属性
- 雪碧图/精灵图：就是将很多很多的小图标放在一张图片上,就称之为雪碧图 png格式
  - 优势:1.将多张图片合并到一张图片中，可以减小图片的总大小。
  - 2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
  - 网页性能优化（提高页面打开速度）
  - 1.尽量使用png图片，并且对png图片进行压缩
  - 2.减少页面中的css文件
  - 3.css文件的格式压缩（去除css页面中的空格和换行）
  - 4.使用精灵图
- 阿里巴巴矢量图
  - 2种方法将图标转换成字体样式的
    - 1.加入购物车，下载代码，下载文件，解压文件，把里面的css和ttf粘贴到当前写的代码文件夹里，在代码里找到对应的要显示的图标复制代码 link永远写到title下面
    - 2.加入购物车，下载至项目里面复制代码，link必须在 title下面写
弹性盒子
1.把内容设置为弹性盒子，需要给父元素添加 display:flex 子元素就会在一行显示，默认不换行
2.父元素-容器，子元素-项目，水平方向-主轴，垂直方向-交叉轴
3.主轴：justify-content：flex-end,center,space-between,space-around,space-evenly
4.交叉轴：flex-wrap=wrap 换行
align-content:flex-end,center,space-between,space-around,space-evenly
定位属性（position）
定义：position 属性指定了元素的定位类型（定位必须要有方向词 left top right bottom)
取值：
static 静态定位【默认值】
relative 相对定位
absolute 绝对定位
absolute 绝对定位
sticky 粘性定位
1.static 静态定位【默认值】：
HTML 元素的默认值，即没有定位，遵循正常的⽂档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
2.relative 定位
相对定位元素的定位是相对自身的正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
移动相对定位元素，但它原本所占的空间不会改变。
3.absolute 定位
绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于文档定位。相对于网页。
absolute 定位使元素的位置与⽂档流⽆关，因此不占据空间。
absolute 定位的元素和其他元素重叠。（父相子绝）
3.fixed 定位
元素的位置相对于浏览器窗⼝是固定位置。
即使窗⼝是滚动的它也不会移动。
4.sticky 定位
基于⽤户的滚动位置来定位
在未滚动出目标区域时，类似 position:relative;
当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。
堆叠的元素
元素的定位与⽂档流⽆关，所以它们可以覆盖⻚⾯上的其它元素
z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前⾯，或后⾯）
⼀个元素可以有正数或负数的堆叠顺序
元素的显示隐藏：
1.display:none
2.height:0/width:0; overflow:hidden
3.opcity:0