html div 新建css,html(第一天，div+css)

一、CSS布局属性

Width：设置对象的宽度(width:45px)。

Height：设置对象的高度(Height:45px;)。

Background：设置对象的背景颜色、背景图像。

1.背景颜色

background:#09F;

2.背景图像

background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

repeat-x代表横向重复，还可以设置repeat-y。

Float:Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道

标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Float属性有left、right、none三个值，none默认属性不用管，主要是left和right两个属性最常用。

举例：

1.float:left属性

1

2.float:right属性

Margin: Margin属性用于设置两个元素之间的距离。(注：在IE6中默认是此属性的双倍值，如何解决请看hack css)

Margin属性设置值说明：

1.单独设置

margin-left:20px;设置左边

margin-right:20px;设置右边

同理上下分别是margin-top:20px;、margin-bottom:20px;

2.简写设置

Margin:10px;设置对象四周。

Margin:10px 5px;设置对象上下为10px,左右为5px;

举例：

Padding: Padding属性用于设置一个元素的边框与其内容的距离。

1.单独设置

padding-left:20px;设置左边

padding-right:20px;设置右边

同理上下分别是padding-top:20px;、padding-bottom:20px;

2.简写设置

padding:10px;设置对象四周。

padding:10px 5px;设置对象上下为10px,左右为5px;

Clear: Clear属性主要是清楚float属性设置的效果，使用Float属性设置一行有多个DIV后(多列)，最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

1、如何在上面的例子中橙色方块的下面另起一行放置一个黑色方块。

我们直接在html中加入一个div试试

我们看到kwstu-kid3跑到1、2的下面去了，原因就是应为kwstu-kid2使用了float属性，解决方法可以直接在kwstu-kid3里面加入clear属性

2、还有一种布局中常见的问题，此处一定要看。

我们把最外层kwstu属性的高度去了，看看什么效果。

跟我们想象的不一样吧，我们想象中应该是kwstu层把kid1和kid2包裹住才对，为什么没有达到我们要的效果呢，原因就是应该kid1和kid2使用了float属性，此时可以使用clear属性清楚一下即可。

一般情况都是在css里面创建一个.clear公共清除浮动类，直接使用一个div调用即可

此问题还有一个解决办法：直接在kwstu样式中加入overflow:hidden;属性即可。

2.还有一个初学div时经常遇到的问题，如果把上边的clear层去掉，然后再在kwstu层下面开始一行新的布局，然后在下面新的div中使用margin-top属性，肯定不管用。这个地方是初学者布局中肯定要遇到的问题，一定要注意。

解决办法：

在kwstu层和kwstu1层直接加一个清除浮动层即可。

DIV+CSS专题：第一天　XHTML CSS基础知识

欢迎大家学习,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

DIV+CSS常用的网页布局代码

单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

DIV+CSS:页脚永远保持在页面底部

页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

DIV+CSS+JS基础+正则表达式

...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

DIV+CSS 星号*

常常我们在DIV+CSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器:另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS星号-CSS *知识介绍.接下来DI ...

DIV+CSS系统学习：转载

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

有利于SEO优化的DIV+CSS的命名规则小结

可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合  CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...

随机推荐

Create function through MySQLdb

http://stackoverflow.com/questions/745538/create-function-through-mysqldb How can I define a multi-s ...

AFN----AFNetworking

一.介绍 官方介绍: 1.适用于iOS和Mac OS X两个平台的网络库 2.基于Foundation URL Loading System上进行一套封装 3.提供了丰富的API接口 4.是一个轻量级 ...

解决xshell连接linux总是异常断开的问题？

找到etc下面的profile文件,可以看到有下面一行: TMOUT=;export TMOUT 注释掉即可解决. #TMOUT=;export TMOUT

ExtJS4.2学习(五)表格渲染与复选框

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

xcode插件——新建cocos2dx工程

个人制作的一个创建cocos2dx工程的xcode小插件 按照readme安装一下即可. 创建工程后,将自动弹出finder到工程目录. 弹出窗口:

原生js封装cookie获取、设置及删除

使用cookie(key,value,options) 参数key,value,options(可选) function cookie(key,value,options){ if(typeof va ...

更改file文件上传默认CSS样式

前言: 多数时候我们需要表单上传文件,如图片.但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. & ...

React之使用Context跨组件树传递数据

---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

UVa 11384 Help is needed for Dexter (递归)

题意:给定一个n表示1到n的序列,让你用最小的步数把这个序列都变为0,每个操作可以从序列中选择一个或多个个,同时减掉一个正整数,求最少的步数. 析:一看这个题,感觉挺高深的,但是静下心来想想,其实挺简 ...