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. Centos7虚拟机桥接模式

    主机ping不通虚拟机centos7系统的ip大多有以下原因: 1.主机与centos7ip段对应 (关键是网关.dns服务器要一一对应,具体操作见后文) 2.对应后仍然不通的,可关闭主机与cenos ...

  2. zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~

    Intervals Time Limit: 1 Second      Memory Limit:65536 KB      Special Judge Chiaki has n intervals ...

  3. iOS 简单socket连接

    - (void)CreateSocket{ NSString *host = [self.realStreamDict objectForKey:@"StreamSeverIP"] ...

  4. 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...

  5. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  6. win10 uwp 自定义控件初始化

    我遇到一个问题,我在 xaml 用了我的自定义控件,但是我给他设置了一个值,但是什么时候我才可以获得这个值? 本文告诉大家,从构造函数.loaded.Initialized 的调用过程. 用最简单的方 ...

  7. jsp与servlet联合处理

    通过model1 或者说 model2 我们知道的mvc 的分层思想, 在model1 中jsp 通负责显示,有负责控制逻辑结构, 那么怎么做呢,看下面的请求过程. <?xml version= ...

  8. ASP动态网站建设之连接数据库相关操作

    连接数据库: string str = @"server=服务器名称;Integrated Security=SSPI;database=数据库名称;"; 注意封装公共类,将常用重 ...

  9. toString方法的用处

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } p.p1 { margin: 0.0px ...

  10. 实验测试之------创建DBlink,查询远端的yang用户下的abcdedfa表,创建同义词

    --测试环境,20远端,30本地: --准备1,20远端建立表的同义词,用户信息: 1.11 ---------------------------------------------------准备 ...