1、布局(盒子布局、盒子模型、标准流、脱离文档流)

标准文档流:块级独占一行  ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出。

一行行看

浮动+标准流配合使用

版心:width+margin:0 auto;

ul>li 、标题、段落、a、img、dl>dt+dd

定位:相对定位、子绝父相、固定定位、z-index

元素宽度:  块级---不设置时是父元素100%;行内块元素宽度默认是内容宽度;行内元素没有宽高属性,除非转换显示模式。

溢出、滚动条

。。。

css学习_div+css布局的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  3. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  4. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  5. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  6. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  7. CSS 学习笔记——CSS Selector

    CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...

  8. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  9. amazeui学习笔记--css(布局相关3)--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

随机推荐

  1. Linux中添加计划任务与Elasticsearch日志自动清理

    一.简述 当日志发送到ELK之后,Elasticsearch随着日志的增加,占用磁盘量会越来越大.这时候,需要我们写角本定期DELETE日志.角本写法,也很简单,只是发送HTTP的DELETE方式到: ...

  2. 为RecyclerView打造通用Adapter

    ##RecycleView简单介绍 RecyclerView控件和ListView的原理有非常多相似的地方,都是维护少量的View来进行显示大量的数据.只是RecyclerView控件比ListVie ...

  3. jquery中选择器input:hidden和input[type=hidden]的区别

    关于选择器:hidden的说明,在jquery说明文档中是这样说的:匹配所有不可见元素,或者type为hidden的元素.而[type=hidden]是查找所有type属性等于hidden的元素.两者 ...

  4. Effective Java 第三版——72. 赞成使用标准异常

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  5. Android研发中对String的思考(源代码分析)

    1.经常使用创建方式思考: String text = "this is a test text "; 上面这一句话实际上是运行了三件事  1.声明变量 String text; ...

  6. Kafka#4:存储设计 分布式设计 源码分析

    https://sites.google.com/a/mammatustech.com/mammatusmain/kafka-architecture/4-kafka-detailed-archite ...

  7. SQL Server 权限控制

    根据数据库Schema限制用户对数据库的操作行为 授予Shema dbo下对象的定义权限给某个用户(也就是说该用户可以修改架构dbo下所有表/视图/存储过程/函数的结构) use [Your DB N ...

  8. springmvc 拦截通配符 /** /

    /** 拦截所有 包括 *.js *.css *.png 等等 / 只拦截 /login, /logout, /index等等      

  9. JavaScript系统对象

    1. 本地对象(非静态对象) 常用对象有: Object.Function.Array.String.Boolean.Number.Date.RegExp.Error 注:本地对象需要new之后再使用 ...

  10. VS每次F5都重新编译代码,即使没有任何修改

    遇到一个奇怪现象,不知道怎么设置了,突然工程的Release模式下,F5每次都要重新编译代码,而且是全部代码都重新编译 而Debug模式没问题 重启VS,重启机器,清理工程重新生成工程都无法解决 最后 ...