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

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


  1. html部分:
  2. <div class="parent clearfix">
  3. <div class="child">a</div>
  4. <div class="child">b</div>
  5. <div class="child">c</div>
  6. </div>
  7. CSS部分:
  8. .child{
  9. float: left;
  10. }
  11. .clearfix::after {
  12. display: block;
  13. content: '';
  14. clear: both;
  15. }

水平居中

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

  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为向上偏移元素高度的一半


    1. 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. python学习之-- 生成唯一ID

    以下以2种方法生成唯一ID def uuid_method(): """第一种方法""" import uuid return str(uu ...

  2. HDU 5046 Airport【DLX重复覆盖】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5046 题意: 给定n个城市的坐标,要在城市中建k个飞机场,使城市距离最近的飞机场的最长距离最小,求这 ...

  3. OceanBase数据库实践入门——手动搭建OceanBase集群

    前言 目前有关OceanBase功能.案例.故事的文章已经很多,对OceanBase感兴趣的朋友都想安装一个数据库试试.本文就是分享初学者如何手动搭建一个OceanBase集群.这也是学习理解Ocea ...

  4. 数组对象(NSArray和NSMutableArrray)

    Objective-C中除了可以使用C中的基本数组外,如int[5],char word[] ={‘a’,'b’,'c’};Foundation还提供了NSArray类.Foundation是有序的对 ...

  5. OpenGL step to step(2)

    这是一个类似于地球绕太阳旋转的demo 原有的例子是用键盘接受事件,我做了修改,使用了timer把他变成一个动态旋转的 #import <Foundation/Foundation.h> ...

  6. phpcms v9中 action=&quot;position&quot; 和action=&quot;lists&quot;有什么差别, 以及action 的属性和值

    action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表

  7. Oracle-31-对视图DML操作

    一.对视图进行DML操作 1.创建一个视图v_person create or replace noforceview v_person as select *from person where id ...

  8. Go Programming Blueprints 读书笔记(谈到了nsq/mgo处理数据持久化,可是业务逻辑不够复杂)

    Go Programming Blueprints http.Handle("/", &templateHandler{filename: "chat.html& ...

  9. 关于Swiper(概念)

    Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话). 主要使用于移动端的网站.移动web apps,native apps和hybrid apps. ...

  10. Asp.Net初学小结 判断数组中是否有重复的数据

    Asp.Net初学小结   第一章   1.搭建Asp.net开发环境   1).net FrameWork(VS) 2)IIS(xp:5.1,2003:6.0,vista:70,win7:7.5)  ...