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 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- [CSP-S模拟测试]:世界线（DFS+bitset）
题目描述 时间并不是一条单一的线,而是有许多世界线构成的流. 在一些时刻,世界线会发生分裂:同样的,它们也有可能在一些时刻收束在一起.如果将这些时刻抽象成点,那么这些世界线构成的网络,实际上是一张有向 ...
- [NOIP模拟测试31]题解
A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...
- 分布式系统理论进阶7：Paxos变种和优化
本文转自:https://www.cnblogs.com/bangerlee/p/6189646.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...
- 探索Redis设计与实现15：Redis分布式锁进化史
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- （转）Android Studio启动AVD遇到的问题 （ HAXM安装失败）
转:https://zhidao.baidu.com/question/561420516357269084.html?qq-pf-to=pcqq.c2c Android Studio启动虚拟机的时候 ...
- 深入理解dijkstra+堆优化
深入理解dijkstra+堆优化 其实就这几种代码几种结构,记住了完全就可以举一反三,所以多记多练多优化多思考. Dijkstra 对于一个有向图或无向图,所有边权为正(边用邻接矩阵的形式给出), ...
- tp5 thinkphp 使用phpqrcode生成带Logo的二维码
1 下载生成二维码类库 composer require aferrandini/phpqrcode 2 点击按钮下载 //二维码下载 public function down_qrcode() { ...
- Mamen所需要的jar包怎么生成
Mamen所需要的jar包怎么生成 使用 mamen 难免碰到,不知道的 jar 包,不知道怎么在 pom 文件中写,分享一个网址,可以把你想要的 jar 包生成 pom 配置文件,个人感觉非常好用. ...
- 21. Blog接口开发
一般的系统由登录.增删改查所组成.我们的Blog同样如此.我们会开发登录.创建博客.删除博客.修改博客.查询博客等功能.话不多说,我们直接展开实践吧. 思路分析 创建项目.既然我们要创建一个blog, ...
- vue实现轮播效果
vue实现轮播效果 效果如下:(不好意思,图有点大:) 功能:点击左侧图片,右侧出现相应的图片:同时左侧边框变颜色. 代码如下:(也可以直接下载文件) <!DOCTYPE html> &l ...