博客
关于我
前端笔记整理(CSS)
阅读量:767 次
发布时间:2019-03-23

本文共 1905 字,大约阅读时间需要 6 分钟。

前端基础知识

前端开发是Web应用开发的核心环节,涉及HTML、CSS和JavaScript的结合与应用。作为初次接触前端开发的技术人员,掌握基础知识是立足的关键。

定位

在CSS中,position: absolute; 定位模式是基于父元素的定位系统。如果你使用 Flexbox 或 CSS Grid,则父元素也需要明确设定定位模式(relativeabsolute)。绝对定位的元素会被脱离文档流,类似于静态定位以外的第一个定位元素,这一点在Flex布局中尤为重要。

CSS盒模型

CSS盒模型可以用盒子来描述布局,核心是盒子模型。box-sizing属性有两种模式:

  • content-box:标准盒模型,元素的宽高等于内容尺寸。
  • border-box:怪异盒模型,元素的宽高等于内容尺寸加上内边距和边框大小。

浮动与清除

浮动具有其特殊性,如果未处理,会导致布局问题。常用的清除方法有三种:

  • .clearfix:通过使用伪元素布局表格结构清除内容。
  • overflow:hidden 和**display: -inline-block**:将浮动元素变为行内框。
  • position:absolute 或**fixed**:将浮动元素移出普通流。
  • CSS3新特性

    CSS3 引入了诸多新特性,提升了设计和布局的能力。

    transition与animation

    • transition:需要触发事件才能更改属性(如点击、hover),提供2帧过渡效果。
    • animation:在无事件触发下,发生自定义的时间表反应动画,可以进行每帧处理。

    实用性特性

    • word-wrap:处理长文字不自动换行。
    • text-shadow:为文本添加阴影效果。
    • 渐变gradient:支持多种颜色渐变方式。
    • transform:支持拉伸、缩小、旋转等变换操作。
    • calc():允许在布局中执行数学计算。

    Flexbox布局

    Flexbox是现代布局的主要工具,简化了多样布局的实现。

    基本属性

    • flex-direction:默认为行内排列,可通过rowcolumn等设置列型布局。
    • justify-content:对齐方式,如centerspace-between等。
    • align-items:对齐方式,如centerflex-start等。
    • flex-wrap:控制元素的换行方式,如wrapnowrap

    继承

    想要实现自适应布局,可以通过 Flexbox或 CSS Grid,提升开发效率。

    其他提升

    水平垂直居中可以通过多种方式实现,Flex布局是最简单的:

    .item {    display: flex;    justify-content: center;    align-items: center;}

    对位布局而言,使用 Absolute定位也是常见选择,如下:

    .item {    position: absolute;    width: 100%;    height: 100%;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

    我倡导使用Flexbox,因为它对新手更友好,且代码简洁。对于对位布局,可以根据具体需求判断是否采用。

    在移动端开发中,使用rem单位以根元素为基准,可以进行布局,同时确保适配不同分辨率屏幕。

    最值得推荐的布局模式是基于Flexbox的圣杯布局,适用于两边宽度固定、中间自适应的场景,如下:

    .container {    min-width: 550px;    font-size: 20px;}.column {    height: 300px;    position: relative;    overflow: hidden;}.left {    width: 200px;    margin-left: -200px;}.right {    width: 150px;    margin-left: -150px;}

    另一个优雅的解决方案是基于Flexbox的双飞翼布局,代码简洁度更高:

    .container {    min-width: 500px;}.column {    float: left;}.center {    margin-left: 200px;    margin-right: 150px;}

    在实际开发中,使用Flexbox比浮动更简单,且更容易调试和维护。在多栏布局场景下,共享-space的效果也更为自然。

    转载地址:http://bmezk.baihongyu.com/

    你可能感兴趣的文章
    mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
    查看>>
    mysql 导入导出大文件
    查看>>
    MySQL 导出数据
    查看>>
    mysql 将null转代为0
    查看>>
    mysql 常用
    查看>>
    MySQL 常用列类型
    查看>>
    mysql 常用命令
    查看>>
    Mysql 常见ALTER TABLE操作
    查看>>
    MySQL 常见的 9 种优化方法
    查看>>
    MySQL 常见的开放性问题
    查看>>
    Mysql 常见错误
    查看>>
    mysql 常见问题
    查看>>
    MYSQL 幻读(Phantom Problem)不可重复读
    查看>>
    mysql 往字段后面加字符串
    查看>>
    mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
    查看>>
    MySQL 快速创建千万级测试数据
    查看>>
    mysql 快速自增假数据, 新增假数据,mysql自增假数据
    查看>>
    MySql 手动执行主从备份
    查看>>
    Mysql 批量修改四种方式效率对比(一)
    查看>>
    Mysql 报错 Field 'id' doesn't have a default value
    查看>>