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 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- http协议和file协议的区别
1.在本地直接使用浏览器打开 html文件 和 通过本地服务器打开 html文件 有什么区别呢. https://segmentfault.com/q/1010000006554881/a-1 ...
- dos添加文件夹属性！
attrib 显示所有文件的属性:参数:+r或-r [文件名] 设置文件属性是否为只读 +h或-h [文件名] 设置文件属性是否隐含 +s或-s [文件名] 设置文件属性是否为系统文件 +a或-a [ ...
- 将日志(Microsoft.Extensions.Logging)添加到.NET Core控制台应用程序
在.NET Core项目中,日志记录是通过依赖项注入进行管理的. 尽管这对于ASP.NET项目效果很好,但在启动Startup.cs中的新项目时,所有这些都会自动创建,而在控制台应用程序中则需要一些配 ...
- Jlink 接口定义
JTAG有10pin的.14pin的和20pin的,尽管引脚数和引脚的排列顺序不同,但是其中有一些引脚是一样的,各个引脚的定义如下. 1. 引脚定义 Test Clock Input (TCK) -- ...
- JavaScript中如何让图形旋转不会相互影响
最近在联系JavaScript 二维绘图,经常会用到旋转,前几篇博文也提到过这类问题. 但是我忘记了JavaScript二维绘图中有关旋转最核心的两个方法:save()和restore() 在w3c上 ...
- Tomcat启动脚本（1）startup.bat
@echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...
- Python安装和使用教程（windows）
点击进入幕布视图浏览 https://mubu.com/doc/a8VGCUfqqw 一.Python下载 1.进入Python官网:https://www.python.org/ 2.选择windo ...
- Makefile中几种赋值
= 延时变量,只有被使用时才展开定义 := 立即变量,定义时的赋值立即有效 ?= 条件变量,当变量为空时才赋值 += 追加赋值
- cenos7 下数据库相关操作
1.Linux Centos7下如何确认MySQL服务已经启动 https://www.cnblogs.com/qianzf/p/7082484.html 2.CentOS 7上安装MySQL并配置远 ...
- nginx 和keepalived的使用
今天看了培训视频,看到这俩玩意,挺有意思,先粘贴一下,别等到时候忘了. 官方网站 www.nginx.org nginx的特点 稳定版本是用偶数来做标记,测试版本使用奇数作为标记 通过yum来安装 安 ...