CSS学习总结

最新推荐文章于 2024-09-27 15:11:44 发布

芝芝不知

最新推荐文章于 2024-09-27 15:11:44 发布

阅读量94

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_45783772/article/details/118064816

版权

1.定义

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 决定着页面的布局及展示效果。

2.字体

font-family:一组有共同特征的字体
指定候选字体
text-decoration 可设置下划线等

3.盒模型

(1)margin
line-height 可增加文本行之间的间距；
background-image:设置背景图像；
background-repeat:设置平铺方式；
background-postion: 设置位置；
(2)id
一个元素只能有一个id，但可属多个类；
class属性可以成组指定样式；

4.块元素（block）和内联元素（inline）

块元素

常见块元素：div、p、address、blockquote、center、ul 、li、table、form、header、section、footer、h1 , h2 , h3 , h4 , h5 , h6
text-align属性：用来将块元素中的所有元素对齐。可有所有嵌套的块元素继承

内联元素

常见内联元素：a、font(em strong i)、img、span
与div类似，用于将相关内联元素和文本归组到一起
元素可有不同的状态如<a> 可用伪类为各个状态指定样式
伪类：link、visited、hover(悬停) 、active(活动的链接)

可变元素

(根据上下文关系确定该元素是块元素还是内联元素)：如 button

二者不同之处

块级元素 特点：

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽带始终是与浏览器宽度一样，与内容无关；
它可以容纳内联元素和其他块元素。
块元素默认没高度，有内容才会有高度。

内联元素 特点：
和其他元素都在一行上；
默认没高度和宽度，有内容才会有。
其宽度随着内容增加 ,高度随字体大小而改变
内联元素虽然不能设置宽高，但是设置成绝对定位（absolute）后，可以设置宽高。(内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。)
行内元素只能容纳文本或者其他行内元素。

利用display属性

display:block – 显示为块级元素
display:inline – 显示为内联元素
dipslay:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

5.布局与定位

在这里插入图片描述

3种布局

流体布局：内容自适应扩展的浏览器窗口
冻结布局：内容宽度固定
凝胶布局：宽度固定，外边距会随窗口扩展或收缩

4种定位（position属性）

静态定位(static) ：默认定位，元素正常流入
绝对定位(absolute)：允许指定绝对位置，默认相对页面页面边界放置
可以用z-index属性分层放置，使一个属性放置在另一个属性上面。z-index值越大，层次越高
相对定位(relative)：相对其外围包含元素来定位，元素仍在正常的页面流中，再按指定的量偏移元素
固定定位(fixed)：相对浏览器窗口定位，不会随页面滚动
补充：
1. 绝对、固定、相对定位，可用属性top、right、bottom、left指定元素位置
2. 浮动元素(float属性)放在块元素之上，不会影响页面流；内联内容会考虑浮动元素的边界，围绕这个浮动元素
3. 浮动元素必须要有特定的宽度，不能设置为auto

6.伪元素::after

::after {
    content: "";
    display: block;
    clear: both;
    }

7.flex布局（弹性布局）

设置

display: flex;
将对象作为弹性伸缩盒展示，用于块级元素
display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
webkit内核需要加前缀：-webkit

属性

flex_diection

决定主轴的方向，即弹性项目排列方向
row（默认值）：主轴为水平方向，起点左端
row-reverse：水平方向反转
column：主轴为垂直方向，起点上沿
column-reverse：垂直方向反转

justify_contect

主轴上的对齐方式
flex-start：左对齐（默认）
flex-end ：右对齐
center ：居中
space-between：两端对齐，两个弹性项目之间间隔相等
space-around ：平均分布在该行上，两边留有一半的间隔空间

align_items

弹性项目在纵轴上如何对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start：交叉轴（侧轴）（弹性盒容器）的起始位置对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐

flex_wrap

需要换行时设置
nowrap：默认不换行
wrap ：换行，第一行在上方
wrap-reverse：换行，第一行在下方

align_contecy

设置多行对齐
stretch：（默认）各行将会伸展以占用剩余的空间
flex-start：与交叉轴（侧轴）（弹性盒容器）的起始位置对齐。
flex-end：与交叉轴（侧轴）（弹性盒容器）的终点对齐。
center：与交叉轴（侧轴）（弹性盒容器）的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：各行在弹性盒容器中平均分布，两边留有一半的间隔空间