谷粉力挺老学员推荐
尚硅谷旗下线上平台
(86人评价)
HTML+CSS基础

103集实战教学入门必备

价格 免费

HTML +css笔记 HTML是用来描述网页的一种语言(Hyper Text Markuo Language),html指的是超文本标记语言。 HTML不是一种编程语言,而是一种标记语言。 HTML使用标记标签来描述网页 HTML也成为根元素,一个页面只有一个html标签 head标签里面写一些浏览器配置,这些是用户看不到的。 title标签写网页的标题,搜索引擎会优先检索title标签。 body标签里面写标签。 语义化HTML中的标签都有一定的语义化,更好的语义化结构,可以让SEO更好的进行排名。 html属于根元素 里面包含head标签 head标签里面写一些浏览器配置 这些内容是用户看不到的 body标签位于html元素中,body里面写一些标签也称框架,这里面可以写内容,通过浏览器渲染之后 用户可以看到效果 可见内容都在body里面 title是文档的标题 浏览器在检索文档时候,会首先会检索title。 meta charser='utf-8'代表万国码,指的是浏览器解析的语言 meta name=‘viewport content='width=device-width, initial-scale=1.0' 配置移动端 meat =’x-ua-compatible content=’ie=edge‘ 代表浏览器等信息 常用浏览器以及内核 IE-Webkit Firfox-Gecko Safari-Webkit Opera-Blink Ghrome-Blink 块元素和内联元素 在普通文档流下 块元素和内联元素会按照其特性进行布局,当他们脱离文档流的时候,会改变其特性,详情请阅读下方CSS浮动和定位属性! 块元素 块元素特点,自上而下排列,且独占一行,不设置宽度默认100%,不设置宽高由内容撑开,块元素可以设置宽高,可以设置盒子模型属性。 块元素主要用来做页面的布局

容器无语义

-

标题标签

段落标签


分割线
换行标签 ul(li) 无序标签 ol(li) 有序列表 dl(dd dt) 定义标签 - 清除无序列表和有序列表标签默认样式 list-style:none; 内联元素 内联元素特点:从左到右依次排列,当到达边界时会自动换行,内联元素不可设置宽高,大小由内容撑开,只可以设置水平方向的margin padding。 常见的内联元素主要用来设置文本样式 内联容器无语义 超链接 img 语义:默认斜体 语义:默认粗体 语义:有强调内容的作用 语义:表示语气的强调,默认斜体 语义:表示强调内容 默认粗体 可以嵌套 上标 下标 引入内容会自动加入下划线 删除内容 元素之间的嵌套关系 块元素可以嵌套内联元素。 内联元素不可以嵌套块元素。 a元素可以嵌套任何元素但是不能嵌套自己。 p元素不可以嵌套其他块元素。 元素之间的关系 父元素:直接包含子元素的元素 子元素:直接被夫元素包含的元素 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素。 后代元素:直接或者间接被祖先元素包含的元素,子元素也是后代元素。 兄弟元素:拥有相同父元素的元素叫做兄弟元素。 img标签 img标签可以在网页中引入一个图片 img标签是一个自结束标签,属于inline-block元素. img属性: scr 设置一个外部引入图片的路径 alt 当图片无法加载时,对图片的描述。 width 设置图片的宽度 height 设置图片的高度 属性值: px % 如果只设置宽度,那么高度会随宽度等比例调整大小。 如果两个值同时设置,则按照设置的值调整大小,一般开发中除了自适应的页面,不建议设置width和height。 图片的描述 相对路径 src属性路径分为相对路径和绝对路径。 相对路径:指的是相对于当前资源所在目录的位置 返回上一级../返回几级目录就写几个../ 绝对路径 指的是网页的链接,直接复制的网页链接。 图片的格式 JGP PNG GIF jpg 图片支持的颜色比较多,图片可以压缩,但是不支持透明,一般使用jpg格式来保存照片。 gif 支持的颜色比较少,只支持简单的透明,支持动态图,以上使用场景 png 支持颜色多,并且支持复杂的透明,可以用来显示颜色复杂的透明图片。 图片使用原则 效果不一致的时候,使用效果好的 效果一致,使用内存小的 背景图片 使用background-image:url(图片的路径) 如果背景图片和元素一样大,则会将背景图片全部显示。 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素大小。 可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色。 一般情况下,设置背景图片时候都会指定一个背景颜色。 背景图片可以截取某一块图片然后设置x或者y的平铺。 div{ width: 500px; height: 400px; border: 1px solid red; background-image: url(images/b.png); - 引入背景图片 background-repeat: no-repeat; } Background-repeat background-repeat用于设置图片的重复方式 background-repeat可选值: - no-repeat 背景图片不重复 - repeat-x 背景图片x轴重复 - repeat-y 背景图片y轴重复 - 举个栗子: background-repeat:no-repeat; 背景图片的定位 background-position 继承性-NO background-position可选值: - left top - right top - bottom left - bottom right - left center - top center - bottom center - center center - x y - px - % - -px - -% background-position:10px 20px 水平 垂直 -可设负值 background-position:50% 50%; 水平垂直居中 background-position:center center 水平垂直居中 背景图片是否滚动 background-attachment 可选值: scroll 默认值背景图片随着窗口滚动 fixed 背景图片会固定在某一位置。 -background-attachmnet:fixed; 不会窗口滚动的图片,我们一般设置给body,不设置给其他元素。 背景图片复合写法 background:#0f0 url(../images/img.png) center center fexed no-repeat; 注意:在css中写入背景图片需要注意图片的路径。 - 背景图片简写属性没有顺序要求,同时也没用数量要求,不写的属性使用默认值。 关于img和背景图片选择 - 作为页面内容的一部分,会被经常替换的使用img - 只作为装饰,不会被经常替换的内容,使用背景图片 雪碧图or精灵图 雪碧图可以把多张图片整合到一张图片上,这样可以减轻浏览器负担,同时提高了用户体验。 雪碧图的制作需要使用背景图片定位进行合成。 meat标签 使用meta标签可以用来设置网页的关键字。 可以用来制定网页的描述。 搜索引擎会在检索页面时,会同时检索页面中关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名 XHTML语法规范 HTML中不区分大小写,但是我们一般都是用小写。 HTML中注释不能嵌套,没有任何的实质意义。 HTML标签必须结构完整,要么成对出现,要不自结束标签。 HTML标签可以嵌套,但是不能交叉嵌套。

今天天气真不错

今天天气真不错

错误嵌套 HTML标签中的属性必须有值,且必须加引号。

属性必须有值

内联框架 不推荐使用作为了解 使用内联框架可以引入一个外部的页面 使用iframe来创建一个内联框架 属性: src:指向一个外部页面的路径。 width height name 超链接 使用超链接可以让我们从一个页面跳转到另一个页面 title当鼠标移动到元素中会出现在title设置的样式。 使用a标签来创建一个超链接 属性: href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个绝对路径 target_self 在当前窗口打开新页面 target_blank 在新窗口打开新页面 去除超链接默认样式text-decoration:none; 点击跳转百度 通过点击图片打开新页面 通过a标签可以设置锚点定位

 

表格 表格属于块元素,可以嵌套其他元素,在单元格里面嵌套。 - 创建表格 - table - tr 创建行 - td 单元格 - th 默认加粗居中效果 - rowspan 纵向合并单元格 - cowspan 横向合并单元格 - border-spacing:0 调整边框之间的距离 - border-collapse: collapse; 边框合并 - 如果设置了border-collapse: collapse,border-spacing自动失效。 table { border: 1px solid red; width: 300px; border-spacing: 0; border-collapse: collapse; margin: 0 auto; text-align: center; } 长表格 有一些情况下表格是非常长的 这时就需要将表格分为十三个部分,表头,表格,表格底部。 在HTMLZ中为我们提供了三个标签: thead tbody tfoot 这三个标签的作用,就是用来区分表格不同的部分,他们都是table的子标签,都需要直接写在table中 浏览器默认样式 浏览器默认带有8px的边距。 元素标签有一些自带默认样式,在开发中我们不需要这些默认样式。 所以在开发中我们需要清除浏览器默认样式or标签默认属性。 自己写一个清除浏览器默认样式就OjbK CSS简介 层叠样式表 Cascading Style Sheets CSS引入的三种方式

标签内部写入css样式优先级最高,不推荐使用

内部引入样式, 不推荐使用

通过link标签引入外部css,结构清晰,方便后期维护,可复用度高,推荐使用。并且可以利用浏览器的缓存加快用户访问的速度同时提高了用户体验。

长度的单位 px % 可以将单位设置为百分比,这样浏览器会根据器父元素的样式来计算该值。使用百分比的好处是,当父元素的属性值发生改变时,子元素会按照比例发生改变,可以用来做自适应页面。 em em和百分比类似,他是相当于当前元素的字体大小来计算的,1em=font-size:值,当使用em时,当字体大小发生改变时,em也会随之而改变,当设置字体相关的样式时,经常会使用em。 十六进制RGB 十六进制: 0 1 2 3 4 5 6 7 8 9 a b c d e f 00 -ff 每组代表一个颜色 第一组表示红色的浓度,范围00-ff 第二组表示绿色的浓度 范围00-ff 第三组表示蓝色的浓度 范围00-ff 00表示没有颜色 ff表示最大 语法: #f红色绿色蓝色 两位重复的颜色,可以简写 #ff0000 #f00 满足简写必须是两位重复的颜色 div{ background-color:#ff0000; 红色 background-color:#f00; } RGB RGB表示红色,绿色,蓝色 颜色的浓度是0-255之间,0浓度最低,255浓度最大。 颜色的浓度也可以采用一个百分数来设置。0%=0 100%=255 .box1{ width: 200px; height: 200px; background-color: rgb(255, 0, 0); 红色 } 字体文本的样式 字体大小及字体属性: font-size font-family font-size:16px 浏览器中默认字体大小为16px font-family:微软雅黑,楷体; 可以设置多个字体,用逗号隔开,浏览器会优先使用前面的字体。 font-style 可以设置文字的样式 可选值: - normal 默认值,文字正常显示 - italic 斜体 - oblique 文字会以倾斜的效果显示 - iatlic和oblique 效果一样。 font-weight 可以设置文本的加粗变细效果 可选值: normal 默认值 bold 文字加粗 bolder 文字更粗 light 变细 lighter 更细 - 语法: p{ font-weight:bold; } 复合写法: 使用复合写法时,没有顺序要求。 使用复合写法时,中间用空格隔开,文字的大小和字体必须要写,且字体必须在最后,字体大小在倒数第二个。 div p:last-child{ font: italic bold 60px ‘楷体’; } 行高 line-height:值; 在css中没有为我们提供一个设置行间距的方式 我们只能通过设置行高来间接的设置行间距,行高越大行间距越大 属性值: px 100% 字体大小 1 字体大小的倍数 行间距=行高-字体大小 行高的作用: - 对于单行文本将行高设置为和父元素一致的时候,可以让单行文本在父元素中垂直居中

单行文本的垂直居中

p{ font:30px/30px; 字体大小为30px 行高为30px } 文本大小写样式 text-transform 可选值: none默认值 capitalize 单词的首字母大写,通过空格来识别单词。 uppercase 所有的字母都大写 lowercase 所有字母都小写 p{ text-transform: capitalize; 所有单词的首字母大写 }

i like my familys my schllo is good school

p{ text-transform: uppercase; 所有字母都大写 } p{ text-transform:lowercase; 所有字母都小写 } 文本修饰线 text-decoration 设置文本的修饰 可选值: none 默认值 underline 下划线 overline 上划线 line-through 删除线 为文本添加下划线 p{ text-decoration: underline; } 为文本添加删除线 p{ text-decoration: line-through; } 为文本添加上划线 p{ text-decoration: overline; } 默认样式 p{ text-decoration: none; } 文本间隙 letter-spacing 字符间隙 word-spacing 单词间隙 p{ letter-spacing:10px; 针对于汉字字符 } p{ word-spacing:10px; 针对于单词 }

在我的后园,可以看见墙外有两棵树,一颗是枣树,一颗是杏树

文本对齐 text-align 用于设置文本对齐的方式 可选值: left 默认值左对齐 center 水平对齐 right 右对齐 justify 两端对齐 p{ text-align:center; } 文本首行缩进 text-indent 用来设置首行缩进 可选值: px em 正值or负值 p{ text-align:2em 缩进两个字符 } CSS样式的继承 在css中,祖先元素上的有些样式,会被他的子元素继承。可以利用某些继承直接给父元素设置。 - 可继承样式 1-文字大小 CSS注释 /* 注释...... */ 选择器的优先级 优先级最高的优先选择 优先级规则: 行内样式优先级最高 1000 ID选择器的优先级高 100 CLASS选择器的优先级中 10 标签选择器的优先级低 1 通配符选择器最低 0 继承的样式没有优先级 复合选择器需要进行各项累加对比 权重相同的情况下,后面的样式会覆盖住前面的 !important加在样式的最后,代表最高的优先级,在开发之中尽量避免使用。 选择器 通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上 声明块 声明块紧跟在选择器的后面,使用一堆{}括起来,声明块中实际上就是一组一组的名值组成,声明的样式和样式值之间使用:来连接。如下: h1{ color:red; font-size:20px; } CSS常用选择器 ID选择器:通过元素的id属性值选中唯一的一个元素,id值是唯一的,id选择器权重最高。

CLASS选择器;通过元素的class属性值选中标签,同一个标签可以设置多个class名。

标签名选择器:通过元素的标签名选中标签,标签选择器的权重最低。

 

通过选择器可以通过标签名或者class名以及id名选中标签并且设置样式。 其他选择器(复合选择器) 可以通过其他选择器选中多个元素。 后代选择器 空格隔开 子代选择器 >号 群组选择器 div.span 交集选择器 , 通配选择器:可以选择页面中所有的元素,主要用来清除标签默认样式 *{ margin:0; padding:0; } 伪类选择器 a:link{} 正常 a:visited{} 访问过的样式,只能定义文字的颜色 a:hover{} 鼠标滑过的样式 a:active{} 正在点击的链接 a:focus{} 获取焦点 a::selection{} 选中文字的样式 a::-moz-selection{} 兼容火狐浏览器 用伪类选择器的时候要注意书写顺序 p:hover{ color:#0f0; } 伪元素 使用伪元素可以为元素中的某一项设置一些特殊的样式 p:first-letter{} 表示第一个字符,不兼容ie6 p:first-line{} 表示文本的第一行,不兼容ie6 p:before{} p:before{ content:'我会出现在元素的最前面' color:red; .... } 表示元素最前面的部分,before结合content使用。 p:after{} p:after{ content:'我会出现在元素的最后面'; color:red; .... } 此伪元素会出现在元素的最后面,需要配合content使用。 属性选择器 主要作用:可以根据元素中的属性或者属性值来选取指定元素。 通过属性选取:p[title]{} 通过属性值选取: p[title=属性值]{} 通过属性值开头选取:p[title^=属性值]{} 通过属性值内容结尾选取:p[title$=属性值]{} 通过属性值包含的指定内容选取:p[title*=属性值]{} /* 通过属性名选取 */ p[title]{ background: red; } /* 通过属性值选取 */ p[title='a']{ background: yellow; } /* 通过属性值开头选取 */ p[title^=b]{ background: tomato; } /* 通过属性值末尾选取 */ p[title$='D']{ background: paleturquoise; }

hello

hello

hello

hello

hello

其他子元素选择器 child在所有的子元素中进行选取,first-of-type在当前标签类型的一元素中选取。 div p:first-child{} 选取第一个子元素 div p:last-child{} 选取最后一个子元素 div p:nth-child(){} 选取数字对应的子元素 div p:nth-child(even){} 选取偶数数字的子元素 div p:nth-child(add){} 选取奇数位置的子元素 div p:first-of-type{} div p:last-of-type{} div p:nth-of-type(){} /* 选中第一个子元素 */ div p:first-child{ background: red; } /* 选中最后一个子元素 */ div p:last-child{ background: yellow; } /* 选中任意子元素,要选中第几个子元素就输入数字几 even表示偶数位置的子元素 odd表示奇数位置的子元素 */ div p:nth-child(2){ background: blue; } /* child在所有的子元素中进行选取 first-of-type在当前标签类型的子元素中选取 */ div p:first-of-type{ background: palegoldenrod; } div p:last-of-type{ background: palegoldenrod; } div p:nth-of-type(2){ background: palegoldenrod; }

123

222

333

兄弟元素选择器 .box span+p{} 选取指定元素后的兄弟元素且必须紧挨着的兄弟元素。 .box span~p{} 选取指定元素后所有的兄弟元素。 /* 选中一个元素后紧挨着的元素 */ .box span+p{ background: black; } /* 选中后面所有的兄弟元素 */ .box span~p{ background: teal; } 否定伪类 根据需求选择某一项元素不设置样式。 /* 否定伪类选择器 */ #cen p:not(.hello){ background: teal; }

否定伪类

1

2

3

4

5

盒子模型or框模型 我们的页面可以看作是一个个的盒子组成的。 添加border padding后 元素大小=border+paddng+元素自身 盒子模型分为以下几个部分 content padding border margin border和padding会增加被设置元素的大小,margin则不会。根据设置的值在被设置元素上对应减去宽高。 border属性: border-width:px; border-color:#f0f; border-style:solid; 三个属性值缺一不可 设置border对应的属性值后会增加被设置元素的大小 border可选值: top right bottom left border-style可选值: none 默认值没有边框,可以用来清除边框 solid 实线 dotted 点状虚线边框 dashed 虚线 double 双线 border:10px 20px 30px 40 px solid red; 顺时针方向,上,右,下,左 border:10px 20px 30px; 如果指定三个值,分别代表上,左右,下 border:10px 20px; 代表垂直方向上下10px 水平方向左右20px。 border:1px solid red; 四个方向的值一样 -复合写法:border:1px solid #ff0000; border简写 通过边框的简写样式,通过它可以同时设置四个边框的样式,宽度和颜色。 没有任何的顺序要求。 border同时指定四个边的属性,不能分别指定。 P{ border:1px solid red; } border可选值: top right bottom left p{ border-left:1px solid red; } padding 内边距 padding 指的是内容区域与盒子边框之间的距离 一共有四个方向的内边距 top right bottom left 内边距会影响父元素的大小,元素的背景会延伸到内边距 padding属性会增加盒子大小 内边距设置多个属性值和border一致 p{ padding:10px 20px 30px 40px; 上右下左 padding:10px 20px 30px; 上 左右 下 padding:10px 20px; 上下 左右 padding:20px; 都为20px } margin 外边距 外边距指的是盒子与其他盒子之间的距离 外边距不会影响盒子的大小,而是会影响到盒子的位置。 由于页面中的元素都是靠左靠上摆放的,我们在设左margin和上margin会发生偏移,如果设置右margin和下margin会挤 可选属性: top right bottom left auto auto值只设置给水平方向的margin,如果指定一个水平方向的边距,则自动会设置为最大值 如果水平方向都设置为auto,则会将两侧的外边距设置为相同的值,显示效果为水平居中。 若垂直方向设置auto,则没有效果。 div{ margin-left:auto; } margin属性值: 正值 负值 负值向反方向偏移 margin简写: p{ margin:10px 20px 30px 40px; 上右下左 margin:0 auto; 水平方向居中 } 垂直方向外边距的叠加 相邻兄弟元素 垂直方向相邻的兄弟元素margin问题 垂直方向的两个元素上下相邻外边距会发生叠加,兄弟元素之间的上下外边距会取最大值。 父子元素margin问题 父子元素的垂直外边距,子元素的垂直方向的margin会传递给父元素。 解决办法: .box3{ width: 200px; height: 200px; background: blue; border-top: 1px solid red; 给父元素设置border或者padding可以生效 padding-top: 100px; 或者设置父元素的上内边距,但是需要在元素中减去设置上内边距的值 } .box4{ width: 100px; height: 100px; background: red; margin-top:100px; } 内联元素的盒子模型 内联元素可以设置水平方向padidng,并且设置完有效果。 内联元素可以垂直方向的padding,但是不会影响页面布局。 内联元素可以设置水平方向的border,并且射完完有效果。 内联元素可以设置垂直方向的border,但是不会影响到页面布局。 内联元素可以设置水平方向的margin,水平方向不会重叠,而是会求和。 内联元素不支持垂直方向的外边距。 内联元素水平方向的border,padding,margin设置有效,垂直方向无效。 DISPLAY元素的转换 通过display属性可以修改元素类型 是否继承:NO 属性值: block inline inline-block none 将元素隐藏,并且不占位 display可以把元素类型转换为自己所需求的元素类型。 转换为块元素: span{ display:block; } 转换为内联元素: div{ display:inline; } 转换为内联块元素: img{ display:inline-block; } 将元素隐藏: div{ display:none; 元素不占位,可以用此属性配合伪类做一些网页效果 } visibility 可以用来设置元素的隐藏和显示状态 可选值: visible 默认值,元素默认会在页面显示 hidden 元素隐藏不显示 visibility:hidden; 元素隐藏占位 display:none; 元素隐藏不占位 -根据项目需求选择此两种隐藏类型 overflow 用途:用于隐藏子元素内容溢出于父元素,其中包含img等属性。 子元素默认是存在内容区域的,当子元素的内容超出父元素大小的时候,超出父元素的内容会在外部显示,也叫做溢出内容。 overflow可以设置父元素如何处理溢出内容 可选值: - visible 默认值,不做任何处理 - hidden 溢出内容被修剪,且不会显示。 - scroll 溢出内容被修剪,但是会产生滚动条,滚动时可以查看内容。该属性,不论内容是否溢出,设 置scroll都会产生垂直水平方向的滚动条。 - auto 根据需求添加滚动条 hidden 使用hidden会对溢出的部分进行修剪,且修剪的部分不可见。 .box{ width: 200px; height: 200px; background: #00ff00; overflow:hidden; } .box1{ width: 100px; height: 300px; background:#ff0000; }

 

scroll 使用scroll会对溢出部分隐藏,并且产生垂直和水平方向的滚动条,且内容不管是否溢出,设置后都会产生垂直or水平方向的滚动条,不推荐使用。 .box{ width: 200px; height: 200px; background: #00ff00; overflow:scroll; } auto 使用auto会根据需求产生滚动条,滚动时可以看见被隐藏的部分。建议使用。 .box{ width: 200px; height: 200px; background: #00ff00; overflow:auto; } 文档流 概念: 文档指的是文档 文档流处在网页的最底层,他表示的是一个网页中的位置,我们所创建的元素默认都处在文档流中。 元素在文档流中的特点: 块元素: 块元素在文档流中的特点是独占一行,自上向下进行排列。 块元素在文档流中默认宽度是父元素的100%。 块元素在文档流中不设高度的情况下,默认高度由内容撑开。 内联元素: 内联元素在文档流中的特点是从左向右排列,如果一行容纳不下内联元素,则会自动换行,元素大小由内容撑开。 内联元素在文档流中默认高度宽度都是由内容撑开的。 - 元素没脱离普通文档流会按照元素特定的属性进行布局 - 当元素脱离文档流后会改变原来的属性 - css浮动绝对定位会使元素脱离普通文档流。 详情参考下方css浮动等属性. 浮动 为元素设置浮动以后,会使元素脱离普通文档流。 元素脱离文档流后,元素下方的元素会向上偏移。 浮动的元素碰到父元素的边界或者其他浮动元素时会停下。 如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素。 如果一行内容纳不下浮动元素后,元素会自动换行浮动。 浮动的元素不会超过他上边的兄弟元素。 float可以使元素浮动。 继承性:NO 可选值: - none 默认值不浮动 - left 元素脱离文档流,元素向左侧浮动 - right 元素脱离文档流,元素向侧右浮动 语法: div{ width:200px; height:200px; float:left; } - 块元素脱离文档流依次从左在一行排列。

 
 
 

元素脱离文档流特点 块元素脱离文档流后,高度和宽度由内容撑开。 内联元素脱离文档流后,会变成块元素,可以设置宽高属性。 浮动文字环绕 浮动的元素不会盖住文字,通过浮动可以设置文字环绕图片效果 给图片直接设置浮动就可以。 通过这个特效可以设置文字环绕图片的效果, 高度坍陷问题 在普通文档流中父元素的高度是由子元素撑开的,也就是说子元素多高父元素就有多高。 当子元素脱离普通文档流之后,子元素不会撑开父元素的高度,也就形成了父元素高度坍陷的问题。 当子元素脱离文档流之后,父元素会形成高度坍陷问题,父元素下的所有元素都会向上移动,这样会导致页面布局混乱。 高度坍陷解决方法: - 设置父元素的高度,防止高度坍陷出现。但是高度写死,父元素的高度不能适应子元素的高度,此方法不推荐使用。 - 根据w3c规定,在页面中元素都有一个隐含的属性叫做Block Formatting Context. - 简称BFC,该属性可以设置打开或者关闭,默认是关闭的。 - 当开启元素的BFC后,元素会具有如下的特性: 1. 当开启父元素的BFC以后,元素将会具备如下的特性: - 父元素的垂直外边距不会和子元素重叠 - 开启BFC的元素不会被浮动元素所覆盖 - 开启BFC的元素可以包含浮动的子元素 - 开启BFC语法: - 设置元素浮动 - 设置元素绝对定位 - 设置元素为display:inline-block - 设置display值为hidden或者auto > 以上方法设置在父元素中 设置元素浮动 设置元素浮动 使用此方法可以撑开父元素高度,但是会导致父元素宽度丢失,且会导致下方元素上移,不能解决问题。 .box{ float:left; }

 

设置元素绝对定位 ............ 设置元素为display:inline-block - 此方法可以解决问题,但是会导致父元素宽度丢失,不推荐使用此方法 将元素的overflow设置为非visible值 此方法设置值为auto和hidden可以解决问题,推荐使用。 p{ overflow:hidden; } 高度塌陷实例 /* 父元素不设置高度 */ .box{ border: 10px solid red } /* 为子元素设置高度 */ .box1{ width: 100%; height: 1000px; background: yellow; } /* 当给子元素设置浮动后,子元素 会脱离文档流,不会撑开父元素的高度 */ .box1{ float: left; } - 高度坍陷问题存在与父子元素,当子元素脱离文档流后,无法撑开父元素高度,从而形成高度坍陷问题。

 

IE6高度坍陷解决办法 IE6及以下的浏览器不兼容BFC 在IE6中虽然没有BFC,但是具有另一个隐含的属性叫做haslayout 该属性的作用和BFC类似,所以IE6浏览器可以通过开haslayout来解决该问题 开启haslayout方式: zoom:1 数字对应倍数 zoom:1只在ie6中支持,为了让多个浏览器支持,设置zoom:1和overflow:hidden:hideen即可. div{ zoom:1; overflow:hidden; } - 此方式可以解决所有浏览器高度塌陷问题。 清除浮动副作用的办法 给父容器写高度,可以解决问题,但是高度写死,会影响后面的布局,不推荐使用。 父元素设置overflow:hidden,可以解决问题,但是会对溢出的部分隐藏。不推荐使用。 ie浏览器给父元素设置zoom:1。 clear可以用来清除其他浮动元素对当前元素的影响,推荐使用。 clear属性适用于兄弟元素 给被浮动元素影响的当前设置设置clear属性值,且此元素必须是块元素。 可选值: none 默认值 left 清除左浮动 right 清除右浮动 both 清除两侧浮动元素,清除浮动元素对他影响最大的 .box{ width: 100px; height: 100px; background: red; float: left; } .box1{ width: 200px; height: 200px; background: yellow; clear: both; } 定位 定位指的是可以把页面中的元素放到页面的任意位置 通过定位可以任意摆放元素 定位属性不会继承 语法: position 属性值 - relative 相对定位 - absolute 绝对定位 - flexd 固定定位是绝对定位的一种 - static 默认值 当开启了元素的定位属性以后,需要配合偏移量使用。 偏移量及可选值: 偏移量只需要使用两个就可以对元素进行定位 x-y轴只需要一个 - left 元素相对于其定位元素的左侧偏移量 - top 元素相对于其定位元素的上侧偏移量 - right 元素相对于其定位元素的右侧偏移量 - bottom 元素相对于其定位元素的下侧偏移量 - 偏移量可选值: - px - -px - % - -% position-relative position-relative 相对定位 相对定位不会脱离普通文档流 相对定位会使元素提高层级 相对定位不会改变元素的类型 - 相对定位是相当于元素自身在文档流中初始的位置进行定位 绝对定位 position:absolute 绝对定位 为元素开启绝对定位会使元素脱离文档流 开启绝对定位以后如果不设置偏移量则元素的位置不会发生改变 绝对定位是相当于离他最近的并且开启了相对定位的祖先元素进行定位 绝对定位会使元素提升一个层级 绝对定位会改变元素的性质。 子绝父相 position:absolute 固定定位 固定定位顾名思义就是将元素定位在页面中固定的地方。 固定定位相对于浏览器窗口进行定位。 固定定位也是一种绝对定位,他的大部分特点和绝对定位一样。 IE6不支持固定定位 - position:fiexd position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; - 此发放垂直水平居中 层级的问题 绝对定位和固定定位会使元素脱离文档流 如果层级一样下面的元素会覆盖住上面的 提高层级可以让元素优先显示 对于没有开启定位的元素不可以设置z-index值 -z-index:整数 -给元素设置z-index:整数 .box1{ background: yellow; position: absolute; top: 100px; left: 100px; z-index: 10; } 父元素的层级在高也不会盖住子元素 .box{ width:200px; height:200px; background:red; position:ralative; z-index:20; -父元素的层级在高也不会盖住子元素 } .box1{ width:100px; height:100px; background:blue; position:absolute; z-index:10; }

 
opacity opacity此属性可以设置元素透明度 opacity属性在ie8以及以下的浏览器不支持 属性值 0-1 0表示完全透明 1表示不透明 0.5表示半透明 1 默认效果不透明 0.1-0.9 透明度 .box2{ width: 100px; height: 100px; background: skyblue; position: absolute; left: 100px; opacity: 0.5; /* 设置元素透明 */ } ie浏览器透明度 filter:alpha(opacity=属性值) 透明度需要0-100之间的值 0表示完全透明 100表示不透明 50表示半透明 .box2{ width: 100px; height: 100px; background: skyblue; position: absolute; left: 100px; filter:alpha(opacity=50); - ie8以及以下浏览器设置元素透明 -半透明 } PS 快捷键 - Ctrl+R 出现标尺 - Alt+滚轮 ps文件的放大缩小 - Ctrl+1 100% - Ctrl+0 屏幕大小 矩形选择框 矩形选择框用来测量页面内容宽高大小 -f8可以出现详情,如果出不来点击右侧叹号选项。 - 矩形框功能 - 选取单个 - 选取多个 - 删除矩形框特定的部分 - 保存矩形框相交的部分 辅助线 辅助线相当于标尺,可以拖下垂直水平方向的辅助线 辅助线可以更好的配合矩形框工具进行测量单位 - Ctrl+h 可以去掉辅助线 - 也可以选中把他扔出去 取色器 取色器用来去页面的背景颜色或者文字颜色 - 点击前景色和背景色直接点击要选取的地方就可以取到对应的值
[展开全文]

clear样式:清除其他浮动元素对当前元素的影响

可选值:

none:默认值,不清除浮动

left:清除向左浮动的元素对当前元素的影响

right:清除向右浮动的元素对当前元素的影响

both:清除对当前元素影响最大浮动元素的影响

 

使用空白的div 设置清除浮动,可以撑开父元素的高度,从而解决高度塌陷的问题。

通过after伪类向元素最后添加一个空白块元素,然后对其清除浮动,解决高度塌陷问题。

.box:after{

    content:“”;  //添加一个内容

    display:block; //转换成一个块元素

    clear:both;   //清除两侧浮动

}

[展开全文]

BFC:Block Formatting Context 元素的隐含属性。默认是关闭的,开启BFC以后,元素会具有以下特性:

父子元素的垂直外边距不会重叠

不会被浮动元素覆盖

可以包含浮动的子元素

 

如何开启BFC:

设置元素浮动

设置元素绝对定位

设置元素的display为:inline-block

设置元素 的overflow为非visible(推荐的方式:将overflow设置为 hidden)

 

兼容IE6时用   zoom:1 样式。 

[展开全文]

浮动的元素不会盖住文字,可以通过浮动来设置文字环绕图片的效果。

块元素浮动以后,宽高会被内容撑开

内联元素浮动以后,会变成块元素

[展开全文]

float样式:

如果希望块元素在页面中水平排列,可以使块元素脱离文档流。

可选值:

none :默认值,元素在文档流中排列

left :元素脱离文档流,向左侧浮动

right :元素脱离文档流,向右侧浮动

如果元素浮动以后,会向左上或者右上漂浮,直到遇到父元素或者其他浮动元素,浮动元素不会超过他上边的兄弟元素。

[展开全文]

元素在文档流中的特点:

块元素:

在文档流中独占一行,自上向下排列

在文档流中默认宽度是100%

在文档流中默认高度被 撑开

当元素的高度和宽度为auto时,设置内边距不会影响可见框的大小,而是会自动修改宽度,以适应内边距。

 

内联元素:

自左向右排列,如果一行不足以容纳所有内联元素,则换到下一行

默认宽度,高度都被内容撑开

[展开全文]

overflow样式:设置溢出内容

如果子元素的大小超出了父元素的内容区,则超过的大小会在父元素以外的位置显示。

可选值:

visible :默认值,在父元素外面显示

hidden :溢出的内容会被隐藏

auto : 根据需要为父元素自动添加滚动条

scroll : 为父元素添加滚动条(不论内容是否溢出)

 

[展开全文]

display样式:可以修改元素的类型。

可选值:

inline : 默认值,设置为内联元素(行内元素)

block  :设置为块元素显示

inline-block :设置为行内块元素(可以设置宽高,右不独占一行)

none :不显示元素,元素不占页面空间

 

visibility样式:设置元素的可见性

可选值:

visible :默认值,元素显示

hidden :元素隐藏,但会占用页面空间。

[展开全文]

内联元素(行内元素):

不能设置 with 、 height、垂直方向的外边距

可以设置水平方向的内边距、外边距,水平方向相邻的外边距不会重叠,会求和。

可以设置垂直方向的内边距,但是不会影响页面的布局(不会挤其他元素)

可以设置边框,但是垂直的边框不会影响页面的布局

[展开全文]

清除浏览器的默认样式:

*{

  margin:0;

  padding:0;

[展开全文]

垂直外边距重叠:在网页中相邻的垂直方向的外边距会发生重叠,即兄弟元素之间的相邻外边距会取最大值,而不是取和。

如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素。

[展开全文]

fieldset来为表单项进行分组可以将表单项同一组放到一个fieldset

 

 

[展开全文]

内边距(padding):盒子的内容区与盒子边框之间的距离。

元素的背景(背景图片)会延伸到内边距。

盒子的大小有内容区、内边距和边框共同决定。 

[展开全文]

课程特色

视频(103)
下载资料(1)
业界大牛亲自授课
前沿技术实时更新
足不出户免费学编程
关注尚硅谷微信 一键下载全部视频教程

关注尚硅谷微信

一键下载全部视频教程

©2018课程版权均归谷粒学院所有  京ICP备17055252号