网站开发答辩,手机视频制作,WordPress营销推广返佣插件,wordpress怎么上传ppt目录
Day26#xff1a;CSS的选择器
1、CSS的引入方式
2、CSS的选择器
2.1 基本选择器编辑
2.2 组合选择器
2.3 属性选择器
2.4 伪类选择器
2.5 样式继承
2.6 选择器优先级
3、CSS的属性操作
3.1 文本属性
3.2 背景属性
3.3 边框属性
3.4 列表属性
3.5 dispal…目录
Day26CSS的选择器
1、CSS的引入方式
2、CSS的选择器
2.1 基本选择器编辑
2.2 组合选择器
2.3 属性选择器
2.4 伪类选择器
2.5 样式继承
2.6 选择器优先级
3、CSS的属性操作
3.1 文本属性
3.2 背景属性
3.3 边框属性
3.4 列表属性
3.5 dispaly属性
3.6 盒子模型重点
3.7 float属性重点
3.7.1 清除浮动
3.7.2 清除浮动解决父级塌陷问题
3.8 position属性 Day26CSS的选择器
1、CSS的引入方式 行内样式
行内样式就是写在元素的style属性中的样式这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式因为那样不利于后期维护。
div stylecolor: white;background-color: #369;text-align: center行内设置/div 嵌入式
嵌入式是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊单独的样式时可以使用内部样式表。
!DOCTYPE HTML
html langen-USheadtitletitle/titlemeta charsetutf8
stylediv{color: white;background-color: #369;text-align: center}/style/headbodydiv 嵌入式/div
/body
/html 链接式
链接式就是把CSS样式写在HTML文档的外部一个后缀为 .css 的外部样式表中然后使用时在head标签中使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时外部样式表是最理想的选择。在使用外部样式表的情况下我们可以通过改变一个文件来改变这所有页面的外观。
外部样式文件common.css
div{color: white;background-color: #369;text-align: center
}
html文件
!DOCTYPE HTML
html langen-USheadtitletitle/titlemeta charsetutf8
link relstylesheet hrefcommon.css/headbody
div链接式/div/body
/html
2、CSS的选择器
2.1 基本选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style#i1{color: red;}.c1{color: red;}.c2{font-size: 32px;}
/style
/head
body
div idi1item1/div
div idi2item2/div
div idi3item3/div
div classc1 c2item4/div
div classc1item5/div
div classc1item6/div
/body
/html 2.2 组合选择器 后代子代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style/*后代选择器*/.c1 .c2{color: red;}
/*子代选择器*/.c3 .c5{color: red;}
.c3 .c5{color: red;}
.c3 .c4 .c5{color: red;}/style
/head
body
!--后代选择器--
div classc1div classc2item1/div
/div
div classc2item2/div
!--子代选择器--
div classc3div classc4div classc5item3/div/divdiv classc5item4/div
/div
/body
/html 与或选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style/*与选择器*/p.c1{color: red;}/*或选择器*/p.c1,#i1{color: red;}
/style
/head
body
!--与选择器--
div classc1item1/div
p classc1item2/p
divitem3/div
p idi1item4/p
/body
/html 兄弟选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style/*毗邻选择器*/#i1 div.c1{color: red;}
#i1 div.c2{color: red;}
/*兄弟选择器*/#i1 ~ div.c2{color: red;}#i1 ~ div{color: red;}
/style
/head
bodyp idi1item0/p
div classc1item1/div
div classc2item2/div
div classc3item3/div
div classc4item4/div
/body
/html
2.3 属性选择器
E[att] 匹配所有具有att属性的E元素不考虑它的值。注意E在此处可以省略。比如“[cheacked]”。以下同。 p[title] { color:#f00; }E[attval] 匹配所有att属性等于“val”的E元素 div[class”error”] { color:#f00; }E[att~val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素td[class~”name”] { color:#f00; }E[attr^val] 匹配属性值以指定值开头的每个元素 div[class^test]{background:#ffff00;}E[attr$val] 匹配属性值以指定值结尾的每个元素 div[class$test]{background:#ffff00;}E[attr*val] 匹配属性值中包含指定值的每个元素 div[class*test]{background:#ffff00;}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style/*属性选择器*/[typetext]{border: 1px solid red;}
[index]{font-size: 32px;font-style: italic;}
[href*png]{color: red;}
/style
/head
body
input typetext
input typepassword
div index11/div
div index22/div
div index33/div
ullia href1.pngitem1/a/lilia href2.jpgitem2/a/lilia href3.jpgitem3/a/lilia href4.pngitem4/a/lilia href5.gifitem5/a/li
/ul
/body
/html
2.4 伪类选择器 anchor伪类专用于控制链接的显示效果
:linka:link选择所有未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。 stylea:link{color: red;}a:visited{color: coral;}a:hover{color: blue;}a:active{color: rebeccapurple;}
/style before after伪类
before/after伪类相当于在元素内部插入两个额外的标签其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上可以简化HTML代码提高可读性和可维护性。
:first-childp:first-child选择属于父元素的第一个子元素的每个 p 元素。:last-childp:last-child选择属于其父元素最后一个子元素每个 p 元素。:beforep:before在每个 p 元素的内容之前插入内容。:afterp:after在每个 p 元素的内容之后插入内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style
.c1 p:first-child{color: red;}
.c1 div:last-child{color: red;}
p#i1:after{content:hello;color:red;display: block;}
/style
/head
body
div classc1pitem1/ppitem1/pdivitem1/divpitem1/p
/div
p idi1p标签/p
/body
/html 2.5 样式继承
CSS的样式表继承指的是特定的CSS属性向下传递到子孙元素。总的来说一个HTML文档就是一个家族然后html元素有两个子元素相当于它的儿子分别是head和body然后body和head各自还会有自己的儿子最终形成了一张以下的家族谱。 在上图中可以看到body的子元素有三个h1、p和ulul也有几个子元素p也有1个子元素那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性结果body下面所有的后代元素都可能享受到这就是样式继承。就像一句俗语一样“龙生龙凤生凤老鼠的儿子会打洞”。样式继承可以给我们的网页布局带来很多的便利让我们的代码变得更加简洁但是如果不了解或者使用不当也有可能会给我们带来很多不必要的麻烦。
因此如果了解了哪些样式是会继承到后代元素的那么就可以避免这些问题的发生了。
文本相关属性font-familyfont-sizeletter-spacingline-heightfont-stylefont-varianttext-aligntext-indentfont-weightfonttext-transformword-spacingcolordirection列表相关属性list-style-imagelist-style-positionlist-style-typelist-style表格和其他相关属性border-collapseborder-spacingcaption-sideempty-cellscursor 2.6 选择器优先级 继承
继承是CSS的一个主要特征它是依赖于祖先-后代的关系的。继承是一种机制它允许样式不仅可以应用于某个特定的元素还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} phelloyuan/p
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的是比普通元素的权重还要低的0。
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见任何显示申明的规则都可以覆盖其继承样式。 此外继承是CSS重要的一部分我们甚至不用去考虑它为什么能够这样但CSS继承也是有限制的。有一些属性不能被继承如border, margin, padding, background等。 优先级 所谓CSS优先级即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。
/*
!important 行内样式ID选择器 类选择器 标签 通配符 继承 浏览器默认属性
1 内联样式表的权值最高 style 1000
2 统计选择符中的ID属性个数。 #id 100
3 统计选择符中的CLASS属性个数。 .class 10
4 统计选择符中的HTML标签名个数。 标签名 1
按这些规则将数字符串逐位相加就得到最终的权重然后在比较取舍时按照从左到右的顺序逐位比较。
*/
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style.c1{color: red;}#i1{color: coral;}div{color: greenyellow;}
/*.c2 .c3 .c4 span{*//* color: orange;*//*}*/
.c2 .c4 span{color: blue;}
.c2 .c3 .c5{color: rebeccapurple;}
.c2 .c4 .c5{color: darkcyan;}
/style
/head
body
div classc1 idi1item1/div
div classc2div classc3div classc4span classc5item2/span/div/div
/div
/body
/html 1、有!important声明的规则高于一切。 2、如果!important声明冲突则比较优先权。 3、如果优先权一样则按照在源码中出现的顺序决定后来者居上。 4、由继承而得到的样式没有specificity的计算它低于一切其它规则(比如全局选择符*定义的规则)。 5、用数字表示只是说明思想一万个class也不如一个id权值高 3、CSS的属性操作
3.1 文本属性 font-style字体样式风格
/*
属性值
normal设置字体样式为正体。默认值。
italic设置字体样式为斜体。这是选择字体库中的斜体字。
oblique设置字体样式为斜体。人为的使文字倾斜而不是去使用字体库的斜体字。
*/ font-weight字体粗细
/*
属性值
normal设置字体为正常字体。相当于数字值400
bold设置字体为粗体。相当于数字值700。
bolder设置字体为比父级元素字体更粗的字体。
lighter设置字体为比父级元素字体更细的字体。
number用数字表示字体粗细。从小到大越来约粗取值范围100、200、300、400、500、600、700、800、900。
注意
font-weight的常用值有两个normal和bold其他的值在浏览器中的支持并不好。
*/ font-size字体大小
/*
font-size的值有很多有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素 px 、字符 em默认1em等于16px2em等于32px根据不同浏览器的默认字体大小而决定 、百分比 % 磅[点] pt 。
字体不指定大小时主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器字体最小只能设置成12像素新版已经修复。
*/ font-family字体族
/*
font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候可以指定多种字体,作为候补。指定多个字体的时候需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候默认中文 宋体 [ win7以后默认是 微软雅黑 ]英文 Arial
*/ color字体颜色 // 可以使用color来表示字体的颜色颜色值最常用的有三种形式英文单词十六进制RGB十进制。更高级的有 RGBA、HSL、HSLA不过低版本的浏览器并不支持。style.c1{color: red;}.c1{color: #369;}.c1{color: RGB(0,0,255);}
/style 另外要注意使用十六进制表示颜色值的时候如果字符的格式类似于“AAAAAA”的这种六个字符一样的又或者是“AABBCC”这种一二三四五六 位置上的数字一样的我们可以使用简写来表达。 text-align文本对齐方式
/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/ line-height字体行高 // 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。 行高 字体大小 上半行距 下半行距 vertical-align
vertical-align 属性设置元素的垂直对齐方式。
img src altspanyuan/span text-decoration // 使用text-decoration可以设置文本内容的装饰线条正常的文本是没有线条的常用的值有noneunderlineoverlineline-through四种。 3.2 背景属性 background-color背景颜色
页面的背景颜色有四种属性值表示分别是transparent透明RGB十进制颜色表示十六进制颜色表示和颜色单词表示。
属性使用
/*
background-color: transparent; // 透明
background-color: rgb(255,0,0); // 红色背景
background-color: #ff0000; // 红色背景
background-color: red; // 红色背景
*/ background-image背景图片
background-image可以引入一张图片作为元素的背景图像。默认情况下background-image放置在元素的左上角并在垂直和水平方向重复平铺。
语法
// background-image: url(图片地址) 当同时定义了背景颜色和背景图像时背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到或者不能完全铺满元素时就会显示背景颜色。 background-repeat背景平铺方式
CSS中当使用图像作为背景了以后都是默认把整个页面平铺满的但是有时候在很多场合下面页面并不需要这种默认的效果而可能需要背景图像只显示一次或者只按照指定方式进行平铺的时候可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式一般有四个值默认是repeat平铺no-repeat不平铺repeat-xX轴平铺repeat-yY轴平铺。 background-position背景定位
CSS中支持元素对背景图像的定位摆放功能就是利用background-position属性来实现以页面中元素的左上角为原点00把元素的内部区域当成一个坐标轴上边框为X轴越往左X的值越大左边框为Y轴越往下Y轴的值就越大反之亦然然后计算出背景图片的左上角与圆点的距离x轴和y轴的距离然后把背景图片放入到指定的位置上对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个使用空格隔开前面一个是背景图片左上角的x轴坐标后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。
语法
// background-position: x轴坐标 y轴坐标 背景定位的值除了是具体的数值以外还可以是左left、中center、右right background背景样式缩写
和字体属性一样多个不同背景样式属性也是可以同时缩写的不过不需要像字体那样按照一定的顺序背景样式的缩写属性的顺序是不固定的可以任意编排。
语法
// background: 背景颜色 背景图片 背景平铺方式 背景定位; 3.3 边框属性 border-style边框风格
定义边框的风格值可以有
/*
none没有边框当border的值为none的时候系统将会忽略[border-color]
hidden隐藏边框低版本浏览器不支持。
dotted点状边框。
dashed虚线边框。
solid实线边框。
double双实线边框两条单线与其间隔的和等于border-width值。
*/
border-style的值可以缩写的
/*
只有一个值的时候表示同时控制上下左右的边框风格。
只有两个值的时候表示分别控制上下、左右的边框风格。
有三个值的时候表示分别控制上、左右、下的边框风格。
有四个只的时候表示分别控制上、右、下、左的边框风格。
*/
border-style还可以单独指定不同方向
/*
border-top-style 设置上边的边框风格
border-bottom-style 设置下边的边框风格
border-left-style 设置左边的边框风格
border-right-style 设置右边的边框风格
*/ border-width边框宽度
使用border-width可以定义边框的厚度值可以是mediumthinthick和指定数值的宽度。 同时border-width也可以进行缩写
/*
只有一个值的时候表示同时控制上下左右的边框宽度。
只有两个值的时候表示分别控制上下、左右的边框宽度。
有三个值的时候表示分别控制上、左右、下的边框宽度。
有四个只的时候表示分别控制上、右、下、左的边框宽度。
*/
border-width也可以单独指定不同方向
/*
border-top-width 设置上边的边框宽度
border-bottom-width 设置下边的边框宽度
border-left-width 设置左边的边框宽度
border-right-width 设置右边的边框宽度
*/ border-color边框颜色
定义边框的颜色值表示的方式可以是十六进制RGB十进制和单词表示法。
同上border-color的缩写
/*
只有一个值的时候表示同时控制上下左右的边框颜色。
只有两个值的时候表示分别控制上下、左右的边框颜色。
有三个值的时候表示分别控制上、左右、下的边框颜色。
有四个只的时候表示分别控制上、右、下、左的边框颜色。
*/
border-color也可以单独指定不同方向
/*
border-top-color 设置上边的边框颜色
border-bottom-color 设置下边的边框颜色
border-left-color 设置左边的边框颜色
border-right-color 设置右边的边框颜色
*/ 边框样式缩写
还可以把边框风格边框宽度边框颜色进行组合在一起进行缩写语法
// border: 边框宽度 边框样式 边框颜色; 注意border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。 3.4 列表属性
CSS中提供了一些列表属性可以用来
(1)、设置不同的列表项标记为有序列表
(2)、设置不同的列表项标记为无序列表
(3)、设置列表项标记为图像 list-style-type系统提供的列表项目符号 list-style-image自定义的列表项目符号
li { list-style-image:url(qq.gif); }
3.5 dispaly属性
display可以指定元素的显示模式它可以把行内元素修改成块状元素也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。
语法
/*
display: block; // 声明当前元素的显示模式为块状元素
display: inline; // 声明当前元素的显示模式为行内元素
display: inline-block; // 声明当前元素的显示模式为行内块状元素
display: none; // 声明当前元素的显示模式为隐藏
*/ display: inline-block; 和 float 解决的核心问题能够让多个可以设置长宽的元素在一行显示。 3.6 盒子模型重点
盒模型是CSS的核心知识点之一它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子这些盒子由元素的content内容、padding内边距、border边框、margin外边距组成。 padding内边距及其缩写
内边距也叫“内补白”表示页面中元素的边框与内容的距离。内边距的值不能是负值相当于table标签的cellpadding属性。
内边距可以设置多个值
/*
当padding只有一个值的时候表示同时控制上下左右的内边距。
当padding只有两个值的时候表示分别控制上下、左右的内边距。
当padding有三个值的时候表示分别控制上、左右、下的内边距。
当padding有四个只的时候表示分别控制上、右、下、左的内边距。
*/
内边距也可以进行单独设置
/*
padding-top 设置上边的外边距
padding -bottom 设置下边的外边距
padding -left 设置左边的外边距
padding -right 设置右边的外边距
*/ margin外边距及其缩写
外边距也叫“外补白”表示页面中元素与元素之间的距离。外边距越大两者的距离就越远反之如果外边距越小则元素之间的距离就越近外边距的值可以是正数也可以是负值。
margin也可以像padding一样设置多个值和单独方向设置用法一样。 1、在网页的开发过程中需要让一个元素相对于父级元素作水平居中时可以借助margin的特性来实现。 使用margin让元素自身居中 margin: 0 auto; 2、浏览器的默认边距清零 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{width: 100%;height: 600px;border: 1px solid red;
}
.c2{width: 50%;height: 40px;background-color: rebeccapurple;margin: 10px auto;}/style
/head
body
div classc1div classc2/divdiv classc2/div
/div
/body
/html
边距案例
!DOCTYPE HTML
html langen-USheadmeta charsetutf8style
*{margin: 0;padding: 0;}
.c1{width: 80%;
margin: 100px auto;
}
.c1 .J_categoryList{list-style: none;
}.c1 .J_categoryList li{display: inline-block;margin: 10px;
}.c1 .J_categoryList li a{font-size: 16px;color: #333;padding: 20px;border: 1px solid rebeccapurple;text-decoration: none;}
/style/headbody
div classc1ul classJ_categoryListlia hrefspan红米/span/a/lilia hrefspan电视/span/a/lilia hrefspan笔记本/span/a/lilia hrefspan家电/span/a/lilia hrefspan小米手机/span/a/li/ul
/div/body
/html 3.7 float属性重点 流动布局
流动模型Flow即文档流浏览器打开HTML网页时从上往下从左往右逐一加载。
在正常情况下HTML元素都会根据文档流来分布网页内容的。
文档流有2大特征
① 块状元素会随着浏览器读取文档的顺序自上而下垂直分布一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序从左往右水平分布一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
!DOCTYPE HTML
html langen-USheadtitle/titlestylediv{ border: 1px solid #f00; margin: 4px; }.d3{ width: 100px; }/style/headbodydivd1/divdivd2/divdiv classd3spanspan1/spanaa1/aaa2/aspanspan2/span/div/body
/html 浮动模型
要学习浮动模型的布局模式就要了解CSS提供的浮动属性float。浮动属性是网页布局中最常用的属性之一通过浮动属性不但可以很好的实现页面布局而且还可以依靠它来制作导航栏等页面功能。
简单浮动
!DOCTYPE HTML
html langen-USheadtitle简单浮动/titlestyle
.c1{width: 200px;height: 200px;background-color: indianred;float: left;}
.c2{width: 300px;height: 200px;background-color: orange;float: left;
}
.c3{width: 400px;height: 200px;background-color: lightblue;float: left;}/style/headbody
div classc1/divdiv classc2/divdiv classc3/div
/body
/html 字围效果
!DOCTYPE HTML
html langen-USheadtitle字围效果/titlestyle
.c1{width: 200px;height: 200px;background-color: indianred;
}
.c2{width: 300px;height: 200px;background-color: orange;float: left;
}
.c3{width: 400px;height: 400px;background-color: lightblue;
}/style/headbody
div classc1111/divdiv classc2222/divdiv classc3333/div
/body
/html
案例
!DOCTYPE HTML
html langen-USheadtitle字围案例/titlemeta charsetutf8style
.c1{width: 500px;}
img{float: left;width: 300px;height: 200px;}
/style/headbodydiv classc1img src altspan classtext/span/div
/body
/html 当一个元素被设置浮动后将具有以下特性 任何申明为float 的元素都会自动被设置为一个行内块状元素具有行内块状元素的特性。 假如某个元素A是浮动的如果A元素上一个元素也是浮动的那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素那么A元素会被挤到下一行)如果A元素上一个元素是标准流中的元素那么A的相对垂直位置不会改变也就是说A的顶部总是和上一个元素的底部对齐。 在标准浏览器中如果浮动元素a脱离了文档流那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置使页面布局产生变化。 如果水平方向上没有足够的空间容纳浮动元素则转向下一行。 字围效果文字内容会围绕在浮动元素周围。 浮动元素只能浮动至左侧或者右侧。 浮动元素只能影响排在其后面元素的布局却无法影响出现在浮动元素之前的元素。 3.7.1 清除浮动
网页布局中最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流使页面产生不必要的改动所以我们一般在浮动了以后达到目的了就紧接着清除浮动。
在主流浏览器如Firefox下如果没有设置height元素的高度默认为auto且其内容中有浮动元素时在这种情况下元素的高度不能自动伸长以适应内容的高度使得内容溢出到容器外面而影响甚至破坏布局的情况叫“浮动溢出”为了防止这个现象的出现而进行的CSS处理操作CSS里面叫“清除浮动”。
!DOCTYPE HTML
html langen-USheadtitle/titlemeta charsetutf8style
.box{border: 1px solid red;}
.c1{width: 200px;height: 200px;background-color: #336699;float: left;}
.c2{width: 200px;height: 200px;background-color: orange;float: right;}
.footer{width: 100%;height: 60px;background-color: yellowgreen;
}/style/headbodydiv classboxdiv classc1/divdiv classc2/div/divdiv classfooter/div
/body
/html clear是css中专用于清除浮动的常用的属性值有以下几个
值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。
!DOCTYPE HTML
html langen-USheadtitle简单浮动/titlestyle
.c1{width: 200px;height: 200px;background-color: indianred;float: left;/*float: right;*/}
.c2{width: 300px;height: 200px;background-color: orange;float: left;clear: left;/*clear: both;*/}
.c3{width: 400px;height: 200px;background-color: lightblue;float: left;
}
/style/headbody
div classc1/divdiv classc2/divdiv classc3/div
/body
/html
3.7.2 清除浮动解决父级塌陷问题 .clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容*/content: .; /*内容为“.”就是一个英文的句号而已。也可以不写。*/display: block; /*加入的这个元素转换为块级元素。*/clear: both; /*清除左右两边浮动。*/visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。*//* visibility:hidden;仍然占据空间只是看不到而已*/line-height: 0; /*行高为0*/height: 0; /*高度为0*/font-size:0; /*字体大小为0*/}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div然后设定它clear:both来达到清除浮动的效果。
之所以用它是因为你不必在html文件中写入大量无意义的空标签又能清除浮动。
div classhead clearfix/div 此外还给父元素加上溢出隐藏属性overflow: hidden;来进行清除浮动。 3.8 position属性
就像photoshop中的图层功能会把一整张图片分层一个个图层一样网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的然后通过定位属性position对元素进行定位摆放最终实现网页的布局。
定位属性position有4个值分别是静态定位static、相对定位relative、绝对定位absolute和固定定位fixed。默认就是static。所以我们略过。
元素设置了定位以后还要依靠4个方位属性来进行定位摆放。
方位属性
/*
top让元素相对于指定目标的顶部偏移指定的距离。例如 top10px; 表示距离顶部10像素
right让元素相对于指定目标的右边偏移指定的距离。例如 right10px; 表示距离顶部10像素
bottom让元素相对于指定目标的底部偏移指定的距离。例如 bottom10px; 表示距离顶部10像素
left让元素相对于指定目标的左边偏移指定的距离。例如 left10px; 表示距离顶部10像素
*/ 相对定位relative
相对定位就是在正常文档流中元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。 .c1{width: 200px;height: 200px;background-color: indianred;
}
.c2{width: 200px;height: 200px;background-color: orange;position: relative;left: 200px;top: 200px;
}
.c3{width: 200px;height: 200px;background-color: lightblue;
} 绝对定位absolute
绝对定位就是将元素完全脱离文档流然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位如果不存在这样的父级元素则默认是相对于body元素进行绝对定位。
轮播图案例
!DOCTYPE HTML
html langen-USheadmeta charsetutf8style
*{margin: 0;padding: 0;}
.lunbo{width: 590px;height: 470px;border: 1px solid rebeccapurple;margin: 100px auto;position: relative;}
.lunbo ul{list-style: none;}
.lunbo .img li{position: absolute;top: 0;left: 0;}
.lunbo .btn li{
font-size: 25px;width: 40px;height: 40px;background-color: gray;text-align: center;line-height: 40px;border-bottom-right-radius: 50%;border-top-right-radius: 50%;color: white;
position: absolute;top: 50%;margin-top: -20px;
}
.lunbo .left_btn{left: 0;}
.lunbo .right_btn{right: 0;}/style/headbody
div classlunboul classimglia hrefimg srcimgs/1.jpg alt/a/lilia hrefimg srcimgs/2.jpg alt/a/lilia hrefimg srcimgs/3.jpg alt/a/lilia hrefimg srcimgs/4.jpg alt/a/lilia hrefimg srcimgs/5.jpg alt/a/li/ulul classbtnli classleft_btn /lili classright_btn /li/ul/div/body
/html 固定定位fixed
固定定位与绝对定位有点相似但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位而不再相对于某个HTML页面元素了所以当元素使用了固定定位以后就算页面的滚动条滚动了固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位不受文档流的影响了。
!DOCTYPE HTML
html langen-USheadmeta charsetutf8style
body{margin: 0;}
.c1{width: 100%;height: 2000px;background-color: lightgray;}
.c2{width: 200px;height: 60px;background-color: yellowgreen;text-align: center;line-height: 60px;position: fixed;right: 20px;bottom: 20px;}/style/headbody
div classc1/divdiv classc2返回顶部/div
/body
/html
