针对之前遇到过的一些特殊样式的实现，我今天做个总结，目的有二：一是将这些方法记录下来，以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大，让广大前端程序猿们能够少走弯路。此贴为更新帖，以后若有好的css样式技巧，小哥我会不定期更新。

　　一、块元素水平垂直居中（特别鸣谢：鑫生活。鑫哥出品必属精品！小弟膜拜）

　　对于一个块元素的水平垂直居中，水平居中的方式不必多说，一般用margin:auto;等方法即可实现。而对于垂直居中，尽管有vertical-align:middle属性，但是由于其只适用于table标签中，而table标签效果不好控制的特点大家都懂。。。因此，我们一般常用的方法是：将子级元素设定inline-block属性，并将其行高属性：line-height的值设定为与父级元素相同的高度。在这里，我想推广一种方法，源自“鑫生活”

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

代码如下：

html方面：

　　<body>
　　　　<div class="big">
　　　　　　<div class="small"></div>
　　　　　</div>
　　</body>

css方面：　

　　.big{
　　　　width:500px;
　　　　height:500px;
　　　　border:1px solid red;
　　　　position:relative;
　　　　}
　　.small{
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;
　　　　position:absolute;left:0px;top:0px;right:0px;bottom:0px;
　　　　margin:auto;
　　　　background-color:#cc9900;
}

　　在上述代码中，子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中，我们用了position的relative属性。在子级元素中，我们将它的position属性设定为absolute后，将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现，如此设定后，子级元素的margin区域会充满整个父级元素，并且左右margin值是相等的，上下margin值亦如此。但是这并不符合，当代码数值有冲突时，优先解析top值及left值的规律。因为究竟是什么原理，小ge也不得而知。。如果有大神知晓，还望不吝赐教。但是这不失为一种好的办法，希望大家活学活用。

　　　　二、after伪类清浮动

　　　　通常我们在对块元素设浮动以后，需要对其清浮动，以免布局混乱。常见的清浮动方法主要有两种：1）、在后面的子元素css中写"clear:both;"。2）在浮动元素的父级元素中写"overflow:hidden"。现在，我们可以用第三种方法，利用after伪类写一个浮动属性，这样只要有需要清楚浮动的地方，我们就给其父元素加上这样一个浮动属性就可以了。

代码如下：

　　.clearfix:after{

　　　　　content:"";

　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;

　　　　　}

　　　　这种方法有个好处，即可以将其写入reset中，之后可以多次调用。

希望这个帖子能够真正的帮到大家，在今后的学习中，我也会将我遇到的好的方法，不定期更新。最后再次感谢"鑫空间"等各位前端大神。小哥向你们看齐！！

对于一些css样式的巧妙方法进行总结。的更多相关文章

  1. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  2. PHP分帧后台模板页面css样式,js引入方法

    一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...

  3. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  4. CSS样式应用

    CSS样式应用的方法: (1)行内样式,将css样式直接放到标签当中,一般都是放入标签的style属性中,它是最方便的一种样式,也是最不方便修改的样式.如下: (2)内嵌式,通过将css写在网页源文件 ...

  5. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  6. 应用CSS样式表

    首先应该分清楚应用CSS样式表到HTML页面中和将css样式表绑定到HTML页面的对象,是两个不同的概念.像之前说的通过不同的选择器将样式表绑定到HTML页面中的对象,但其实使用的都是同一种方法应用c ...

  7. html--前端css样式初识

    一.CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. CS ...

  8. react中怎么写css样式？

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  9. 2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）

    CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...

随机推荐

  1. UVA 1569　Multiple

    题意: 给定m个1位数字,要求用这些数字组成n的倍数的最小数字,如果无法组成就输出0 分析: BFS,由于n最大5000,余数最多5000,利用余数去判重,并记录下路径即可 代码: #include ...

  2. 关于UIScrollView属性跟方法的总结

    iOS中UIScollView的总结 在iOS开发中可以说UIScollView是所有滑动类视图的基础,包括UITableView,UIWebView,UICollectionView等等,UIScr ...

  3. OleDbHelper

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.D ...

  4. zoj 1067

    输入一组RGB颜色列表,每行一个颜色,是三个从0~255的整数 前16行是目标颜色组,-1 -1 -1表示结束   16组颜色以后接下来的几行是需要判断的,看它和哪个颜色的距离D最小,找出这个对应的颜 ...

  5. 在 WinForm 中打开页面采用POST方式传参http。可以多个参数传递，返回json字符串

    //调用方法 Dictionary<string, string> postData = new Dictionary<string, string>(); postData. ...

  6. .Net之垃圾回收算法

    垃圾回收器检测托管堆中是否有应用程序不在使用的任何对象,如果一次垃圾回收之后,堆栈没有可用的内存,new操作符将会抛出OutOfMemoryException(内存溢出). 每一个应用程序都包含一组根 ...

  7. mac + apache + php

    1: 设置下用sublimetext为默认打开方式, 确保下载sublimetext 2:设置下默认打开方式为sm sudo ln -s /Applications/Sublime\ Text\ 2. ...

  8. ODI Studio拓扑结构的创建与配置(Oracle)

    一.概念解释 Topology Manager主要用来管理下面5类任务,并将信息存储在主资料库中,供所有模块共享使用. 物理体系结构: 定义各种技术及其数据服务器.物理架构.物理代理.数据服务器瞎可以 ...

  9. oc block基本使用

    // // main.m // block基本使用 // // Created by Ymmmsick on 15/7/21. // Copyright (c) 2015年 Ymmmsick. All ...

  10. qt介绍

    http://www.oschina.net/p/qt Qt 是一个跨平台的C++图形用户界面应用程序框架.它提供给开发者建立图形用户界面所需的功能,广泛用于开发GUI程序,也可用于开发非GUI程序. ...