css基础的东西集中体现在了“磊盒子”这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一个静态的页面变得磊出来,这是CSS基础的练习。

在css基础练习里面有几点需要注意的小点:

1.margin的塌陷问题,这个问题分文两点,一种是上下同级的盒子的上外边距和下外边距的塌陷问题,这个情况劲量避免就好,不值一提;第二个问题就需要有良好的意识去注意子盒子的外边距是否会引起父盒子的外边距的塌陷,需要不需要运用边框1px 外加transparent使边框透明化的方法,使得这个问题得到解决。

2.padding的问题,padding作用于一个“盒子”的时候,需要注意会不会因为加了padding而使得盒子本身被撑大了,因为一个盒子我们一般说大小包括盒子本身的width和height还有边框border的大小以及padding的大小。如果在设置padding之后,盒子被撑大了,并且不是我们所想要的效果,那么我们就需要在盒子的width和height上面前去所设置的padding值,如果padding值设置的是两边都有,那么就需要减去两倍的padding值。所以说,在不是和熟练的情况下,除非真的很麻烦,最好还是连写,不然容易漏掉一些值以及语句,使得我们忘记去减掉。

3.浮动的问题,浮动分为左浮动和右浮动,并且浮动是脱离标准流的,会使原本的行内元素变成行内块元素,不再占据原来的位置,会对后面的“盒子”造成影响,所以我们需要去清楚浮动。清楚浮动一般有四种方法: overflow: hidden|auto|scro; 插一个单独的标签闭合浮动; 单伪类闭合浮动; 双伪类闭合浮动;

单伪类清楚浮动:

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;} (这个事为了适应ie6、7这些奇葩)
双伪类:
.clearfix:before,.clearfix:after{  content:"."; display:table;}
.clearfix:after{ clear:both;}

.clearfix{*zoom:1;}
浮动配合margin可以实现盒子的位置的调试,不过对于位置特别刁钻的,定位就好了
4.定位 定位时一种和随性的放盒子的方式,只需要知道移动多少距离,就可以完美的将一个盒子放在上面
定位一般用的有 相对定位:relative; 绝对定位:absolute; 固定定位:fixed; 系统默认的就不说了
相对定位没有脱离标准流 绝对定位脱离了标准流
定位要配合边偏移来使用,包括四个属性:top bottom left right; 一般来说,说道定位补得不说精灵图,或者说叫雪碧图,这个东西一般都用定位来,个别的用浮动。

休息,归类一下CSS初级的东西的更多相关文章

  1. css 初级进阶

    摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...

  2. css基本的东西

    0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果.1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel ...

  3. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

  4. 前端学习——css(初级)

    1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) ...

  5. CSS 初级攻略

    内容来自html dog. css的格式为 ‘property: value’ 给html插入css样式的方式有三种:内联.内部css.外部css文件,如下所示: <p style=" ...

  6. css初级代码

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  7. HTML和CSS初级前端面试题汇总(持续补充)

    1.浏览器内核 IE:trident Firefox:gecko Safari:webkit Opera:以前是presto,现在是Blink Chrome:Blink 2.HTML文件开头的DOCT ...

  8. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  9. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

随机推荐

  1. CPU 分类

    Single Core :单核CPU Dual Core   :双核CPU Quad Core  :四核CPU Hexa Core  :六核CPU Octa Core   :八核CPU 参考: htt ...

  2. Sql语句varchar或nvarchar字段条件前加N的性能差异

    Sql语句varchar或nvarchar字段条件前加N的话是对这个字段进行Unicode编码, 这样做的目的是避免在这种字段中存入俄文.韩文.日文的情况下有可能会出现乱码. 但这样做也会有性能问题, ...

  3. 基于FPGA的肤色识别算法实现

    大家好,给大家介绍一下,这是基于FPGA的肤色识别算法实现. 我们今天这篇文章有两个内容一是实现基于FPGA的彩色图片转灰度实现,然后在这个基础上实现基于FPGA的肤色检测算法实现. 将彩色图像转化为 ...

  4. java web Servlet 学习笔记 -3 会话管理技术

     Cookie和HttpSession 什么是会话: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 每个用户在使用浏览器与服务器进行会话的过 ...

  5. 画布跟js.oop

    <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 画布(Canvas)是一个没有内容也没有边框的矩形区域.我们可以控制里面的每一个像素. 下面我们首先定义一 ...

  6. ubuntu6.04下安装Eclipse for C/C++ Development

    ubuntu6.04下安装Eclipse for C/C++ Development 首先安装gcc/g++ 需要安装jdk,有的可以尝试安装openjdk. sudo apt-get install ...

  7. win10 sdk 是否向下兼容

    向下兼容(downward compatibility),又称向后兼容(backward compatibility).回溯兼容,在计算机中指在一个程序.库或硬件更新到较新版本后,用旧版本程序创建的文 ...

  8. Tomcat 笔记-配置域名

    编辑/etc/hosts文件,添加域名: 127.0.0.1 localhost 127.0.1.1 ubuntu # The following lines are desirable for IP ...

  9. 12.21-Android ServerSocket

    建立ServerSocket服务器 1.new ServerSocket对象servierSocket 2.接收客户端请求Socket client = servierSocket.accept(); ...

  10. Hibernate 一对一双向映射 注解方式

    有外键的一方: @OneToOne(fetch = FetchType.LAZY) @JoinColumn(name = "courseid") public Tcourse ge ...