CSS布局之左右布局与左中右布局

方法:为子元素设置浮动,然后在其父元素上使用clearfix类来清除浮动。代码示例:


html部分:
<div class="parent clearfix">
<div class="child">a</div>
<div class="child">b</div>
<div class="child">c</div>
</div> CSS部分:
.child{
float: left;
}
.clearfix::after {
display: block;
content: '';
clear: both;
}

水平居中

子元素为内联元素、单个块状及多级块状元素布局方案不同,具体总结如下:

  1. 内联元素:对父元素设置text-align: center;
  2. 单个块状元素:对子元素设置margin: 0 auto;
  3. 多个块状元素:有三种方式
    a、子元素全部设置为display: inline-block;,父元素设置为text-align: center;
    b、flex布局,父元素display: flex; justify-content: center;
    c、如果是在多行各自居中,直接给子元素设置margin: 0 auto;

垂直居中

子元素为单行内联、多行内联及块状元素布局方案不同,具体总结如下:

  1. 单行内联元素:父元素高度一定,设置line-height等于height
  2. 多行内联元素:父元素设置:display: table-cell; vertical-align: middle;
  3. 块状元素:1、固定高度的块级元素:通过绝对定位元素距离顶部50%,并设置margin-top为向上偏移元素高度的一半


    2、未知高度的块级元素:借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现

一些小技巧

  • 合理使用伪元素
  • a标签去掉其默认样式时,颜色可设置为继承父元素a{color:inherit;}
  • 合理使用max-width属性

来源:https://segmentfault.com/a/1190000017482862

CSS阶段总结的更多相关文章

  1. 关于Html+css阶段学习总结

    一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...

  2. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02

    HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...

  3. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  4. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  5. CSS项目学习总结

    1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实 ...

  6. HTML5课程大纲/学习路线

    HTML5课程大纲/学习路线 这是什么? 这个一个HTML技术路线的课程大纲/学习大纲. 你能用它做什么? 如果你是找工作的人, 利用本大纲, 你可以学习HTML5语言, 做一个HTML前端工程师, ...

  7. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  8. 《后端也要懂一点前端系列》使用webpack搭建项目

    今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路.由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js.html.css阶段, ...

  9. 从零搭建react+ts组件库(封装antd)

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

随机推荐

  1. E. Sergey and Subway

    比赛时候写复杂了…… 我写的是 计算每个节点树内所有点到某个点的距离和. #include <bits/stdc++.h> using namespace std; typedef lon ...

  2. django中表变更后migrate无效的问题

    问题描述: 已有的model,修改之后,想重新建模,于是将migrations文件夹中除__init__.py之外其他文件都删掉,再次执行以下步骤python manage.py makemigrat ...

  3. HTML5 移动端头部标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  4. [原创][SW]TortoiseSVN创建本地版本控制

    1. 简介 TortoiseSVN是一个Windows平台下的Subversion用户端软件,以Windows shell extension的方式写成.它是自由软件,以GNU通用公共许可证发布.(f ...

  5. 洛谷——P1216 [USACO1.5]数字三角形 Number Triangles

    P1216 [USACO1.5]数字三角形 Number Triangles 题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以走到左 ...

  6. GitBook一个专注于帮助文档的工具

    官网:https://www.gitbook.com GitHub组织:https://github.com/gitbookio GitBook一个专注于帮助文档的工具,比如: 1.简单的左侧列表右侧 ...

  7. 字符串(NSString)及常见字符串处理函数

    从本系列文章的开始,我们就使用过字符串对象,但是我们却还没有比较详细的介绍过它.使用@符,再一对双引号将一组字符串引用起来,例如: @”In fact, Objective-C is very sim ...

  8. 邁向IT專家成功之路的三十則鐵律 鐵律二十三:IT人的成家之道-樸實

    根據內政部一份2013年最新的調查報告指出台灣人的離婚率位居全球第三,想想看如果這是經濟成長率的排名表現那該有多好.然而究竟為何在台灣這塊小小的土地上,不僅離婚非常高而且晚婚的人也非常的多,其原因肯定 ...

  9. 转帖:HttpStatusCode状态说明C#版

    Continue 等效于 HTTP 状态 100.Continue 指示客户端可能继续其请求. SwitchingProtocols 等效于 HTTP 状态 101.SwitchingProtocol ...

  10. 点击选中/取消选中flag

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...