css布局方面小结
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属性，使所有页面都是于此。
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
4 利用display：inline-block; 内联元素的性质，但是有宽高！所以这样就不用清除浮动了。 但是：
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙，用负margin值来填补inline-block中间的空白。
5 columns的使用
<html>
<head>
<title></title>
<style type="text/css">
.col{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<div class="col">
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
</div>
</body>
</html>
和就是在div里面加了一个p就会导致高低不平！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.col{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<div class="col">
<p>
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
</p>
</div>
</body>
</html>
为什么会导致加了一个P就不行呢，因为你的CSS 是针对.col 也就是div的设置，而没有针对p。 如果你写成 p的column之CSS 。 那么加上p就OK了。
盒子模型的深入了解。
css布局方面小结的更多相关文章
- div+css布局自适应小结
一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...
- 《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- DIV+CSS布局命名规范
一.命名规则说明 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- redis集群-4
redis集群原理 redis cluster在设计的时候,就考虑到了去中心化,去中间件,也就是说,集群中的每个节点都是平等的关系,都是对等的,每个节点都保存各自的数据和整个集群的状态.每个节点都和其 ...
- Python3中 if __name__=='__main__'是个什么意思
在python前期学习中或者在学flask中,if_name_ = ="_main_"经常出现在我们的眼帘中,我们经常会问,这个是个什么玩意儿,它是干什么的? 我们知道,if 语句 ...
- 团队冲刺DAY6
团队冲刺DAY6 今天的内容是无图形界面的客户端和服务器的加密解密系统. 通信时用的socket方法,内置的密钥,端口,ip地址. 客户端: import java.io.*; import java ...
- Android 中RelativeLayout各个属性的含义
转载博客:http://blog.csdn.net/softkexin/article/details/5933589 android:layout_above="@id/xxx" ...
- 2019 ICPC Asia Nanchang Regional C And and Pair 找规律/位运算/dp
题意: 给定一个二进制表示的n,让你找满足如下要求的数对(i,j)的个数 $0 \leqslant j \leqslant i \leqslant n$ $ i & n = i $ $ i & ...
- php对接极光推送
首先要明白php对接极光推送要做些什么,极光推送的大致流程是:你的服务器----->极光服务器------>app端.而php要做的就只有我们的服务器到极光服务器这个过程.极光服务器到ap ...
- Windows环境下Oracle数据库的自动备份脚本自动删除30天前的备份
@echo off echo ================================================ echo Windows环境下Oracle数据库的自动备份脚本 echo ...
- js添加onclick中自定义方法
最近写一个插件的时候遇到了这么一个问题. 插件的要求是,仅仅通过一行js代码,就需要生成相应的页面,不能改变源文件的代码 生成页面还好说,但是有一个问题就是,生成的页面中是有一个按钮的.按钮也是可以添 ...
- 03、python的基础-->str字符串的使用
1.字符串首字母大写 s = "aksjdjjhfhdhjaGGGGkkk" s1 = s.capitalize() print(s1) 2.字符串全部字母大写 s = " ...
- MYSQL索引的深入学习
通常大型网站单日就可能会产生几十万甚至几百万的数据,对于没有索引的表,单表查询可能几十万数据就是瓶颈. 一个简单的对比测试 以我去年测试的数据作为一个简单示例,20多条数据源随机生成200万条数据,平 ...