CSS阶段总结
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;
}
水平居中
子元素为内联元素、单个块状及多级块状元素布局方案不同,具体总结如下:
- 内联元素:对父元素设置
text-align: center;
- 单个块状元素:对子元素设置
margin: 0 auto;
- 多个块状元素:有三种方式
a、子元素全部设置为display: inline-block;
,父元素设置为text-align: center;
b、flex布局,父元素display: flex; justify-content: center;
c、如果是在多行各自居中,直接给子元素设置margin: 0 auto;
垂直居中
子元素为单行内联、多行内联及块状元素布局方案不同,具体总结如下:
- 单行内联元素:父元素高度一定,设置
line-height
等于height
- 多行内联元素:父元素设置:
display: table-cell; vertical-align: middle;
块状元素:1、固定高度的块级元素:通过绝对定位元素距离顶部50%,并设置
margin-top
为向上偏移元素高度的一半2、未知高度的块级元素:借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现
一些小技巧
- 合理使用伪元素
- a标签去掉其默认样式时,颜色可设置为继承父元素
a{color:inherit;}
- 合理使用
max-width
属性
来源:https://segmentfault.com/a/1190000017482862
CSS阶段总结的更多相关文章
- 关于Html+css阶段学习总结
一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03
HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...
- 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...
- CSS项目学习总结
1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实 ...
- HTML5课程大纲/学习路线
HTML5课程大纲/学习路线 这是什么? 这个一个HTML技术路线的课程大纲/学习大纲. 你能用它做什么? 如果你是找工作的人, 利用本大纲, 你可以学习HTML5语言, 做一个HTML前端工程师, ...
- vue2.0自学笔记
前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...
- 《后端也要懂一点前端系列》使用webpack搭建项目
今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路.由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js.html.css阶段, ...
- 从零搭建react+ts组件库(封装antd)
为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...
随机推荐
- python学习之-- 生成唯一ID
以下以2种方法生成唯一ID def uuid_method(): """第一种方法""" import uuid return str(uu ...
- HDU 5046 Airport【DLX重复覆盖】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5046 题意: 给定n个城市的坐标,要在城市中建k个飞机场,使城市距离最近的飞机场的最长距离最小,求这 ...
- OceanBase数据库实践入门——手动搭建OceanBase集群
前言 目前有关OceanBase功能.案例.故事的文章已经很多,对OceanBase感兴趣的朋友都想安装一个数据库试试.本文就是分享初学者如何手动搭建一个OceanBase集群.这也是学习理解Ocea ...
- 数组对象(NSArray和NSMutableArrray)
Objective-C中除了可以使用C中的基本数组外,如int[5],char word[] ={‘a’,'b’,'c’};Foundation还提供了NSArray类.Foundation是有序的对 ...
- OpenGL step to step(2)
这是一个类似于地球绕太阳旋转的demo 原有的例子是用键盘接受事件,我做了修改,使用了timer把他变成一个动态旋转的 #import <Foundation/Foundation.h> ...
- phpcms v9中 action="position" 和action="lists"有什么差别, 以及action 的属性和值
action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表
- Oracle-31-对视图DML操作
一.对视图进行DML操作 1.创建一个视图v_person create or replace noforceview v_person as select *from person where id ...
- Go Programming Blueprints 读书笔记(谈到了nsq/mgo处理数据持久化,可是业务逻辑不够复杂)
Go Programming Blueprints http.Handle("/", &templateHandler{filename: "chat.html& ...
- 关于Swiper(概念)
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话). 主要使用于移动端的网站.移动web apps,native apps和hybrid apps. ...
- Asp.Net初学小结 判断数组中是否有重复的数据
Asp.Net初学小结 第一章 1.搭建Asp.net开发环境 1).net FrameWork(VS) 2)IIS(xp:5.1,2003:6.0,vista:70,win7:7.5) ...