盒模型和怪异盒模型
盒模型
怪异盒模型
- HTML文档是由一个个的HTML元素组成
- 盒模型:把每个HTML元素的组成想象成一个盒子
- 1. 盒模型的结构2. 盒模型是如何影响元素的位置的
- 盒模型的结构:
- 1. content(内容):用来显示标签里的内容2. padding(内边距):内容与边框之间的距离
- 3. border(边框):元素的边框4. margin(外边距):元素与元素之间的距离
- 本文档介绍的为普通盒模型.还有一种盒模型叫怪异盒模型两种盒模型在盒子的组成部分,写法,用法上没有区别.两者的区别在于对盒子大小的计算规则有所不同
- 普通盒模型在的盒子大小计算方式:
- 盒子的宽= width + 左右padding + 左右border + 左右margin
- 盒子的高= height + 上下padding + 上下border + 上下margin
- 1. content 内容
- 我们可以直接往元素里面写文字或者添加标签 或者人为的设置宽度和高度
- 2. padding 内边距背景色能渲染到padding区域
- 3. border 边框一条完整的边框由3个值组成
- 1. 边框的宽度 px 2. 边框的类型 a. solid 实线 b. dashed 虚线1(矩形) c. dotted 虚线2(圆形)
- 3. 边框的颜色背景色渲染到边框区域 边框的三个值,只有边框类型是必须值,其余两个可省略 如果宽度省略,默认值3px;如果颜色省略,默认值与当前元素的color值相同
- 4. margin 外边距背景色不会渲染到margin区域
- margin在使用过程中的坑点:
- 1. 相邻兄弟元素在垂直方向上的margin会出现融合融合的标准是以较大的margin为最终值.
- 解决办法:a. 尽量只给一个元素设置垂直的margin值b: 给两个元素中的任何一个添加display: inline-block
- 2. 父子关系的元素在垂直方向上的margin会出现传递
- 解决办法: a. 用父级的padding代替子集的margin b. 给父级加边框 c. 给父级添加overflow: hidden d. 给父级添加display: inline-block
- margin和padding的合写形式:
- 一个值 四个方向两个值 上下 + 左右 三个值 上 + 左右 + 下 四个值 上 + 右 + 下 + 左
- 设置盒模型类型为怪异盒模型:box-sizing: ;content-box:普通盒模型 border-box:怪异盒模型 IE低版本浏览器里元素的盒模型的默认值
- 怪异盒模型的盒子大小:
- 盒子的宽= width(内容宽 + 左右padding + 左右border) + 左右margin
- 盒子的高= height(内容高 + 上下padding + 上下border) + 上下margin
auto值
- auto值,可以灵活的进行块元素的布局在盒模型里,一般我们会给width,margin设置值为auto
- 1. 如果width,margin-left,margin-right三个值里有一个设置为auto,其余两个必须为定值.
- 2. 如果width,margin-left,margin-right三个值都为定值且发生冲突,系统会强制修改margin-right的值.
- 3. 如果margin-left和margin-right的值都设置成auto,width的值必须是定值.
- 行元素如果要水平居中,我们给其父级设置text-align:center
- 块元素如果要水平居中,我们给元素自身设置左右margin值为auto,同时,width要给定值
浮动
浮动造成的影响:
- 浮动:用来实现多个块级元素的横向布局
- 文档流:默认状态下文档中元素所在的位置
- 浮动的元素的特点:
- 1. 浮动 (float)的值有两个: 左浮动(left)和右浮动(right)
- 2. 设置了浮动的元素,其大小默认由内容撑出
- 3. 设置了浮动的元素,可以设置宽高
- 4. 设置了浮动的元素,水平浮动,直到遇到父级的边框或者另外一个浮动元素停止浮动
- 5. 设置了浮动的元素,脱离文档流,层级提升,失去自己原有的位置,会影响到它后面的兄弟元素,但是如果后面的兄弟元素里有图片或者文字,图片或者文字不受影响
- 6. 设置了浮动的元素,自动margin失效
- 浮动的元素脱离文档流,失去了自己原有的位置,其后面的兄弟元素会顶替占据浮动元素的位置.导致浮动元素覆盖在后面的兄弟元素之上.
- 清除浮动造成的影响:
- clear:1. left 清除左浮动造成的影响2. right 清除右浮动造成的影响3. both 清除左浮动或者右浮动造成的影响
- 注意:!!!!!clear样式要添加给受浮动影响的元素,而不是添加给浮动的元素!!!!!
- 如果父级不设置高度且内部的所有元素都浮动,则父级无法再由其内部的内容撑出高度,导致高度为0,该现象我们叫做"内容塌陷"
- 解决办法:
- 1. 人为给父级设置高度2. 给塌陷的父级添加overflow:hidden3. 给所有浮动的元素下面添加一个空内容非行元素,并给空元素设置clear:both.
display样式
- display:用来规定元素的类型
- 1. inline 将元素的类型设置成行元素
- 2. inline-block将元素的类型设置成行级块元素(本质上还是行元素,但是拥有块元素的特点,如可以设置宽高)
- 3. block 将元素的类型设置成块元素
- 4. none 将元素隐藏
定位
- 定位:position:对元素的位置进行精确的调整
- 定位的值一共有四个: 2. relative 相对定位 3. absolute 绝对定位 4. fixed 固定定位
- 以上四个值仅仅只是规定了元素定位的方式具体的元素应该如何移动,还需要另外的四个CSS样式决定left,right,top,bottom,注意:四个方位样式只对设置了非static定位的元素起效果.
- 1. 静态定位 static 默认值
- 2. 相对定位 relative
- a. 相对定位的元素不完全脱离文档流,保留自己之前的位置,层级也提升了,会比不定位的元素层级高b. 相对定位的元素移动的相对参考位置是自己之前的位置
- 3. 绝对定位 absolute
- a. 绝对定位元素完全脱离文档流,会失去自己之前的位置. b. 绝对定位的元素的参考位置是,距离它最近的,设置了非static定位的祖先元素,如果所有祖先元素都没有设置非static定位,那么就相对于整个html文档定位.
- 以后,如果一个元素添加了position:absolute,立刻去给父级添加position:relative
- 4. 固定定位 fixed
- a. 固定定位的元素完全脱离文档流,会失去自己之前的位置. b. 固定定位的元素的参考位置是整个html文档.
- (1.)绝对定位,会脱离文档流(不占原来的文档流空间),提升层级
- (2.)行元素设置完绝对定位之后,会支持宽高设置,支持上下padding和margin
- (3.)块元素绝对定位之后,自动margin失效,不再占用父级整行空间,不给宽高的时候,由内容进行填充
- (4.)绝对定位元素,是基于离该元素最近的定位父级(1.父级2.绝对定位/相对定位/固定定位3.最近的父级),进行定位的,都没有定位父级时,是基于document(浏览器的可显示区域)定位
z-index
- 用来调整定位元素在z轴上的层级关系.
- 默认情况下元素的z-index的值都为0,值越大越靠前,z-index可以为正值也可以为负值.
- 注意: z-index只对非static定位的元素有效果.
伪类选择器
- 1. :link 能找到定义了超链接且没有被访问过的元素
- 2. :visited 能找到定义了超链接且已被访问过的元素
- 3. :hover 能找到鼠标移动到在其上面的元素
- 4. :active 找到鼠标在其上面按下不松开的元素
- 伪类选择器与类(class)选择器的比较:
- 1. 伪类选择器也可以一次找到多个元素2. 伪类选择器在书写语法上与类选择器不同3. 伪类选择器不需要我们事先给元素添加class值,系统几乎已经给所有的元素提前添加好了对应的伪类属性和值
- 注意事项: 如果给一个元素需要添加以上四个伪类选择器里的若干个.
- 需要按照如下顺序添加伪类:link-visited-hover-active
- "爱恨原则" LoVe HAte
隐藏元素的两种方式
- 隐藏元素:
- 1. display: none;2. visibility: hidden;
- 显示:
- display:block或者inline-block或者inlinevisibility:visible
- 两种隐藏元素的区别:
- display:none 隐藏的元素会失去自己的位置,visibility:hidden隐藏的元素会保留自己的位置.
表单
- 表单标签 form 双标签该标签表示表单的范围,在form标签里去写各种各样的表单控件元素
- action属性:规定了form标签里的数据应该被提交到的位置
- method属性:规定了数据传递时的传递方式
- a. post方式:一般用于向服务器传递数据,但是也可以获取数据,post方式可传递的数据量较大,所传递的数据会存储在请求体里,不会显示在网址部分,比较安全
- b. get方式:一般用于从服务器获取数据,但是也可以向服务器传递数据,get方式可传递的数据量比较少,所传递的数据会直接以键值对的形式拼接到网址的后面,是可见的,不太安全
- 1. 输入框 input
- 常用属性:type: 表示控件的类型 type=text表示是输入框value:输入框的值placeholder:占位文字name:键值对的键值
- 2. 密码输入框 inputtype=password
- 3. 提交按钮 inputtype=submit只有该种按钮才具有提交数据的功能
- 4. 重置按钮 input type=reset
- 5. 单选框 input type=radio
- 单选框默认没有单选效果,使用name属性可以将某些单选框分成一组,实现单选效果
- 如果想要实现点击文字选择对应选框的效果,需要使用label标签,把label标签的for属性值填写成对应单选框的id值
- 提交的键值对的值是value属性的值
- 6. 多选框 input type=checkbox
- 多选框在传递数据时,name建议写成数组的形式,名字[]
- 7. 下拉框 select标签
- option标签的selected属性可以实现默认选择该选项
- 8. 文本域 textarea
vertical-align
- vertical-align 用来解决行元素或者行级块元素在垂直方向上的对齐方式
- 1. baseline默认值 元素与当前行的基线对齐
- 2. sub 降低元素到当前行的下标位置
- 3. super 提高元素到当前行的上标位置
- 4. top 元素的顶端与当前行的顶端对齐
- 5. middle元素的中垂点与当前行的基线加上1/2字母x的高之后位置对齐
- 6. bottom元素的低端与当前行的低端对齐
- 7. text-top元素的顶端与当前内容的顶端对齐
- 8. text-bottom元素的低端与当前内容的低端对齐
- 图片底部有缝隙的问题:
- 因为图片是行级块元素,默认在垂直方向上是基线对齐的,而基线的位置不是当前行的底部,所以导致图片与底部有缝隙
- 解决办法:
- 1. 把图片的display设置成block
- 2. 把图片的vertical-align设置成top/bottom/middle
- 3. 把父级的行高设置成0
文字有关的样式
- 文本颜色:color 文字大小:font-size首行缩进:text-indent字体类型:font-family
- 文本粗细: font-weight 写法一: 填写100-900的整百数
- 写法二: normal boldbolderlighter
表格
合并单元格
- 表格标签:table 双标签 表示表格的范围
- 完整的表格有三部分组成: 1. 表头 thead2. 内容 tbody3. 表尾 tfoot
- 这三部分不是必须都要写的,但是tbody是必须要有的. 如果不写tbody,系统会自动添加一个tbody.
- tr标签, 表示一行td或者th标签,表示一个单元格
- td和th的区别:th默认文字加粗,文字始终水平居中
- 合并单元格需要使用到单元格的两个属性
- 1. colspan:列合并 横向合并
- 2. rowspan:行合并纵向合并
流式布局
- 流式布局,也叫百分比布局
- 可以实现的效果是网页里的某些部分能跟随浏览器的拖拽自动调整自身尺寸
- 我们一般会把元素的width,height,margin,padding由之前的定值,可以改写成百分比
- 1. 设置成百分比时,width相对于的时父级的width,height相对于的是父级的height
- 2. 设置百分比时,margin和padding都是相对于父级的width计算的.跟父级的height没有任何关系
圆角
- 圆角:border-radius
- 单独设置某一个方向上的角 如果填写一个值,那么表示水平和竖直的值相同如果写两个值,第一个值表示水平方向的值,第二个表示竖直方向的值.
- border-top-left-radiusborder-bottom-left-radiusborder-top-right-radiusborder-bottom-right-radius
- 合写:一个值表示四个角的水平竖直值统统一样*/
- 两个值:第一个值表示左上角和右下角水平和竖直的值,第二个值表示右上角和左下角水平和竖直的值
- 三个值:第一个值 左上角水平和竖直的值,第二个值 右上角和左下角水平和竖直的值,第三个值 右下角水平和竖直的值
- 四个值:第一个值 左上角水平和竖直的值,第二个值 右上角水平和竖直的值,第三个值 右下角水平和竖直的值,第四个值 左下角水平和竖直的值
- 如果想用合写的方法表示一个角的水平竖直值不相等，把水平方向的值写到一起，竖直方向的值写到一起，中间用/分隔
em和rem
- em和rem与px一样,都属于长度单位.
- 但是最终浏览器还是会把em和rem换成px来布局.
- 1. em, 一个em单位表示当前元素的font-size值.
- 2. rem,一个rem单位表示html元素的font-size值.
H5的新标签
- HTML5的新特性:1. 新增新的标签,弃用一些之前的旧标签2. 新增本地存储功能3. 新增音频,视频标签4. 新增绘图标签canvas
- HTML5的新特性目前并不是所有浏览器都支持的.
- 浏览器内核是webkit的浏览器一般都支持H5的新特性 webkit内核的浏览器 (Safari, Chrome, Firefox) 语义化
- 1. mark标签:双标签 标记标签mark标签会出现颜色
- 2. meter标签:双标签 一般用来表示电量或者内存的使用情况
- 使用meter的属性展示状态value属性: 表示当前值 默认取值范围0-1min属性: 最小值max属性: 最大值low属性: 最低预警值high属性: 最高预警值
- 当前值高于最高预警或者低于最低预警,颜色发生变化
- 在标签里对用户做出提示,当浏览器不支持meter标签时,会显示标签里的文字
- 3. 单词内换行标签:wbr
- 4. 拼音/标注标签 ruby标签,需要与rt和rp标签结合使用被标注的内容, 写到ruby里标注的信息写到rt标签里 rp标签只有在浏览器不支持该标签的时候才会显示
5. datalist标签 双标签需要结合input标签使用option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 option标签中的内容作为 select标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。
6. 折叠标签 details标签:双标签 需要结合summary标签使用把需要折叠的内容写到summary标签后面。
- 7. 音频标签 audio:双标签 支持mp3, ogg, wav格式的音频文件
- 常用属性: 1. controls: 显示控制条2. autoplay:自动播放3. loop:循环播放4. muted:静音
- 8. 视频标签 video:双标签
- audio里的属性,video都有,意思一样,用法一样
- source标签承载不同的视频文件, 让video标签在不同浏览器执行播放时,可以进行选择.
- 9. H5新增的表单控件
- 10. H5提供的语义化区域分隔标签
