样式集小记上
2016-05-15 10:59
555 查看
样式集小记
1.浮动的写法：float:left/right；
Float：使HTML元素向左或向右浮动，取值：left、right
2.浮动的元素，可以向左或向右浮动，直到碰到包围框的边上或者上一个浮动框的边上为止；
3.浮动的元素将脱离普通文档流，并且不再占用空间，浮动元素的层级要高于普通文档流中的元素。
浮动元素将生成块元素，不管它原来是什么元素(块元素、行元素)。换句话说，行内元素浮动后，将变成块元素，就可以设置width和height。
注意：行内元素<span>设置width和height是没有用的，行内元素主要是靠内容决定width和height。
B：浮动的清除：
浮动清除的写法：.clear:both/left/right；
Clear：清除上面的浮动特性，取值：left(左浮动)、right(右浮动)、both(两者)
（1）如何让包围元素（边框）从“视觉上”包住浮动元素呢？怎样实现下图的样式：
答：就需要在包围元素的最下边(浮动元素)加上一个清除浮动<div class="clear"></div>，然后再在style中添加属性，以此来实现。
（2）清除浮动的后面的其它元素，都将恢复默认排版,不会继承前面元素的性质。
（二）CSS盒子模型
每一个HTML元素，都可以看成一个“盒子”。一个“盒子”具有：内容的宽或高、边框线、内边距、外边距。一个“盒子”具有：width和height、border、padding、margin
如下图：
例如：
1.一个“盒子”宽度或高度的计算：内容宽为70px，左右内边距分别为5px、左右外边距分别为10px，求“盒子”的宽度？
总宽度＝内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px
2.盒子总宽度为100px，内容宽度80px，内填充5px，求左右的外边距？
一个外边距＝(100px – 80px –10px)/2 = 5px
如图：
1. Border-left/right：设置元素的左/右边线，像边线的粗细、线型、颜色；
例如：border-left/right:2px solid #FF0000;
2. Border-top/bottom：设置元素的顶边框线/下边框线
3.Border：简写形式，同时设置四个边框线；
border:1px solid #FF0000; //同时设置四个边框线
B：线型的取值：
None：无边线；
Solid：实线；
Dashed：虚线；
Dotted：点状态线
Double：双线
Padding-right：右内填充距离
Padding-bottom：底内填充距离
Padding-left：左内填充距离
Padding：简写形式
Padding：5px; //上右下左内填充分别为5px
Padding：5px 10px; //上下分别为5px，左右分别为10px
Padding：5px 10px 15px; //上填充5px，左右分别为10px，下填充为15px
Padding：5px 10px 15px 20px; //顺序必须为：上右下左，上填充5px，右填充10px，下填充15px，左填充20px。
Margin-right：右外边距
Margin-bottom：下外边距
Margin-left：左外边距
Margin：简写形式
Margin:5px; //上右下左，外边距分别为5px
Margin:5px10px; //上下分别为5px，左右外边距分别为10px
Margin:5px10px 15px; //上外边距5px，左右外边距分别10px，下外边距15px
Margin:5px10px 15px 20px; //分别设置四个外边距，顺序是：上右下左
margin尽量少用，因为不同的浏览器的兼容性是不一样的。
一般会出现向下面的情况：外边距合并的问题(怪异现象)
1.两个垂直块元素的上下外边距，会发生合并的问题，取其中较大的一个值。
2.行内元素、浮动元素、定位元素，外边距不会发生合并；
解决的方法：
（1）只能其中一个元素增加下外边距，另一元素的上外边距设置为0px；
（2）也就是在上下两个元素的中间，加一个100px高的空<div>
通过<style></style>标记来引入CSS代码，<style>一般放在<head>标记中；
2、外链式：链接外部的CSS文件(.css)
通过<link>标记，来引入外部的CSS文件，<link>标记一般放在<head>标记中。
格式：<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />
Href：指定外部CSS文件的路径和名称；
Rel：当前文件与链入的文件的关系，取值：stylesheet；
例如：<link href=“css/public.css” rel=“stylesheet”type=“text/css” />
3、行内式
每一个HTML元素都有一个公共属性style，通过该属性可以直接给该元素添加样式，并且它的优先级最高。
<p style=“width:400px;height:300px;border:1pxsolid #444;padding:20px;”>这里是一个段落</p>
选择器优先级：style行内样式> ID选择器 > class类选择器 > 标签选择器
想要背景覆盖整个文字区域,则需要清除上面的浮动。如：<div class=”clear”></div>
在没有进行浮动清除之前，后面的内容会依照上面的浮动格式进行填充。就像上图一样。想要达到文字正常排列则需要清除浮动。如：<div class=”clear”></div>
如图：
提示：元素浮动，可以使用行内元素转成“块元素”
一个行内元素，要想宽和高能用，可我不想进行浮动，能否实现？
答：可以。用Display来实现。display的属性：可以取值：none(无)、block(块元素)、inline(行内元素)
(一)css浮动设置与清除
A：浮动的表示：1.浮动的写法：float:left/right；
Float：使HTML元素向左或向右浮动，取值：left、right
2.浮动的元素，可以向左或向右浮动，直到碰到包围框的边上或者上一个浮动框的边上为止；
3.浮动的元素将脱离普通文档流，并且不再占用空间，浮动元素的层级要高于普通文档流中的元素。
浮动元素将生成块元素，不管它原来是什么元素(块元素、行元素)。换句话说，行内元素浮动后，将变成块元素，就可以设置width和height。
注意：行内元素<span>设置width和height是没有用的，行内元素主要是靠内容决定width和height。
B：浮动的清除：
浮动清除的写法：.clear:both/left/right；
Clear：清除上面的浮动特性，取值：left(左浮动)、right(右浮动)、both(两者)
（1）如何让包围元素（边框）从“视觉上”包住浮动元素呢？怎样实现下图的样式：
答：就需要在包围元素的最下边(浮动元素)加上一个清除浮动<div class="clear"></div>，然后再在style中添加属性，以此来实现。
（2）清除浮动的后面的其它元素，都将恢复默认排版,不会继承前面元素的性质。
（二）CSS盒子模型
每一个HTML元素，都可以看成一个“盒子”。一个“盒子”具有：内容的宽或高、边框线、内边距、外边距。一个“盒子”具有：width和height、border、padding、margin
如下图：
例如：
1.一个“盒子”宽度或高度的计算：内容宽为70px，左右内边距分别为5px、左右外边距分别为10px，求“盒子”的宽度？
总宽度＝内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px
2.盒子总宽度为100px，内容宽度80px，内填充5px，求左右的外边距？
一个外边距＝(100px – 80px –10px)/2 = 5px
如图：
（三）CSS边框属性：
A:表示形式：1. Border-left/right：设置元素的左/右边线，像边线的粗细、线型、颜色；
例如：border-left/right:2px solid #FF0000;
2. Border-top/bottom：设置元素的顶边框线/下边框线
3.Border：简写形式，同时设置四个边框线；
border:1px solid #FF0000; //同时设置四个边框线
B：线型的取值：
None：无边线；
Solid：实线；
Dashed：虚线；
Dotted：点状态线
Double：双线
（四）CSS填充
A：内边距
Padding-top：上内填充距离Padding-right：右内填充距离
Padding-bottom：底内填充距离
Padding-left：左内填充距离
Padding：简写形式
Padding：5px; //上右下左内填充分别为5px
Padding：5px 10px; //上下分别为5px，左右分别为10px
Padding：5px 10px 15px; //上填充5px，左右分别为10px，下填充为15px
Padding：5px 10px 15px 20px; //顺序必须为：上右下左，上填充5px，右填充10px，下填充15px，左填充20px。
B：CSS外边距
Margin-top：上外边距Margin-right：右外边距
Margin-bottom：下外边距
Margin-left：左外边距
Margin：简写形式
Margin:5px; //上右下左，外边距分别为5px
Margin:5px10px; //上下分别为5px，左右外边距分别为10px
Margin:5px10px 15px; //上外边距5px，左右外边距分别10px，下外边距15px
Margin:5px10px 15px 20px; //分别设置四个外边距，顺序是：上右下左
margin尽量少用，因为不同的浏览器的兼容性是不一样的。
一般会出现向下面的情况：外边距合并的问题(怪异现象)
1.两个垂直块元素的上下外边距，会发生合并的问题，取其中较大的一个值。
2.行内元素、浮动元素、定位元素，外边距不会发生合并；
解决的方法：
（1）只能其中一个元素增加下外边距，另一元素的上外边距设置为0px；
（2）也就是在上下两个元素的中间，加一个100px高的空<div>
HTML引入CSS的方法
1、内嵌式通过<style></style>标记来引入CSS代码，<style>一般放在<head>标记中；
<style type=“text/css”>
Body{
Margin:0px;
Padding:0px;
}
</style>2、外链式：链接外部的CSS文件(.css)
通过<link>标记，来引入外部的CSS文件，<link>标记一般放在<head>标记中。
格式：<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />
Href：指定外部CSS文件的路径和名称；
Rel：当前文件与链入的文件的关系，取值：stylesheet；
例如：<link href=“css/public.css” rel=“stylesheet”type=“text/css” />
3、行内式
每一个HTML元素都有一个公共属性style，通过该属性可以直接给该元素添加样式，并且它的优先级最高。
<p style=“width:400px;height:300px;border:1pxsolid #444;padding:20px;”>这里是一个段落</p>
选择器优先级：style行内样式> ID选择器 > class类选择器 > 标签选择器
想要背景覆盖整个文字区域,则需要清除上面的浮动。如：<div class=”clear”></div>
在没有进行浮动清除之前，后面的内容会依照上面的浮动格式进行填充。就像上图一样。想要达到文字正常排列则需要清除浮动。如：<div class=”clear”></div>
如图：
提示：元素浮动，可以使用行内元素转成“块元素”
一个行内元素，要想宽和高能用，可我不想进行浮动，能否实现？
答：可以。用Display来实现。display的属性：可以取值：none(无)、block(块元素)、inline(行内元素)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 注册表趣味应用小集
- 样式表CSS布局经验
- 大家看了就明白了css样式中类class与标识id选择符的区别小结
- 重置默认样式 css reset第1/2页
- jQuery操作属性和样式详解
- jQuery根据用户电脑是mac还是pc加载对应样式的方法
- 判断li是否有样式的js代码
- 鼠标移入移出改变CSS样式的小例子
- JavaScript 动态加载脚本和样式的方法
- 获取内联和链接中的样式(js代码)
- document.write()及其输出内容的样式、位置控制
- 利用JavaScript更改input中radio和checkbox样式
- jQuery插件Validate实现自定义校验结果样式
- jQuery使用之设置元素样式用法实例
- jQuery给多个不同元素添加class样式的方法
- jQuery实现自定义checkbox和radio样式
- 从零开始学习jQuery (四) jQuery中操作元素的属性与样式
- 使用jQuery实现更改默认alert框体
- jQuery获取样式中颜色值的方法
- JQuery实现样式设置、追加、移除与切换的方法