博客
关于我
前端笔记整理(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-触发器及创建触发器失败原因
    查看>>
    MySQL-连接
    查看>>
    mysql-递归查询(二)
    查看>>
    MySQL5.1安装
    查看>>
    mysql5.5和5.6版本间的坑
    查看>>
    mysql5.5最简安装教程
    查看>>
    mysql5.6 TIME,DATETIME,TIMESTAMP
    查看>>
    mysql5.6.21重置数据库的root密码
    查看>>
    Mysql5.6主从复制-基于binlog
    查看>>
    MySQL5.6忘记root密码(win平台)
    查看>>
    MySQL5.6的Linux安装shell脚本之二进制安装(一)
    查看>>
    MySQL5.6的zip包安装教程
    查看>>
    mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
    查看>>
    Webpack 基本环境搭建
    查看>>
    mysql5.7 安装版 表不能输入汉字解决方案
    查看>>
    MySQL5.7.18主从复制搭建(一主一从)
    查看>>
    MySQL5.7.19-win64安装启动
    查看>>
    mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
    查看>>
    MySQL5.7.37windows解压版的安装使用
    查看>>
    mysql5.7免费下载地址
    查看>>