HTML文档结构 HTML文档结构包括三部分 <html> 此元素可告知浏览器其自身是一个html文档,所有的标签都写到它的内部 <head> 头部 <head>头部位于<html>和</html>之间 <title> 标题 <title>展示在浏览器标签当中的标题 <meta> 元标签 <meta> 这个标签用来描述html网页文档的属性 <body> HTML 标签 开始标签和结束标签也被称为开放标签和闭合标签 一般成对出现的标签,其内容在两个标签中间,单独呈现的标签,则在标签属性中赋值。 标签的分类 CSS选择器的优先级 1、选择器的针对性越强,它的优先级别就越高 2、选择器的权值 *:0 标签:1 类:10 属性:10 伪类/伪元素:10 id: 100 important: 1000 3、原则:选择器的权值加到一起,大的有限;如果权值相同,后定义的有限 4、优先级排序 important > 内联 > ID > 类|伪类/伪元素|属性 > * > 继承 标签元素划分: 1、块元素:特点:自己独占一行:就像一个段落,能够随时设置宽度和高度。 h1-h6、div、hr、form、p、li、ul 2、内联(行内)标签:不会自己独占一行,九号线给一个单词,一直往后排。宽度,高度,内边距都不能改变 a、big、br、em、img、label、span 3、行内-块标签:多个内联(行内)-块级元素可以在一行,可以设置宽度高度 块元素与内联元素相互转换: 1、把内联元素转换成块元素 2、把块元素转换成内联元素 3、转化为内联块元素 居中: 水平居中: 行内-块级标签: text-align:center 块级标签:margin:0 auto box-sizing属性 页面布局: 1、定位: position 元素来设置元素的定位 static 默认值,元素没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 相对定位: 相对于自身做出的位置上的改变 left right top bottom 1、开启元素的相对定位后,如果不设置偏移量元素不会发生任何变化 2、相对定位元素相对于其自身在文档中的位置来定位 (以自身为参照物) 3、相对定位的元素不会脱离文档流 4、相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素 5、相对定位的元素会提升一个层级 绝对定位:相对于父标签的定位 1、元素设置绝对定位以后,如果不设置偏移量,元素的位置不会发生变化 2、绝对定位的元素是相对于距离他最近的、开启了对位的祖先元素进行定位,如果所有的祖先元素都没开启定位,则相对于浏览器窗口进行定位 3、绝对定位的元素会完全脱离文档流 4、绝对定位会改变元素的性质,内联变块,块的高度和宽度都被内容撑开,并且不独占一行 5、绝对定位会使元素提升一个层级 固定定位: 1、固定定位是一种特殊的绝对定位,他的特点大部分都和绝对定位一样 2、不同的是,固定定位的元素永远都是相对于浏览器窗口进行定位的,并且他不会随滚动条滚动。 层级属性: 1、定位元素 > 浮动元素 > 文档流中的元素 2、当元素开启了定位以后,可以通过z-index来设置元素的层级 3、z-index值越高,元素越优先 4、如果z-index值一样,或者都没有z-index则优先显示下边的元素 5、父元素永远不会盖住子元素 雪碧图: 雪碧图被应用在众多使用了很多小图标的网站上 相当于把每张小图以png格式的文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好 高度塌陷: 产生原因:父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑开父元素的高度,也就会导致父元素的高度坍塌 造成后果:父元素的高度一旦塌陷,所有标准流中元素的位置将会上移,导致整个页面的布局混乱 解决办法: 1、开启父元素的BFC BFC:块级格式化环境,元素的隐含属性,默认是在关闭的状态,可以通过一些特殊的形式来开启BFC 开启BFC以后的特性: 父元素的垂直外边距不会与子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动子元素 开启BFC的方式: 设置元素浮动 设置元素绝对定位 设置元素的类型为inline-block 设置overflow为一个非默认值,一般都是使用overflow.hidden来开启BFC ******重要的手段 2、在塌陷的父元素的最后添加一个空白的div,然后对该div进行清除浮动 使用这种方式会在页面中添加多余的结构 清除浮动:有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能 none:默认值,不清楚浮动 left:清除左侧浮动元素对当前元素的影响 right:清除右侧浮动元素对当前元素的影响 both:清除两侧浮动元素对当前元素的影响 3、使用after伪类,向父元素后添加一个块元素,并对其清除浮动**********最常用的方式 该种方式的原理和方法二原理一样,但是不用向页面中添加多余的结构 高度塌陷完善 1、字标签浮动,父元素高度崩塌 2、子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素, 使用空的table标签可以隔离父元素的外边距,组织外边距的重叠 这种方式会增加页面的结构 不好用 3、经过修改后的clearfix是一个多功能的,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠 .clearfix::before, .clearfix::after{ content:''; display:table; clear:both; } 序号选择器: 1、不区分类型的 :first-child 选中同级别中第一个标签 :last-child 选中同级别中最后一个标签 :nth-last-child(n) 选中同级别中倒数第n个标签 :nth-child(n) 选中同级别中第n个标签 :only-child 选中同级别中唯一子元素标签 2、区分类型的 :first-of-type 选中同级别中同类型第一个标签 :last-of-type 选中同级别中同类型最后一个标签 :nth-of-type(n) 选中同级别中同类型第n个标签 :nth-last-of-type(n) 选中同级别中同类型倒数第n个标签 :only-of-type 选中同级别中唯一同类型子元素标签 3、奇偶选择 :nth-child(odd) 选中级别中所有奇数 :nth-child(even) 选中同级别中所有的偶数 :nth-child(xn+y) x,y是用户自定义的n为计数器,从0开始递增选择,到元素的总个数停止 表单: 1、fieldset 在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中 2、legend 在fieldset可以使用legend子标签,来指定组名 rem 1、rem可以在用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮 2、rem(font size of the root element) 是指相对于根元素的字体大小的单位 3、一旦根节点html定义的font-size 变化,那么整个网页中运用到rem的也会随之变化 rem的使用: 1、浏览器的默认字体高都是16px,所有未经调整的浏览器都复合: 1rem=16px, 那么12px=0.75rem 10px=0.625rem 2、重新计算哪些被放大的字体rem数值,避免字体大小的重复声明 3、目前PC端开始普遍使用rem,移动端基本完全使用 字体图标: 1、基本概念:可以像使用字体一样使用图标 2、优点: 1、轻量性: 一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小, 一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像,可以减少HTTP请求 还可以配合HTML5离线存储做性能优化 2、灵活性: 图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色,Hover状态 透明度,阴影和翻转等效果,可以在任何背景下显示,使用位图的话,必须得为每个不同大小和不同效果 的图像输出一个不同文件 3、兼容性: 网页字体支持所有现代浏览器,包括IE低版本 3、缺点: 1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用 2、使用版权上有限制,有好多字体是收费的,当然也有很多免费开源的精美字体图标供下载使用 3、创作自己的字体突变很费时间,重构人员后期维护的成本偏高 4、使用 伸缩布局: 1、Flex布局: display:inline-flex 将对象作为弹性伸缩盒展示,用于行内元素 display:flex 将对象作为弹性伸缩盒展示,用于块级元素 2、常用属性: flex-direction 用于指定flex主轴的方向,继而决定flex子项在Flex容器中的位置 取值: row:默认值,便是水平方向从左到右系列,此时水平方向轴线为主轴 row-server:与row相反 column:表示垂直方向从上到下排列,此时垂直方向轴线为主轴 column-reverse:与column相反。 justify-content align-items flex-wrap align-content align-self
前端HTML部分笔记
猜你喜欢
转载自blog.csdn.net/GT_Stone/article/details/87992606
今日推荐
周排行