/*
flaot，默认为none，如果将flaot的属性设为left或right，元素就会向其父元素的左侧或右侧靠紧，
同时，默认情况下，盒子的宽度不再伸展，而是根据盒子里的内容的宽度确定。
*/
body{
margin:15px;
font-family:Arial;font-size:12px;
}
.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear:left;
}
.son1{
float:left;
/*这样设置了son1后，box-2的左边框和box-1的左边框重合，
因为box-1已经脱离标准流，标准流中的box-2会顶到原来box-1的位置
而文字会围绕着box-1排列
*/
}
.son2{
float:left;
}
/*
当窗口边窄时，在HTML中写在后面的也就是box-3会第一个被挤到下一行去。
当挤到下一行，并向左移动，如果遇到了一个拐角就会被卡住。
*/
.son3{
float:right;}
/*
经验之谈：
在写html时，通过CSS来确定内容的显示位置，而在html中确定内容的逻辑位置，
也就是重要的内容放在前面，相对次要的内容放在后面
好处：1.访问页面的时候，重要内容先显示出来，
2.搜索引擎是不管CSS的，它只根据网页内容的价值来确定页面的排名，而对于一个HTML
文档，越靠前的内容，搜索引擎会赋予越重的权重，
对网站的排名有影响。
*/
/*到此，float的性质学完，接下来学习clear属性
作用：如果在排版中实现了某个盒子的浮动，但使它后面的标准流中的盒子不受它的影响。
使用了它，就是为了消除浮动的盒子对其他盒子的影响。
使用：clear属性有right，left ，both（这里的左右指的是文字段落的左和右）
对clear属性的设置要放在文字所在的盒子里
clear设为左边，那么文字段落自己移动，知道文字段落的左边不再受float的影响，就可以了。
*/
/*扩展盒子的高度
铭记：一个div的范围是由它里面的标准内容决定的，与里面的浮动内容无关。
现实中，往往需要用父div的范围包含浮动的子div，怎么办：
1.在浮动的子div后面在增加一个div（这里类名为clear），然后这个div的样式，并覆盖原来对 margin padding
border的设置。
.father .clear{
margin:0;
padding:0;
border:0;
clear:both;
}
*/
<!--
position(狭义的定位)
属性：
static：这是默认的属性值，也就是该盒子按照标准流进行布局。
relative：1、常以标准流的排版方式为基础。
2、相对定位的盒子仍在标准流中，它后面的盒子仍然以标准流的方式对待它。
3、它对父亲和兄弟盒子都没有影响。依然“认为”它在原来的位置上（其实不在）
absolute:1、盒子的位置以它的包含框（最近的一个“已经定位”的“祖先元素”）为基准进行偏移，
“已经定位”的含义是，position的属性被设置，并且被设置为不是static的任意一种方式
2、如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
3、绝对定位的盒子从标准流中脱离。
4、其他的盒子就好像这个盒子不存在一样。
fixed:和绝对定位类似，只是以浏览器窗口位基准进行定位。
也就是当拖动浏览器的窗口的滚动条时，依然保持对象的位置不变。
-->
<!--
position之绝对定位之特殊性质：
1、用于需要使某个元素脱离标准流，而仍然希望它能保持在原来的位置的情况。
2、如果设置了绝对定位，而没有设置偏移属性，那么它将保持原来的位置。
-->
<!--
z-index用于调整定位时重叠块的上下位置，z-index大 的页面位于其值小的上方，
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float 属性</title>
<link href="CSS_third_浮动.css" rel="stylesheet" type="text/css"
</head>
<body>
<div class="father">
<div class="son1">box-1</div>
<div class="son2">box-2</div>
<div class="son3">box-3<br />box-3<br />box-3<br /></div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
</div>
</body>
</html>
/*CSS学习_CSS中复合选择器
交集选择器
标记.类别选择器或者标记.ID选择器
这种选择器将选中同时满足前后两者定义的元素
*/
p{
color:blue;
}
p.special{
color:red;
}
.special{
color:green;
}
/*" 并集"选择器
并集选择器是多个选择器通过"逗号"连接而成
用于：如果某些选择器的风格是完全相同的，或者部分相同。
*/
/*后代选择器
作用：对特殊位置的HTML标签进行声明，例如当<p>内嵌<span>就可以使用后代选择器进行相应的控制
写法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔
不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套，可以多层嵌套
后代选择器产生的影响不仅仅限于元素的直接后代，而且会影响他的各级后代
*/
p span{ /*这个p里面的span只对html中所有内嵌在p中span进行声明*/
color;red;
}
span{
color:blue
}
/* 子选择器，
区别：就是只对直接后代有影响的选择器，
写法：使用大于号连接
仅IE6不支持子选择器
*/
p>span{
color:blue;
}
/*
1.两列布局-郊野
2.三列布局-像素画
3.三列布局变体-百合池塘
4.多列布局-郁金香
5.包含圆角的设计-日与夜
6.包含倾斜角的设计
7.装饰性设计
8.流体设计
9.建筑主题的设计，
10.特声效果-音乐盒，剧院效果
11.特色效果-海底世界，博物馆，杀手风格
*/
/*css 的全称为：
"DOCTYPE"(文档类型)说明，它是告诉浏览器，使用哪种规范来解释这个文档中的代码
规范指建议使用XTHML 1.0transitional
在XHTML中应该区分“内容标记”与“结构标记” <p> 是内容标记<td>是结构标记
/*CSS禅意花园（zen garden）
创建者：加拿大设计师：Dave Shea
*/
/*外部CSS文件的导入
方式1：导入式__
*/
<style type="text/css">
@import "mystyle.css";
</style>
/*
方式2：链接式__
*/
<link href="mystyle.css" rel="stylesheet" type="text/css" />
/*
css的全名为“层叠样式表”，
层叠可以简单的理解为“冲突”的解决方案，
*/
<style type ="text/css">
p{color:green;}
.red{color:red;}
/*
当同时使用red类别样式和标记选择器，这就产生了冲突:
是按照标记选择器定义的绿色显示，还是按照类别选择器定义的红色显示？
解决： 1.类别选择器的优先权高于标记选择器，
2.ID选择器的优先级高于类别选择器
3.行内样式的优先级高于ID样式的优先级
4.两个类别选择器的优先级相同，此时已前者为准。class="purple red"
规律：越特殊的样式，优先级越高！
*/
分享到：
相关推荐
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...
在IT领域，CSS...总结，学习CSS基础不仅涉及语法和选择器，还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念，初学者可以逐步提升CSS技能，从而更好地设计和构建美观、功能完善的网页。
html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习...
本“CSS基础学习源码”是一个适合初学者的资源包，提供了丰富的实践材料，帮助理解并掌握CSS的基础知识。 首先，我们来详细探讨CSS的基础概念： 1. **选择器与声明**：CSS的核心在于选择器和声明。选择器用于定位...
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
css-ppt 为打基础学习的ppt 蛮不错的
学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，...
总的来说，这份CSS基础学习胶片将带你从零开始学习CSS，包括选择器的应用、布局技术、样式控制和最新的CSS3特性。通过学习这些内容，你将能够创建美观、响应式的网页，并具备基本的前端开发能力。为了更好地掌握CSS...
学习基础的HTML与CSS.zip学习基础的HTML与CSS.zip学习基础的HTML与CSS.zip 学习基础的HTML与CSS.zip学习基础的HTML与CSS.zip学习基础的HTML与CSS.zip 学习基础的HTML与CSS.zip学习基础的HTML与CSS.zip学习基础的HTML...
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and ...
4. 学习CSS基础知识：虽然工具简化了操作，但了解CSS的基本原理和语法规则，能更好地利用工具。 总结，Visual CSS 1.3是设计者手中的得力助手，它以直观的可视化方式简化了CSS的编写，提高了设计效率。通过熟练掌握...
同时，通过应用CSS样式，这个项目也提供了一个学习CSS基础知识的机会。下面我们将深入探讨HTML和CSS的基础知识以及它们如何在这个项目中结合使用。 HTML（HyperText Markup Language）是网页内容的基础，用于定义...
2. **教程**：引导初学者逐步学习CSS基础知识，如选择器、属性和值。 3. **参考手册**：提供CSS属性的全面列表，包括其功能、兼容性和示例。 4. **最佳实践**：分享经验丰富的开发者如何编写高效、可维护的CSS代码，...
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and ...
- 了解CSS3的历史和浏览器支持情况，学习CSS基础选择器和样式规则。 - 掌握文本样式属性，如字体、颜色、对齐方式等，以定制文本样式。 - 学习CSS的层叠性和继承性，理解优先级，有效控制样式应用。 4. **CSS3...
- 学习CSS基础知识，包括选择器的种类及其优先级。 - 明确`div`等容器元素与其他功能性元素的区别，合理运用它们来构建页面结构。 - 尽量减少对编辑工具的依赖，直接使用文本编辑器编写CSS样式。 ##### 2. 编写不...
2. 学习CSS基础，包括选择器、属性、盒模型等。 3. 实践布局技术，创建简单的网页结构。 4. 深入理解CSS定位，能够灵活控制元素位置。 5. 探索响应式设计，使网页适应不同设备。 6. 参考"div+css学生门户"项目的代码...
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...