Skip to main content

4 posts tagged with "css"

View All Tags

CSS3 相比于 CSS2 多了哪些属性?

详情请见:CSS Backgrounds and Borders Module Level 3 (csswg.org)

下面只列入部分常见以及常用属性:

  • 布局(flex 弹性布局、Grid 网格布局)
  • 背景(backgroundbackground-imagebackground-repeatbackground-originbackground-clip等)
  • 边框(border-imageborder-radius 等)
  • 颜色(可以用 RGBAHSL 两种颜色指定方法,也可也使用渐变指定)
  • 渐变(渐变 linear-gradient、径向渐变 radial-gradient
  • 过渡(transition
  • 形变、变换(transform
  • 动画(animation
  • 媒体查询(@media@import,这个属性是响应式设计的关键部分)
  • 文字(个性化字体 @font-face、文字装饰 text-stroke-color 、文字溢出 text-overflow

Flex 布局有哪些属性?分别代表什么意思?

指定容器为 flex 布局:

.box {
display: flex;
}

容器的属性有以下 6 个:

  • flex-direction:决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap:(flex-wrap属性定义,如果一条轴线排不下,如何换行)
flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow:(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
  • justify-content:(justify-content属性定义了项目在主轴上的对齐方式)
justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items:(align-items属性定义项目在交叉轴上如何对齐)
align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content:(align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

什么是 BFC

详情请见:块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局,而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一 BFC 的块级元素之间。

布局设计:顶部固定,下方滚动页面

设计方法有很多种,言之有理即可,当前给出 flex 弹性布局的写法。

注意: css 写法采用的是内联样式,当 main 中内容超过页面高度时候会展示滚动条进行页面滚动。

<body
style="display: flex;
flex-direction: column;
height: 100vh;"
>
<header
style="
min-height: 100px;
width: 100%;
border: 1px solid black;
"
></header>
<main
style="
flex: 1;
overflow-y: scroll;"
>
<div>内容区域</div>
</main>
</body>