1 ####css选择器

1 .left-word.moreinfor{} 这样是找不到选择器的。中间需要一个空格

但是div.moreinfor 是可以的。

2 max-width的作用：

p元素只有width：300px时候。不管浏览器怎么改变他都不会变。哪怕被浏览器遮挡。

当设置 max-width：300px的时候：当浏览器小于300px，他会根据浏览器改变状态。

3 box-sizing:border-box的使用。：为了让border和padding不增加宽度

或者在 *下面加上box-sizing属性，使所有页面都是于此。

  1. .fancy {
  2.   width: 500px;
  3.   margin: 20px auto;
  4.   padding: 50px;
  5.   border: solid blue 10px;
  6.   -webkit-box-sizing: border-box;
  7.      -moz-box-sizing: border-box;
  8.           box-sizing: border-box;

4 利用display：inline-block; 内联元素的性质，但是有宽高！所以这样就不用清除浮动了。 但是：

  • vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
  • 你需要设置每一列的宽度
  • 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙，用负margin值来填补inline-block中间的空白。

5 columns的使用

  1. <html>
  2. <head>
  3. 	<title></title>
  4. 	<style type="text/css">
  6. 	.col{
  7. 		columns:100px 3;
  8. 		-webkit-columns:100px 3; /* Safari and Chrome */
  9.    		-moz-columns:100px 3; /* Firefox */
  10. 	}
  11. 	</style>
  12. </head>
  13. <body>
  15. <div class="col">
  16. Internet Explorer 10 和 Opera 支持 column 属性。
  17. Firefox 支持替代的 -moz-column 属性。
  18. Safari 和 Chrome 支持替代的 -webkit-column 属性。
  19. 注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
  20. </div>
  21. </body>
  22. </html>
  24. 和就是在div里面加了一个p就会导致高低不平！！
  26. 	<!DOCTYPE html>
  27. <html>
  28. <head>
  29. 	<title></title>
  30. 	<style type="text/css">
  32. 	.col{
  33. 		columns:100px 3;
  34. 		-webkit-columns:100px 3; /* Safari and Chrome */
  35.    		-moz-columns:100px 3; /* Firefox */
  36. 	}
  37. 	</style>
  38. </head>
  39. <body>
  41. <div class="col">
  42. <p>
  43. Internet Explorer 10 和 Opera 支持 column 属性。
  44. Firefox 支持替代的 -moz-column 属性。
  45. Safari 和 Chrome 支持替代的 -webkit-column 属性。
  46. 注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
  47. </p>
  48. </div>
  49. </body>
  50. </html>

为什么会导致加了一个P就不行呢，因为你的CSS 是针对.col 也就是div的设置，而没有针对p。 如果你写成 p的column之CSS 。 那么加上p就OK了。

盒子模型的深入了解。

css布局方面小结的更多相关文章

  1. div+css布局自适应小结

    一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...

  2. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  3. DIV+CSS布局命名规范

    一.命名规则说明 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...

  4. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  5. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  8. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

随机推荐

  1. PHP基础知识总结（三） 流程控制、函数、类对象和数据库

    PHP基础语法 1.流程控制 条件语句:if  elseif  else / switch if($a == 1){ …… } elseif ($a == 2){ …… } else{ …… } 循环 ...

  2. appium 链接真机运行时报错

    今天用appium链接真机时,碰到的第一个问题:Attempt to re-install io.appium.settings without first uninstalling.(这是日志中显示 ...

  3. ArcMap基于Oracle出现sde.instances_util.check_instance_table_conflicts:: ORA-00942:表或视图不存在/table or view doesnot exist解决思路

    SDE环境:Oracle12C+ArcMap10.7+WinServer2012 出现问题情况: 1.SDE可以连接正常打开,但就是无法新建要素.导入要素等: 1)在根目录新建或导入要素,弹出提示: ...

  4. 3. Node_export安装部署

    首先我们要知道什么是Node_export?因为Prometheus本身不具备监控功能,我们要通过Prometheus收集数据,需要安装对应的export.如Node_export用于监控服务器状态, ...

  5. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

  6. XSS注入方式和逃避XSS过滤的常用方法（整理）

    (转自黑吧安全网http://www.myhack58.com/) web前端开发常见的安全问题就是会遭遇XSS注入,而常见的XSS注入有以下2种方式: 一.html标签注入 这是最常见的一种,主要入 ...

  7. 13-python基础—python3中的map()

    map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. 通俗解释: m ...

  8. C#中的元组对象Tuple

    原文:C#中的元组对象Tuple 一.什么是元组 元组就是一些对象的集合,在我们编程时,比如一个人的信息,我们常常创建一个Person类去描述一个人,传统的做法如下: public class Per ...

  9. Spring学习笔记（4）——IoC学习

    IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机械式手表 ...

  10. 【Jquery对象】jquery与dom对象的区别

    最近工作有很多判断的代码,用到了jquery与dom对象的地方比较多,写在这里加强下基本概念: 1.判断是否存在时候,要用dom对象,因为jQuery在获得对象的时候,无论要获得的对象是否存在,都会返 ...